Building a gallery widget with elastic and jquery

Categories: AJAX • General

It may seem that Elastic CSS Framework only works for laying out websites, but there is more. In this Article ill show you how to build a simple Gallery Widget with elastic, we will call it elastic_gallery.

First the features

• A place to display the images
• A place to display the thumbnails
• Thumbnails should be paginated with simple next previous control
• Thumbnails should be elastic to the width of the gallery container

Now the layout

gallery desired design

And the html markup

This creates all the basic markup of the gallery, and now the CSS

.elastic-gallery .thumbnail
{
  float:left;
  padding:1px;
}
.elastic-gallery .image
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.elastic-gallery .thumbnails-display-container
{
  overflow : hidden;
}

this simple rules prepares the code for the JavaScript effects to take place in the gallery, images will fade in, and thumbnails will have a slider effect

Now the JavaScript Code

jQuery(function($){
  $('.elastic-gallery').each(function(){
    var gallery = this;
    $('.right', this).click(function(){
      $('.thumbnails-display-container', gallery).animate({
        'scrollLeft' : ( $('.thumbnails-display-container', gallery).attr('scrollLeft') + $('.thumbnails-display-container', gallery).width() )
      }, 500, 'linear');
    });
    $('.left', this).click(function(){
      $('.thumbnails-display-container', gallery).animate({
        'scrollLeft' : ( $('.thumbnails-display-container', gallery).attr('scrollLeft') - $('.thumbnails-display-container', gallery).width() )
      }, 500, 'linear');
    });

    var imagesWidth = 0;
    $('.thumbnail', this).each(function(){
      imagesWidth += $(this).outerWidth(true);
    });

    $('.thumbnails', this).css('width', imagesWidth);

    $('.thumbnail a', this).bind('click', function(event){
      var img = new Image();
      $(img).load(function(){
        var current = $('.image', gallery);
        var next = current.clone(true);
        next.hide();
        next.find('img').attr('src', img.src);
        $('.image-container', gallery).append(next);
        next.fadeIn(500, function(){
          current.remove();
        });
      }).error(function(){
        alert('error');
      }).attr('src', $(this).attr('href'));
      event.preventDefault();
    });
  });
});

At the end you obtain an elastic gallery, that you can even modify on the runtime, and using Elastic.refresh() on the context of the gallery will update the design of your gallery

			first row, first column content

			first row, second column content

			first row, third column content

			second row, second column content