Let's imagine that you want to build a page that will display snapshots of your latest work. One way to do this would be to hard-code the images into your document. The obvious repercussion is that, every time you want to add a new item, you must manually update your html document. Another method would be to store and retrieve the information from a MYSQL database. This will function perfectly, though for many sites, this solution may possibly offer far more power than is technically needed - not to mention the increase in hosting costs.
In such instances, the best solution is to make PHP scan your "portfolio" folder and dynamically create the code for you. If you want to update your page with a new snapshot, all that you need to do is drag the image, and its respective thumbnail, into the appropriate folders - and PHP will do the rest. Let's build it now!
Our Mission
Let's briefly outline what we need to accomplish.
- Use PHP to scan our portfolio folder. It will then cyle through each file, that is an image, and then display it on the page.
- Style our content a bit using CSS.
- When the users clicks on a thumbnail, we'll use jQuery to load the large version of the image in the main panel.
- If the user has Javascript disabled, he'll simply be directed to a new page that contains the full-sized image
How to Use It
Adding a new image to our portfolio is simple. Take a snapshot of your website, brochure, postcard, etc and size it to 500px x 350px. Place this image within the "images/featured" folder.
Next, create a thumbnail that is 50px x 50px. Place this image within the "images/tn" folder.
You must make sure that both the full-sized and the thumbnail images have the exact same file name.
Our Final HTML
<!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">
<head>
<title>Scanning Directories with PHP</title>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>Some Portfolio</h1>
<div id="featured">
<?php
$featured_dir = 'images/featured/';
$scan = scandir($featured_dir);
echo '<img src="'. $featured_dir . $scan[2] . '" alt="image" />';
?>
</div>
<ul id="options">
<?php
$dir = 'images/tn/';
$scan = scandir($dir);
for ($i=0; $i<count($scan); $i++) {
if ($scan[$i] != '.' && $scan[$i] != '..') {
echo '
<li>
<a href="' . $featured_dir . $scan[$i] . '">
<img src="'. $dir . $scan[$i] . '" alt="'. $scan[$i] . '" />
</a>
</li>';
}
}
?>
</ul>
</div>
</body>
</html>
Our Final CSS
Compensating For IE6
Luckily, we only have one thing to fix. If you look at the image above, you'll see that the #options unordered list is not containing its floated list items. While modern browsers will correctly clear the items thanks to our "overflow: hidden;" style, IE6 needs one more rule. Append this to your stylesheet.
ul#options {
...misc styles...
height: 1%;
}
I could have set the height to anything and it would still work. Think of it as Drago punching IE6 in the face and telling it, "Wake up!". This style forces IE6 to expand as much as is need to clear its children.
The Complete Javascript(jQuery)
$(function() {
$.preloadImage = function(path) {
$("#featured img").attr("src", path);
}
$('ul#options li img').click(function() {
$('ul li img').removeClass('selected');
$(this).addClass('selected');
var imageName = $(this).attr('alt');
$.preloadImage('images/featured/' + imageName);
var chopped = imageName.split('.');
$('#featured h2').remove();
$('#featured')
.prepend('<h2 class="description">' + chopped[0] + '</h2>').children('h2').fadeIn(500).fadeTo(200, .6);
});
$('ul#options li a').click(function() {
return false;
});
});
Extra Credit
There are ways to create thumbnails of our images dynamically. Try to find a way to make PHP scan our "featured" folder and then dynamically create a thumbnail version and save it within the "tn" folder.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
