Css Globe CSS and Web Design News

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.

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!