The art and science of css - image gallery

Hello forum:

I just added the “Image Gallery” from the book “the art and science…” by Sitepoint.

It does a nice css layout for me, but having implemented their design it doesn’t say how to implement the web technology for moving between the images with the ‘previous’ and ‘next’ text it created. Is there a similar walk-through guide that explains how to actually get this lovely gallery up and running?

Many of your heads are better than my one.

I’m not familiar with the book, but to implement the “next” and “previous” functionality you will need more than CSS, specifically a scripting language. This can be done either on the server side (PHP, ASP, Python, Perl, Ruby, SSI - whatever) or on the client side (JavaScript). It should be very simple, simply involving an array of the available images, finding the desired image in the array and either outputting the HTML for it (server-side) or modifying the DOM (like modifying the HTML) directly on the page (JavaScript).

You could either automate the process, by having a script on the server simply make the array from the available images in a directory, or it can be manual, where you have to make the array yourself. I’d recommend the former, as it can be just as simple as:

$images_array = glob('holiday_images/*');
$next = $_GET['next'];
if (in_array($images_array, $next)) echo '<img src=" . $next . " alt="">';

That’s a good start. I don’t want to belabour you, but if you have a moment I would be grateful to know how would this hook up with the css and mark up. Presumably the authors of this sitepoint book have been asked this before, if there is a walk-through guide for a beginner that would be great!