<jQuery Cycle Gallery with lazy loading ⁄ >

18554

2009-09-05

mySnippets javascript

Download

Bookmark This

Jquery's a powerful javascript Framework and nowadays's a commonly use by web-developers all around de globe.

This will be my first snippet using Jquery, as you can easily see by going throughout the javascript-related snippets in this website, I didn't use, this is just because I always to try to implement this simple snippets without using a framework.

Jquery and other frameworks are very powerful and allow us to simplify many tasks, such as: event handlers; animations, DOM interaction; etc; etc; leaving us more time to enhance our application or giving us time to other projects.

If I'm allowed to give you an advice, first try to understand javascript concepts and all its power, try to get familiar with the language, and then choose a framework and start using it, you'll understand it better, and learning curve will be shorter.

Professionally I use Jquery but since this website's only a hobby, that's why I always wrote javascript snippets without any framework help, from now on I'll try to do both.

For a first jQuery snippet, a simple image Gallery.

This is like version 0.1, in the future I'll add more options, you can see it as a Jquery Image Gallery series.
But for the first version, this gallery will basically animate our images and will cycle them, i.e, it'll loop indefinitely; it'll have a preloader and each image transition will have an animation, it will adopt to the image dimensions. You can easily configure it to your needs.

This gallery will have lazy loading, this is, it'll only load the images when strictly needed, so you can have as many images as you want to, without impacting your page initial loading.

Here goes the code...

style.css, style your gallery.

#wide_gallery{
  margin: 0 auto;
  border: solid 15px #900;
  background-color: #36393D;
  width: 100px; height: 100px;
}
 
.loading{background: url("loader.gif") no-repeat center center;}

jquery.a-cyclegallery.js, our Jquery plugin.

/**
* Automatic Cycle Gallery
*
* @name aCycleGallery
* @version 0.1
* @author pedrocorreia.net
* @return Jquery
*/
jQuery.fn.aCycleGallery = function(settings) {
 
  //gallery settings
  var _settings = jQuery.extend({
    imgs: [],
    path: "",
    interval: 4000
  }, settings);
 
  /**
  * Gets the rightmost substring, with a given length,
  * from a String object
  *
  * @param Int Number of chars
  * @return String
  **/
  String.prototype.right = function(n) {
    var len = this.length;
    return this.substring(len - n, n) || "";
  };
 
  return this.each(function() {
    var _numPics = _settings.imgs.length;
    var $gallery = $(this), _current_item = 0, _timer = null;
 
    /**
    * Load the next image
    **/
    var LoadNextImage = function() {
      var next_img = _current_item + 1;
      if (next_img >= _numPics) { next_img = 0; }
      _current_item = next_img;
 
      var src = _settings.imgs[next_img].img,
            title = _settings.imgs[next_img].title;
 
      $gallery.addClass("loading");
 
      var img = new Image();
      $(img).load(function() {
        var self = this;
        $gallery
        .html(this)
        .animate({width: this.width, height: this.height}, 500, "swing",
          function() {
            $(self).fadeIn();
            $gallery.removeClass("loading");
            _timer = setTimeout(function() {
              LoadNextImage();
            }, _settings.interval);
          }
        );
      }).hide().attr({ "src": src, "title": title, "alt": title });
    }; //end LoadNextImage
 
    /**
    * If we specified a common path to all of our files,
    * this method will update each image url
    */
    var FillImagesArray = function() {
      if (_settings.path) { //we specified a path
        //add slash if needed
        _settings.path += (_settings.path.right(1) !== "/" ? "/" : "");
        for (var i = 0; i < _numPics; i++) {
          _settings.imgs[i].img = _settings.path + _settings.imgs[i].img;
        }
      }
    }; //end FillImagesArray
 
    /**
    * AutoRun
    **/
    var AutoRun = (function() {
      if (_numPics > 0) {
        FillImagesArray();
        LoadNextImage();
      }
    })(); //end AutoRun
 
  });
};   //jQuery.fn.aCycleGallery

CycleGalleryInit.js, in this file we'll create our images array and start our gallery animation. The most important thing is that you understand how you can add your own images.

Our images array will have as many objects, as files you want to add to the gallery, each object image will have two properties:

img: our filename or the complete path including the filename, this is, let's suppose you have all the images in the same folder, you can only write the filenames without the path to them, but, you have to specify the path in another property, you'll see ahead; but if for instance you have images in different locations, than you have to write the full location.

title: this is the picture title, in this version will only fill images "alt" and "title" attributes;

Our array will have the following structure:

var images = [
{img: "image_filename.extension", title: "This is a title"},
{img: "image_filename2.extension", title: "This is another title"}
];

The other property in our gallery's path, as I wrote previously if you have all the images in the same folder, you can omit it in image location, but you'll have to give that information in this property (but, well, if you have all your html, javascript and images file in the same folder, you don't have to give a path ^_^'')
CycleGalleryInit.js

$(document).ready(function() {
 
  //images object
  var images = [
   { img: "1.png", title: "Picture 1"},
   { img: "2.jpg", title: "Picture 2" },
   { img: "3.jpg", title: "Picture 3" },
   { img: "4.jpg", title: "Picture 4" },
   { img: "5.jpg", title: "Picture 5" }
  ];
 
  //start our animation
  $("#wide_gallery").aCycleGallery({
    imgs: images,
    path: "images/"
  });
 
});

Our html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head>
    <title>Jquery Cycle Gallery</title>
    <meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
 
    <link rel="stylesheet" href="_css/style.css" />
    <script type="text/javascript" src="_lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="_lib/jquery.a-cyclegallery.js"></script>
    <script type="text/javascript" src="_lib/CycleGalleryInit.js"></script>
</head>
 
<body>
  <div id="wide_gallery"></div>
</body>
</html>

In the following video you can see this snippet in action:

If you have any doubt or found any error, please drop me an email.

18554

2009-09-05

mySnippets javascript

Download

Bookmark This