posted on:March 8, 2010

How to create thumbnail gallery using Easy frontend framework


With numerous lightbox scripts I have used so far, I often found myself spending much more time in setting up things then I wanted. On almost all of them you first need to mark up your thumbnail gallery, then paste some images, then paste some CSS, then initiate JavaScript functions… A person with not so much knowledge can easily forget one of these steps resulting in non-functional code.

image gallery

When I started to code Easy front-end framework I was driven by the idea of keeping things so simple that anyone can use it no matter of the knowledge level. I also wanted to make the setting up to be as simple as changing the class name(s) of the element.

This is exactly what I was thinking about when I was coding the gallery functionality inside the Easy. This functionality is what we’ll use here to build our thumbnail gallery.

View demo

Getting Started

First, let me mention that there are no extra crazy features here. The features here are the same you can find on other lightbox scripts. The advantage is simplicity of use. There is no need for extra images, extra css or code…

If you haven’t used Easy so far I suggest you take a look at the documentation and the demo page. Then download the package (read the license as well 🙂 ) and play around with it.

To activate JavaScript functions built into Easy you need to link jquery.js, easy.js and main.js from the package to your document. Please click here for more info.

Just as any other feature in Easy, galleries are controlled purely by class names. Also, galleries functionality is build upon the $.easy.popup() function – I simply extended it. To repeat, if you want to use lightbox popups in Easy you need to assign class name popup to anchor element like this:

<a href="/images/img_screencast.jpg" class="popup"> ... </a>

Please note that the class name popup is default class name for this functionality built into the Easy. You can always change the class name when calling the function: 

$(document).ready(function(){ 
	$.easy.popup('.lightbox');
});

Gallery Feature

To group images into a lightbox gallery you need to add another class name called gallery. The code would then look like:

<a href="/images/img_01.jpg" class="popup gallery"> ... </a>

I leave the thumbnail markup to your own preference but of course I recommend unordered list:

<ul>
  <li><a href="/images/img_01.jpg" class="popup gallery"><img src="/images/thumb_01.jpg"></a></li>
  <li><a href="/images/img_02.jpg" class="popup gallery"><img src="/images/thumb_02.jpg"></a></li>
  <li><a href="/images/img_03.jpg" class="popup gallery"><img src="/images/thumb_03.jpg"></a></li>
  <li><a href="/images/img_04.jpg" class="popup gallery"><img src="/images/thumb_04.jpg"></a></li>
</ul>

Important thing to note here is: if you want to group links/images into gallery you need to have matching class names (entire class attribute needs to be exactly the same). Using this rule you can create multiple galleries on a single page:

<ul>
  <li><a href="/images/img_01.jpg" class="popup gallery cars"><img src="/images/thumb_01.jpg"></a></li>
  <li><a href="/images/img_02.jpg" class="popup gallery cars"><img src="/images/thumb_02.jpg"></a></li>
  <li><a href="/images/img_03.jpg" class="popup gallery cars"><img src="/images/thumb_03.jpg"></a></li>
  <li><a href="/images/img_04.jpg" class="popup gallery cars"><img src="/images/thumb_04.jpg"></a></li>
  </ul>
<ul>
  <li><a href="/images/img_001.jpg" class="popup gallery flowers"><img src="/images/thumb_001.jpg"></a></li>
  <li><a href="/images/img_002.jpg" class="popup gallery flowers"><img src="/images/thumb_002.jpg"></a></li>
  <li><a href="/images/img_003.jpg" class="popup gallery flowers"><img src="/images/thumb_003.jpg"></a></li>
  <li><a href="/images/img_004.jpg" class="popup gallery flowers"><img src="/images/thumb_004.jpg"></a></li>
  </ul>

Script then generate Previous and Next links below the popup image for easier navigation. It also provides an info about the total number of images and current image index. You can use image captions as well – just add text to title attribute (please note that this feature doesn’t work if you use tooltip function on the same element).

If you want to put the custom text for buttons you need to update the parameters in the main.js file like this:

$(document).ready(function(){ 
	$.easy.popup({
        nextText:'next image',
        prevText:'previous image'
	});
});

Click here to view the demo.

Hope you find this easy 😉 If you like the article share with your friends and spread the word about Easy front-end framework. Cheers!

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (13 Comments)

  1. Tony Molsey
    March 8, 2010

    Has the easy.js script had any update from version 1.0 to accommodate this code? or will it work with the initial release? thanks

  2. ChrisR
    March 8, 2010

    I wonder about the semantic validity of putting a gallery of images into an unordered list. A photo gallery is not a list in any meaningful definition of a list, IMHO. A list of ingredients for a recipe, sure. Maybe a paragraph, with the image and caption? Or even a definition list, with the Caption as the dt and the image as the dd?

  3. cssglobe
    March 8, 2010

    @Tony: you need to update the easy.js file. I added the support for gallery feature today.

  4. cssglobe
    March 8, 2010

    @ChrisR: Actually I am putting a list of links to images into UL. That's why I think it makes sense.

  5. Bryan Watson
    March 8, 2010

    I understand the logic behind having the "gallery" class applied to individual anchors / images, but when using a list for your gallery, would it not make sense to give the parent element the class? I'm sure you could check with jQuery is there is ul>a>img, and then call the script on the anchors only if an image is present. That way you can add and remove anchors and images without repeatedly applying classes to each one.

  6. cssglobe
    March 9, 2010

    @Bryan: The reason why I didn't do what you suggested is that I didn't want to limit the feature to a certain markup structure. The way I did it you are able to group images no matter of their relation in the markup i.e. you can put all document's images in a gallery.

  7. m0mo
    March 9, 2010

    hi, nice script. Just one thing I don't like - the navigation through the gallery is annoying, when the dimension of the pictures change. You have to move the mouse everytime. I'm sure you can easily change this position via css or implement keyboard navigation too. Best regards m0mo

  8. Bryan Watson
    March 9, 2010

    I understand the logic behind using that method, but I was suggesting of implementing an 'if' scenario, where it will work on either the parent element (such as a UL), and / or each individual img / anchor. I think that would make the script a lot more flexible in terms of reducing markup and increasing consistency.

  9. Boris Strahija
    March 9, 2010

    I agree with Bryan, adding that kind of scenario would be great.

  10. wespai
    March 10, 2010

    nice collect it to http://ajax.wespai.com

  11. Emil
    March 15, 2010

    Thanks for great tutorial Alen, also mad props for Easy front-end framework, you nailed it. Emil

  12. Remik
    March 30, 2010

    Awesome Blog, it's my fitst time !

  13. lirik
    March 30, 2010

    great tutorial thanks..

Sorry, the comment form is closed at this time.