Posted By

username on 01/29/09


Tagged

images gallery loading mootools


Versions (?)

Mootools - Assets.Images


 / Published in: JavaScript
 

URL: mootoolsLoadImages

This snippet assumes that you have a container div with an id of "images".

It also assumes that each img element inside your container div has the CSS property visibility: hidden

  1. var loadImages = function(strSelector)
  2. {
  3. var arrImages = $(strSelector).getElements('img');
  4. var arrSources = [];
  5. arrImages.each(function(eleImage) {
  6. arrSources.push(eleImage.get('src'));
  7. });
  8.  
  9. new Asset.images(arrSources, {
  10. onComplete: function() {
  11. var objChain = new Chain;
  12. arrImages.each(function(eleImage) {
  13. objChain.chain(function() {
  14. eleImage.set('tween', {
  15. duration: 300
  16. }).tween('opacity', 0, 1);
  17. this.callChain.delay(100, this);
  18. });
  19. });
  20. objChain.callChain();
  21. }
  22. } );
  23. }
  24.  
  25. window.addEvent(
  26. 'domready',
  27. function()
  28. {
  29. loadImages( $('images') );
  30. }
  31. );

Report this snippet  

You need to login to post a comment.