Jump to content


Progressive Enhancement - Basic Image Gallery

  • Please log in to reply
1 reply to this topic

#1 BorysSokolov

  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts
  • LocationBratislava

Posted 20 August 2013 - 06:14 PM

The website I'm currently working on has a simple image gallery written in HTML and PHP. However, I plan to enhance it with jQuery so that the site wouldn't need to reload whenever the user would browse to the next or previous image.


At the moment, the page is structured like this:

     $image = $_GET['image'];
     $image_arr = $image_class->fetchImage($image);
     require('pages/display_single_image.html'); //uses $image_arr to get the image path etc.
     //list all images

On the page, the user can browse to next and previous images by clicking the corresponding links, retrieved by $image_arr. So I restate my question: with this setup, what would be the standard way of implementing jQuery functionality to allow for browsing of images without refreshing?

#2 kicken

  • Gurus
  • Wiser? Not exactly.
  • 3,317 posts
  • LocationBonita, FL

Posted 20 August 2013 - 08:31 PM

On the jquery side of things, you need to capture the click of the next/previous links and make an ajax request. On the PHP side of things you'd want a bit of code to respond to that ajax request. You can either have PHP output new HTML and have jQuery replace the existing HTML or you could output a small json object w/ necessary details and update the HTML.

For example, given the starting HTML of something like:
<div id="singleImage">
   <img src="image2.jpg" id="image">
   <a href="gallery.php?image=1" id="prev">Prev</a> <a href="gallery.php?image=3" id="next">Next</a>
You'd write some jQuery such as:
	$('#prev, #next').click(function(e){
		//Prevent the browser from folloing the link.

		//Request the data via ajax.  this refers to the <a> tag, this.href is it's href attribute value
		$.get(this.href, function(o){
			//Change the attributes of the image, prev, and next elements.
			$('#prev').attr('href', o.prevHref);
			$('#next').attr('href', o.nextHref);
			$('#image').attr('src', o.imageSource);
		}, 'json');  //The 'json' indicates we want the return data to be treated as json
That will register an onclick handler to both the next and previous links. When that handler is triggered it will cancel the browser's default action of following the links and instead make an AJAX request to your script requesting the next or previous image. It expects a JSON response containing an object with three properties:
.prevHref - The new URL for the previous link
.nextHref - The new URL for the next link
.imageSource - The new URL for the image source

The next step is to have your PHP script detect that it is an AJAX request and respond accordingly. Whenever jQuery sends an AJAX request, it includes a custom header called X-Requested-With set to the value XMLHttpRequest. You can test for this in your PHP script. For example:
	$image = $_GET['image'];
	$image_arr = $image_class->fetchImage($image);
		//This is an AJAX request so respond with json
		header('Content-type: text/json');
		echo json_encode(array(
			'nextHref' => 'gallery.php?image='.$image_arr['nextId']
			, 'prevHref' => 'gallery.php?image='.$image_arr['previousId']
			, 'imageSource' => $image_arr['source']
	else {
		//This is a normal request, respond with the full HTML
		require('pages/display_single_image.html'); //uses $image_arr to get the image path etc.
Of course, I am making broad assumptions there regarding your data and HTML structure. You'll need to modify to match your real setup. This should be enough to let you see the concept and get you started at least however.
Did I help you out? Feeling generous? I accept tips via Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7
Kicken's World⦄ ⦃Recycle old CD's

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users