Open a image in a pop-up or modal box when click on image. Images are coming from sharepoint picture library, dynamically.

See more:

Javascript

jQuery

SharePoint2010

I have a custom visual web part. Some images are coming from SharePoint picture library dynamically. now when a user click on any image, that picture and description should open in the same page. in a modal or pop-up or like in google image.

html:

code behind:

using (SPSite site = new SPSite(SPContext.Current.Web.Url))
{
using (SPWeb web = site.OpenWeb())
{

SPList PicLib = web.Lists.TryGetList("ImageScroll");

string Image = "";

SPListItemCollection listcol = PicLib.Items;
foreach (SPListItem item in listcol)
{

Image += "";

Image += "";

}


Image += "

" + "<img src='" + web.Url + "/" + item.Url + "' style='height:auto;width:350px;'/>" + "

" + item["Title"].ToString() + "

";
ltrImage.Text = Image;


}
}

What I have tried:

using (SPSite site = new SPSite(SPContext.Current.Web.Url))
{
using (SPWeb web = site.OpenWeb())
{

SPList PicLib = web.Lists.TryGetList("ImageScroll");

string Image = "";


SPListItemCollection listcol = PicLib.Items;
foreach (SPListItem item in listcol)
{

Image += "";
Image += "";

}


Image += "

" + "<img src='" + web.Url + "/" + item.Url + "' style='height:auto;width:350px;'/>" + "

" + item["Title"].ToString() + "

";
ltrImage.Text = Image;


}
}