Jump to content

Adaptive Images, Session and jQuery-Ajax

horst

By horst,
in Getting Started

 Share

Recommended Posts

horst Hero Member

horst

Posted
Posted

Hi all,

I'm actually try to handle some mixed sort of adaptive and responsive image display in a gallery. That means I want to serve one out of three or four image-length that best fit to the current client-device-viewport, (to avoid sending 1600x1200 images to smartphones).

The plan is as follows:

  • The first page displays only thumbnails, so with them there is only one length.
    When the thumbnail page is loaded, it should send the actual viewport dimensions to PW.
     
  • Dimensions get stored in session.
     
  • Image-src is linked to /img/ID/, /img/ is a PW php script that compare last stored viewport dimensions against the width-height of desired image and send that one that fits best.

As I have half of that already running long time on my old website (but with prototype and scriptaculous) I think I can solve that with jquery too. But with browser compatibility and all that stuff I'm feeling pretty much uncomfortable, so I want to ask if the following JS-code is bullet proof and also up to date for my needs or if I should use something different these days:

function sendViewportDimensions() {
    // some jquery-ajax code 
}

document.observe('dom:loaded', function() {
    sendViewportDimensions();
    Event.observe(document.onresize ? document : window, "resize", function() {
        sendViewportDimensions();
    });
});

And second question is if I have to add some kind of session-id to the ajax-request or if that is send automatically with it, or if it is send only sometimes automatically and sometimes not? (and I better have to add it to be save) ??

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted
so I want to ask if the following JS-code is bullet proof and also up to date for my needs or if I should use something different these days:

I'm not enough of a Javascript expert to say for sure here. But I do know that jQuery provides some pretty reliable functions for this use:

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document
And second question is if I have to add some kind of session-id to the ajax-request or if that is send automatically with it, or if it is send only sometimes automatically and sometimes not? (and I better have to add it to be save) ??

No need to worry about session IDs with ajax requests. The server and browser are all handling this behind the scenes in the same way they do with a regular request. 

  • Like 1
Link to comment
Share on other sites
horst Hero Member

horst

Posted
  • Author
Posted

Try adaptiveimages.com by matt wilcox. Works fine for what you try to do. I used it myself on a pw project.

thanks Soma, I have had this already in my BookmarkList from another Post where you have pointed to it! ^-^

But with this site I want to restrict direct access to images under site/assets/.. to only allow thumbnails (via .htaccess) and therefor I have to write some extra code and I choosed this method because I allready know it. (lazy me)

No need to worry about session IDs with ajax requests. The server and browser are all handling this behind the scenes in the same way they do with a regular request.

Oh, thats fine to hear. Makes things easy! :)

I'm not enough of a Javascript expert to say for sure here. But I do know that jQuery provides some pretty reliable functions for this use:

Hhm, I have read some notices from when I have created the old site with prototype and scriptaculous. There was some weird things with doctype-interpretion by some MS-IE (7 or maybe 8, what was the brand-new one;-) Also if I have had some kind of valid XHTML it wasn't right interpreted by IE and it results in choosing the Quirksmode, what wasn't supported by prototype when trying to get width and height of viewport. That was a lot of headache and I haven't really understood that, only knowing it was some kind of IE-bug because the doctype starts with <?xml

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

And to use crossbrowser check if a resize event is available for window or for document was to support old browsers.

So, with my new site I only support IE8 or newer browser and doctype is HTML5 :)

And therefor I can use jQuery syntax:

        var resizeTimer;

	function sendViewportDimensions() {
		// test 
		console.log($(window).width() + ' x ' + $(window).height());
	}

	$(document).ready(function() {
		sendViewportDimensions();
		$(window).resize(function() {
			window.clearTimeout(resizeTimer);
			resizeTimer = window.setTimeout('sendViewportDimensions()', 250);
		});
	});

Also have learned something new here: When hooking into window.resize event, it could be better to use a small timeout before sending ajax-request. Without it I have had 10 requests when only do one manual window resize.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...