CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3model-view-controller
Greg Finzer
Greg Finzer

Reputation: 7054

How do I create a dynamic image gallery popup in MVC3?

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?

Upvotes: 0

Views: 2771

Answers (1)

Greg Finzer
Greg Finzer

Reputation: 7054

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")[email protected]' style='padding: 10px' />
</a>

Upvotes: 1

Related Questions