I agree with Aarons method:
jQuery('a.someClass').each(function(){
var = a;
a.click(function(event){
event.preventDefault();
var src = a.attr('href');
jQuery.getJSON(src, fucntion(data){
var width = data.width;
var height = data.height;
var img = jQuery('<img />').attr('src', src);
jQuery('#SomeContainer').html(img);
});
});
});
It should degrade nicely for clients with javascript disabled.
To solve the problem of needing extra information about the image consider
making some server side code that returns the information about the image
when it get's requested via ajax.
so:
//URL: host/image.php?id=10
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest"){
//Requested via ajax, return information about image in json string
} else {
//Requested by browser or some non ajax client, return image itself
readfile?
}
I have never used this approach, just an idea.. Sorry about jQuery..
Cheers,
Cam
On Wed, May 27, 2009 at 11:26 PM, oi_antz <[email protected]> wrote:
>
> 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]
-~----------~----~----~----~------~----~------~--~---
