Scanning Folders with PHP--tutorial.jcwcn.com

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

view plaincopy to clipboardprint?

<!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>

<!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

View it here.

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.

view plaincopy to clipboardprint?

ul#options {
...misc styles...
height: 1%;
}

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)

view plaincopy to clipboardprint?

$(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;
});
});

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]