Not tested but according to theory this might work: Keep html working as present for graceful degradation. Add a function to the $(document).ready() event (using JQuery). This function will loop each full-size image and set an attribute "orig_src" to the value of the "src" attribute and will remove the original attribute "src" or set to blank string. Add a function to the click event of the thumbnail which will set the "src" attribute to the value of the "orig_src" attribute and thus will load the image on demand. Additionally, you may like to pre-load the full-size images after a 2000ms timeout, which will cache the image ready for clicking - unless your customer is using Microsoft's browser of glory which doesn't know what cache means or what 60+20+20 equals :P
I think this will breach HTML validation but should still work.. Opera might be fussy about the "orig_src" attribute.. Haven't had to do this before but I expect it will work because the JQuery $(document).ready() event is supposed to fire after the document HTML has loaded but before images begin to load. On May 27, 10:39 pm, Matt Thomson <[email protected]> wrote: > Essentially I already have a good way of doing it, and that is JSON, > it gives me all the info I need, as it is scalable. > > It is more the case that being able to put the data in the html is a > bit better than putting it in JSON (although JSON is still really > good, better than XML). But putting the data in the html makes the > browser load too many images. > > So essentailly I am wondering if there is a trick to put the images in > the html without loading them (and keeping the code tidy, and the > server requests to a minimum. I very much doubt there is, but I want > to double check, before I go ahead with rewriting JSON into my > javascript. > > On May 27, 10:07 pm, "Aaron Cooper" <[email protected]> wrote: > > > I'm thinking database table or xml file now. Is that an option? > > > A > > > -----Original Message----- > > From: [email protected] [mailto:[email protected]] On Behalf > > > Of Matt Thomson > > Sent: Wednesday, 27 May 2009 6:39 p.m. > > To: NZ PHP Users Group > > Subject: [phpug] Re: Putting the images in the html, but stopping the > > browser from requesting them? > > > Ideally I want to have a lot of data about each image available to my > > javascipt. > > > I could do it in json like this: > > > var myJSONObject = {"images": [ > > {src": "http://www....";, "width": "100", "height": "100", > > "alt": "image description"}, > > {src": "http://www....";, "width": "200", "height": "200", > > "alt": "image description2"}, > > > ] > > > }; > > > This is my preferred way of doing it, as it is scalable, I can put as > > many key/value pairs in there as possible. Also I need the widths and > > heights. Ideally I would like to have all this info in the html, but > > not at the expense of making the code unscaleable and untidy. > > > As for reinventing the lightbox, I am trying to make my own. I think > > lightbox, slimbox, thickbox have been done to > > death.http://www.ignitejoomlaextensions.com/ > > > On May 27, 6:27 pm, "Nathan Kennedy" <[email protected]> > > wrote: > > > Hey Matt, > > > > What if you were to set all the large image src tags to a same single > > pixel > > > file (so it only requires a single server request) and then in the same > > > onclick event that changes the CSS, also change the src tag to the > > intended > > > full size image? > > > > Thanks, > > > Nathan.http://www.kennedytechnology.com > > > > -----Original Message----- > > > From: [email protected] [mailto:[email protected]] On Behalf > > > > Of matt_thomson > > > Sent: Wednesday, 27 May 2009 4:01 p.m. > > > To: NZ PHP Users Group > > > Subject: [phpug] Putting the images in the html, but stopping the browser > > > from requesting them? > > > > I have already brought this up in a mootools group, but If anyone here > > > has any smart ideas, they are much appreciated. > > > > I have a photo gallery that will display about 50 thumbnails. When > > > thumbnail #1 is clicked, big image number 1 is displayed and so on... > > > > Ideally I would like to put all the thumbs in one div (as <img > > > src="..), and all the big images in another div (as <img src=".. > > > style="display; none" />) > > > > Then I could (with mootools) grab all the big images as an array > > > (getElements), grab the thumbs as an array, and do an each loop > > > through the thumbs. So if thumbsImageArray[index] is clicked on, > > > bigImageArray[index] is shown. > > > > All pretty simple, except that I don't want 50 big images to load > > > right away, and "display: none" does not stop the browser from > > > requesting them from the server. > > > > I am thinking I may have to make a seperate json bit, and load all the > > > big image info (src, width,height) as arrays/objects, then access > > > these arrays with the mootools. This would work, but ideally I would > > > love to have all my data nice and cleanly put in the HTML, do a > > > getElements, do an each loop, sorted. > > > > Does anyone know of a way to stop the browser requesting the image, > > > and still having the correct src in the html. I don't want an > > > incorrect src, as it will result in 50 unnesscessary server calls. > > > > Thanks, > > > > Matt. --~--~---------~--~----~------------~-------~--~----~ NZ PHP Users Group: http://groups.google.com/group/nzphpug To post, send email to [email protected] To unsubscribe, send email to [email protected] -~----------~----~----~----~------~----~------~--~---
