<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<jQuery Cycle Gallery with lazy loading ⁄ >




clicks: 17840 17840 2009-09-05 2009-09-05 goto mySnippets mySnippets javascript  Download  Bookmark This 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.
  1. #wide_gallery{
  2. margin: 0 auto;
  3. border: solid 15px #900;
  4. background-color: #36393D;
  5. width: 100px; height: 100px;
  6. }
  7.  
  8. .loading{background: url("loader.gif") no-repeat center center;}




jquery.a-cyclegallery.js, our Jquery plugin.
  1. /**
  2. * Automatic Cycle Gallery
  3. *
  4. * @name aCycleGallery
  5. * @version 0.1
  6. * @author pedrocorreia.net
  7. * @return Jquery
  8. */
  9. jQuery.fn.aCycleGallery = function(settings) {
  10.  
  11. //gallery settings
  12. var _settings = jQuery.extend({
  13. imgs: [],
  14. path: "",
  15. interval: 4000
  16. }, settings);
  17.  
  18. /**
  19. * Gets the rightmost substring, with a given length,
  20. * from a String object
  21. *
  22. * @param Int Number of chars
  23. * @return String
  24. **/
  25. String.prototype.right = function(n) {
  26. var len = this.length;
  27. return this.substring(len - n, n) || "";
  28. };
  29.  
  30. return this.each(function() {
  31. var _numPics = _settings.imgs.length;
  32. var $gallery = $(this), _current_item = 0, _timer = null;
  33.  
  34. /**
  35. * Load the next image
  36. **/
  37. var LoadNextImage = function() {
  38. var next_img = _current_item + 1;
  39. if (next_img >= _numPics) { next_img = 0; }
  40. _current_item = next_img;
  41.  
  42. var src = _settings.imgs[next_img].img,
  43. title = _settings.imgs[next_img].title;
  44.  
  45. $gallery.addClass("loading");
  46.  
  47. var img = new Image();
  48. $(img).load(function() {
  49. var self = this;
  50. $gallery
  51. .html(this)
  52. .animate({width: this.width, height: this.height}, 500, "swing",
  53. function() {
  54. $(self).fadeIn();
  55. $gallery.removeClass("loading");
  56. _timer = setTimeout(function() {
  57. LoadNextImage();
  58. }, _settings.interval);
  59. }
  60. );
  61. }).hide().attr({ "src": src, "title": title, "alt": title });
  62. }; //end LoadNextImage
  63.  
  64. /**
  65. * If we specified a common path to all of our files,
  66. * this method will update each image url
  67. */
  68. var FillImagesArray = function() {
  69. if (_settings.path) { //we specified a path
  70. //add slash if needed
  71. _settings.path += (_settings.path.right(1) !== "/" ? "/" : "");
  72. for (var i = 0; i < _numPics; i++) {
  73. _settings.imgs[i].img = _settings.path + _settings.imgs[i].img;
  74. }
  75. }
  76. }; //end FillImagesArray
  77.  
  78. /**
  79. * AutoRun
  80. **/
  81. var AutoRun = (function() {
  82. if (_numPics > 0) {
  83. FillImagesArray();
  84. LoadNextImage();
  85. }
  86. })(); //end AutoRun
  87.  
  88. });
  89. }; //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
  1. $(document).ready(function() {
  2.  
  3. //images object
  4. var images = [
  5. { img: "1.png", title: "Picture 1"},
  6. { img: "2.jpg", title: "Picture 2" },
  7. { img: "3.jpg", title: "Picture 3" },
  8. { img: "4.jpg", title: "Picture 4" },
  9. { img: "5.jpg", title: "Picture 5" }
  10. ];
  11.  
  12. //start our animation
  13. $("#wide_gallery").aCycleGallery({
  14. imgs: images,
  15. path: "images/"
  16. });
  17.  
  18. });




Our html file:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4.  
  5. <head>
  6. <title>Jquery Cycle Gallery</title>
  7. <meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
  8.  
  9. <link rel="stylesheet" href="_css/style.css" />
  10. <script type="text/javascript" src="_lib/jquery-1.3.2.min.js"></script>
  11. <script type="text/javascript" src="_lib/jquery.a-cyclegallery.js"></script>
  12. <script type="text/javascript" src="_lib/CycleGalleryInit.js"></script>
  13. </head>
  14.  
  15. <body>
  16. <div id="wide_gallery"></div>
  17. </body>
  18. </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.









clicks: 17840 17840 2009-09-05 2009-09-05 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This