Asset images
An example of Asset.images usage - not for beginners.
docs referencesjs code | html code | css code
References to Documentation
- Element/Element-Selectors.js#$E
- Native/Element.js#Element.setStyle
- Element/Element-Event.js#Element.addEvent
- Native/Element.js#$$
- Native/Element.js#Element.remove
- Remote/Assets.js#images
- Element/Element-Dimensions.js#Element.getTop
- Native/Element.js#Element.getStyle
- Native/String.js#String.toInt
- Effects/Fx-Style.js#Element.effect
- Native/Element.js#Element.injectBefore
- Effects/Fx-Style.js#Fx.Style.start
- Class/Class-Extras.js#Chain.chain
- Native/Function.js#Function.delay
- Native/Element.js#Element.setHTML
var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); var path = '/demos/Asset.images/'; var images = [ path + 'cow1.png', path + 'cow2.jpg', path + 'cow3.jpg', path + 'cow4.jpg', path + 'cow5.jpg' ]; gallery.setStyles({'opacity': 0, 'display': 'none'}); progress.setStyle('visibility', 'hidden'); $('clear').setStyle('visibility', 'hidden'); $('start').addEvent('click', function(e) { e = new Event(e).stop(); $('start').setStyle('visibility', 'hidden'); $('clear').setStyle('visibility', 'hidden'); if (!busy) { var galleryImgs = $$('#gallery img'); if (galleryImgs.length > 0) galleryImgs.each(function(image) { image.remove(); }); busy = true; progress.setStyle('visibility', 'visible'); gallery.setStyle('display', 'block'); new Asset.images(images, { onProgress: function(i) { this.setStyles({ 'position': 'absolute', 'opacity': 0, 'left': (gallery.getCoordinates().width / 2) - (this.width / 2), 'top': (gallery.getCoordinates().height / 2) - (this.height / 2) }); loadedImages[i] = this; var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length; bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length); }, onComplete: function() { progress.setStyle('visibility', 'hidden'); var fx = $('gallery').effect('opacity').start(1); timer = 0; loadedImages.each(function(image, i) { timer += 1500; image.inject(gallery); fx = function() { var imgEffect = image.effect('opacity', {duration: 1500}); imgEffect.start(1).chain(function() { if (i < loadedImages.length - 1) { this.start(0).chain(function() { image.remove(); }); } else { busy = false; $('clear').setStyle('visibility', 'visible'); $('start').setStyle('visibility', 'hidden'); } }); }.delay(timer * 2); }); } }); } }); $('clear').addEvent('click', function(e) { e = new Event(e).stop(); if (!busy) { $$('#gallery img').each(function(image) { image.remove(); }); var fx = new Fx.Style(gallery, 'opacity', { onComplete: function() { gallery.setStyle('display', 'none'); } }); fx.start(0); } $('clear').setStyle('visibility', 'hidden'); $('start').setStyle('visibility', 'visible'); });
<h3>Asset.images</h3> <p><a href="#" title="Start loading" id="start">start</a><a href="#" id="clear" title="Clear data">clear</a></p> <p id="log"></p> <br /> <div id="progress"><div class="bar"></div></div> <div id="gallery"></div>
#gallery { position: relative; margin: 10px auto; width: 500px; height: 400px; background: #2a2a2f; border: 2px solid #5f5f5f; } #progress { margin: 10px auto; width: 200px; height: 15px; padding: 2px; border: 2px solid #dfdfdf; } #progress .bar { width: 0px; text-align: center; font-size: 10px; height: 15px; background: #2a2a2f; color: #fff; font-weight: bold; }