Progressive Enhancement - Basic Image Gallery

[BorysSokolov]

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:

<?php
if(isset($_GET['image'])){
     $image = $_GET['image'];
     $image_arr = $image_class->fetchImage($image);
     
     require('pages/display_single_image.html'); //uses $image_arr to get the image path etc.
}else{
     //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?

[kicken]

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>
</div>

You'd write some jQuery such as:

$(function(){
	$('#prev, #next').click(function(e){
		//Prevent the browser from folloing the link.
		e.preventDefault();

		//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:

<?php
if(isset($_GET['image'])){
	$image = $_GET['image'];
	$image_arr = $image_class->fetchImage($image);
	if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest'){
		//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']
		));
		exit;
	}
	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.