Lightweight Image Gallery with Thumbnails

If you have a home page you might like to show images in an image gallery. There are numerous of different solutions for this on the web. In this guide you will learn to create your very own script for a image gallery using JavaScript and the open source free jQuery library.These are the basics of the image gallery:

  • No server-side scripting
  • Super-fast browsing without fades
  • Dead-simple HTML with a list of images
  • Lightweight, unobtrusive JavaScript to create thumbnails
  • CSS styling to create different layouts
  • Fallback if JavaScript or images are disabled
  • Cross-browser consistency

The plan is to have JavaScript grab each <img> element in the list and place it as a background in the parent <li> element. We will use CSS to style the thumbnails as small blocks with a defined height/width and a background-position. We also add a click-event for each <li> object that toggles it’s child’s <img> element’s visibility and adds an “active” class name to the <li>. With the help of CSS, we can then place the <img> to make it appear at the same position for each thumb. It would also be nice to use the alt value as title so we can have a preview of what’s coming when hovering the thumbnail. Lets create the image gallery!

The HTML

The HTML is really simple. Choose any images that you like for this gallery:

  1. <ul id="gallery">
  2. <li><img src="images/img1.jpg" alt="Image 1"></li>
  3. <li><img src="images/img2.jpg" alt="Image 2"></li>
  4. <li><img src="images/img3.jpg" alt="Image 3"></li>
  5. <li><img src="images/img4.jpg" alt="Image 4"></li>
  6. <li><img src="images/img5.jpg" alt="Image 5"></li>
  7. <li><img src="images/img6.jpg" alt="Image 6"></li>
  8. <li><img src="images/img7.jpg" alt="Image 7"></li>
  9. <li><img src="images/img8.jpg" alt="Image 8"></li>
  10. <li><img src="images/img9.jpg" alt="Image 9"></li>
  11. <li><img src="images/img10.jpg" alt="Image 10"></li>
  12. </ul>

This will display all off your images at the same time. It is time to add the JavaScript code to create an image gallery out of this.

The JavaScript

Bellow you find the code needed to create an interactive image gallery in HMTL. It uses jQuery so you need to grab that or link to it directly for inclusion in your project

  1. var gal = {
  2. init : function() {
  3. if (!document.getElementById || !document.createElement || !document.appendChild) return false;
  4. if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
  5. var li = document.getElementById('jgal').getElementsByTagName('li');
  6. li[0].className = 'active';
  7. for (i=0; i<li.length; i++) {
  8. li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
  9. li[i].title = li[i].getElementsByTagName('img')[0].alt;
  10. gal.addEvent(li[i],'click',function() {
  11. var im = document.getElementById('jgal').getElementsByTagName('li');
  12. for (j=0; j<im.length; j++) {
  13. im[j].className = '';
  14. }
  15. this.className = 'active';
  16. });
  17. }
  18. },
  19. addEvent : function(obj, type, fn) {
  20. if (obj.addEventListener) {
  21. obj.addEventListener(type, fn, false);
  22. }
  23. else if (obj.attachEvent) {
  24. obj["e"+type+fn] = fn;
  25. obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  26. obj.attachEvent("on"+type, obj[type+fn]);
  27. }
  28. }
  29. }
  30. gal.addEvent(window,'load', function() {
  31. gal.init();
  32. });

The CSS

The CSS is not very complicated either. Since we switched the gallery <ul> id from “gallery” to “jgal”, we can define different styles depending on whether the user has javascript enabled or not. The javascript also adds a class “active” to the active thumbnail li object, wich allows us to style it properly. In this case I chose to create 80px * 80px thumbnails in two columns and the large image to the right of the thumbnails. I also added some hover and active effects in this example:

  1. /* general styling for this example */
  2. * { margin: 0; padding: 0; }
  3. body { padding: 20px; }
  4. /* begin gallery styling */
  5. #jgal { list-style: none; width: 200px; }
  6. #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
  7. #jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
  8. #jgal li.active img { display: block; }
  9. #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

Now let’s add some basic styling if javascript is disabled:

  1. /* styling without javascript */
  2. #gallery { list-style: none; display: block; }
  3. #gallery li { float: left; margin: 0 10px 10px 0; }

IE 5-7 doesn’t understand the CSS 3 property opacity. So let’s add a fix for them that uses the microsoft-exclusive filter property:

  1. <!--[if lt IE 8]>
  2. <style media="screen,projection" type="text/css">
  3. #jgal li { filter: alpha(opacity=50); }
  4. #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
  5. </style>
  6. <![endif]-->

The :hover effect above will only apply to IE7, since IE6 can’t use the :hover pseudo-class on other elements than anchors.

One more fix

There is one last problem with this script; It doesn’t execute until the images are loaded, causing all the images to flicker. The fix is to use an ugly document.write before the script to hide the #gallery item:

  1. <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>

This works fine, except that explorer versions below 6 will not execute the gallery javascript. So we need to show the #gallery again for those browsers:

  1. <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->

You might also want to add a loading animation or text using the same technique if your images are heavy, since nothing will be shown until all images are loaded.

Also check out Galleria – another JavaScript gallery that can do even more. You can create a nice image gallery using HTML5 for your pictures.

Galleria | Cascading Order and Inheritance in CSS | Javascript Image Gallery