In the first part of this tutorial we looked at how to set up a generic XML document with image information and then link your page to it through the simpleXML function in php. Using this method it is easy then to exploit the information in the XML document to display rows of thumbnails and even dynamically link them to the full sized images.
What I want to show you now is my way of setting up a pseudo-random function to pick 6 images from the XML document and display them like I have in the side bar to my right. It may seem a little unorthodox to some but I came up with this method to ensure that the sample of 6 is not only random but also that the same image is not displayed twice.
I’ll start with the same simpleXML connection script as we used in the first tutorial:
<?php
// set the XML file name as a PHP string
$myPhotoList = “gallery/photos.xml” ;
// load the XML file
$xml = @simplexml_load_file($myPhotoList) or
die (”no file loaded”) ;
?>
Lets Get Random
Now I want to start adding some code to define the range of image numbers. I also want to create the first ‘random’ number using the rand(firstNumber, lastNumber) function which picks a mathematically random number in the range given. Unfortunately to-date I have been unable to find a built-in function to calculate the number of nodes in an XML document so I’ll be setting the minimum number and the maximum number of images in the xml document manually. This means that the dynamic advantage of only updating the XML document to add more images is greatly decreased since you will also need to change in the php the range of images your working from. Stay tuned for a re-working of this solutions portion of the code.
<?php
…
$min = 0;
$max = 39; //the number of pictures in the xml
$num = rand($min, $max);
?>
I now want to set up a quick array with the same number of elements as there are images in the XML document and for reasons i will reveal shortly I want to set the value of each array element to be the same as its index.
<?php
…
$ar_numbers = array();
//Set up an array that corressponds with the
//number of images in the xml document
for($element = 0; $element <= 39; $element++) {
$ar_numbers[$element] = $element;
}
?>
The next step is set up a for loop so that I can iterate through displaying a random image 6 times (which is the number of thumbnails I wish to display in my side bar), producing the html code needed as we go. I have also wrapped the whole thing a CSS class called ‘hp_photo’ which mainly styles positions as well as how it should display the links. I’m not going to go into the CSS here for it and will leave that in your capable hands to create.
<?php
…
echo “<div class=\”hp_photo\”>”;
//randomly choose 6 images from the xml
for ($counter = 1; $counter <= 6; $counter++) {
$rand_image = $ar_numbers[$num];
//check to make sure the image hasn’t been
//used before by checking the array
while ($rand_image == “”) {
$num = rand($min, $max);
$rand_image = $ar_numbers[$num];
}
echo “<a href=\”".$xml->image[$rand_image]->
lgPath.”\” title=\”".$xml->image[$rand_image]->
title.”\”><img src=\”" .$xml->image[$rand_image]->
tnPath. “\” alt=\”".$xml->image[$rand_image]->
title.”\” width=\”".$xml->image[$rand_image]->
tnWidth.”\” height=\”".$xml->image[$rand_image]->
tnHeight.”\” /></a>”;
//clear the element in the array
//so it can’t be used again
$ar_numbers[$num] = “”;
//choose next random number
$num = rand($min, $max);
}
echo “</div>”;
?>
Ok, so don’t freak out, I realize that its a big chunk of code that seems a little overwhelming but its really not. I’ll walk you through each line.
After we print out the <div class=hp_photo> we move straight into the for loop that sets up the necessary info to iterate 6 times. Inside the for loop the first thing we do is set up a new variable called $rand_image which will hold the value stored inside the array that corresponds to the random number we generated higher up. I then check to make sure the value in the array isn’t blank (ie. “”) which is how it would look if that number had been used before. If it is blank, I recalculate the random number and try it against the array to see if its been used before and I continue doing this until I find a new number.
Now that I have my random number and I know it hasn’t been used before, I proceed to print out the necessary HTML needed to display the linked image (as we did in part 1). The only other thing to do before exiting the for loop is to clear the random number’s value in the array so it can’t be used again, and then set a new random number to $num ready for the next iteration.
Lets have a look at it again with the entire code:
<?php
// set the XML file name as a PHP string
$myPhotoList = “http://www.justagroove.net/gallery/photos.xml” ;
// load the XML file
$xml = @simplexml_load_file($myPhotoList) or
die (”no file loaded”) ;
// assign the listName element to a string
$nameOfAlbum = $xml->albumName ;
$min = 0;
$max = 39; //the number of pictures in the xml document
$num = rand($min, $max);
$ar_numbers = array();
//Set up an array that corressponds with the
//number of images in the xml document
for($element = 0; $element <= 39; $element++) {
$ar_numbers[$element] = $element;
}
echo “<div class=\”hp_photo\”>”;
//randomly choose 6 images from the xml document to display in within the “hp_photo” class specified in the style sheet
for ($counter = 1; $counter <= 6; $counter++) {
$rand_image = $ar_numbers[$num];
//check to make sure that the random number hasn’t been
//used before by checking the array
while ($rand_image == “”) {
$num = rand($min, $max);
$rand_image = $ar_numbers[$num];
}
//clear the entry in the array
//so it can’t be used again
$ar_numbers[$num] = “”;
echo “<a href=\”".$xml->image[$rand_image]->
lgPath.”\” title=\”".$xml->image[$rand_image]->
title.”\”><img src=\”" .$xml->image[$rand_image]->
tnPath. “\” alt=\”".$xml->image[$rand_image]->
title.”\” width=\”".$xml->image[$rand_image]->
tnWidth.”\” height=\”".$xml->image[$rand_image]->
tnHeight.”\” /></a>”;
//choose next random number
$num = rand($min, $max);
}
echo “</div>”;
?>
Good luck!
