And yet another iteration :D Hopefully this one doesn't cut off parts of the code.
document.observe("dom:loaded", function() { $('main').update('<img src="shared/images/ajax-loader.gif" width="100" height="100" alt="Ajax Loader">'); var counter = 0; var links = $$("div#thumbs a").each(function(link) { new Element('img').observe("load",function() { if (++counter == links.size()) { $('main').update('<img src="' + links[0] + '" />'); } }).writeAttribute('src', link); }).invoke('observe', 'click', function(event) { event.preventDefault(); $('main').update('<img src="' + this.href + '" />'); }); }); On Apr 28, 10:57 pm, solidhex <patr...@solidhex.com> wrote: > Actually, it can be trimmed down a bit further to match the jQuery > sample (again, I have no idea if this is an efficient or best way to > do this, just porting code :) ) > > document.observe("dom:loaded", function() { > $('main').update('<img src="shared/images/ajax-loader.gif" > width="100" height="100" alt="Ajax Loader">'); > var counter = 0; > var links = $$("div#thumbs a").each(function(link) { > new Element('img').observe("load",function() { > if (++counter == links.size()) { > $('main').update('<img src="' + links[0] + > '"') > } > }).writeAttribute('src', link); > link.observe("click", function(event) { > event.preventDefault(); > $('main').update('<img src="' + link + '" />'); > }); > }); > > }); > > On Apr 28, 10:18 pm, solidhex <patr...@solidhex.com> wrote: > > > The following seems to work: > > > document.observe("dom:loaded", function() { > > $('main').update('<img src="shared/images/ajax-loader.gif" > > width="100" height="100" alt="Ajax Loader">'); > > var counter = 0; > > var links = $$("div#thumbs a"); > > links.each(function(link) { > > var img = new Element('img').observe("load",function() { > > if (++counter == links.size()) { > > $('main').update('<img src="' + links[0] + > > '"') > > } > > }).writeAttribute('src', link); > > link.observe("click", function(event) { > > event.preventDefault(); > > $('main').update('<img src="' + link + '" />'); > > }); > > }); > > > }); > > > the only difference is that I can't chain the onclick observe to the > > each enumerator as in jQuery. Here is the full working > > version:http://www.solidhex.com/code-samples/prototype/gallery.html > > > On Apr 28, 8:59 pm, solidhex <patr...@solidhex.com> wrote: > > > > It's to preload the images that are referenced by the links. Perhaps a > > > working sample of the jquery example might be more > > > clear:http://www.solidhex.com/code-samples/jquery/gallery.html > > > > On Apr 28, 7:21 pm, RobG <rg...@iinet.net.au> wrote: > > > > > On Apr 29, 10:25 am, solidhex <patr...@solidhex.com> wrote: > > > > > > Hi all > > > > > > I am trying to do something similar with Prototype as compared to this > > > > > snippet of code down below: > > > > [...] > > > > > The idea is, all the linked images pre-load while showing an animated > > > > > gif. Then, once the images are finished loading, you can click for a > > > > > standard js image swap. I am struggling just to get the pre-loading > > > > > portion working though. Here's what I was tinkering with: > > > > > It seems you simply want to display the loading gif while waiting for > > > > the body load event to fire, so why not do exactly that? Set your > > > > loading GIF as the first image to display, perhaps absolutely > > > > positioned in an obvious location, then when the load event occurs, > > > > remove it. > > > > > > document.observe("dom:loaded", function() { > > > > > So no loading gif while the html loads, only while the images load? > > > > > [...] > > > > > > Any suggestions? thanks in advance! > > > > > Most (all?) browsers show an animation to indicate that the page is > > > > still loading, and icons to show images that haven't loaded yet (among > > > > other things). Why do they need this? > > > > > -- > > > > Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---