Question

I have a requirement that I need to create a popup image gallery. Essentially the user clicks on an image folder and it pops up with the first image file full size and a group of scrollable thumbnails. The user would click on the thumbnail to display the image within the popup. I don’t want to load the images until the user clicks on the image folder.

Is there a jquery library or commercial control that will already do this?

Answer 1

The problem is that I didn’t know what to search for. A dynamic image gallery popup is called a lightbox. The query to use on google was jquery lightbox. Out of all the ones available, PrettyPhoto is the only one that had thumbnail images in the popup and an API to dynamically load the images during the popup.

Here are the ones available:

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Here is the only one that works as a dynamic popup with an API and thumbnails:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Here is the script needed to activate PrettyPhoto:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Here is the script to define the photos:

<script type="text/javascript" charset="utf-8">
    api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
    api_titles = ['Title 1','Title 2','Title 3'];
    api_descriptions = ['Description 1','Description 2','Description 3']
</script>

Here is what I used to click on a folder image with a content handler. The href of # is important:

<a href='#' onclick="  $.prettyPhoto.open(api_images,api_titles,api_descriptions);" title='@item.Folder.Title'>         
    <img style="max-height: 160px; max-width: 260px;" id='Img@(item.Folder.Id)' alt='@item.Folder.Title' title='@item.Folder.Title' src='@Url.Content("~/img.ashx")?mediaId=@item.Folder.Id' style='padding: 10px' />
</a>