PHP Accessible Image Swapper

Lets set the scene... you have an online shop, and in that shop you have an item that you want to sell, and on the page for the item you have several pictures of that item that you want to present to your visitor, and to save space you want to be able to have them all displayed as thumbnails with a main picture that changes to reflect the image that the user clicked. Well fine, what you want is an image swapper, not a problem as there are hundreds of great Javascript image swappers out there. But, what if the visitor has Javascript disabled, or maybe they are visually impaired and are using a screen reader, or maybe even motor impaired and using only their keyboard to navigate, or maybe all of these, where are you going to find a fully degradable, accessible, cross browser compatible, simple image swapper? Once again Grow are here to help.

What is this?

This is a very simple image swapper that will work with or without Javascript, by utilising existing HTML form techniques. This means that whatever conditions this script is used in, it should still work by posting the imformation to itself and acting accordingly. Of course if Javascript is enabled then it will make use of that.

In Action

See a fully grown application utilising this technique..

View a basic example of this script.

The Script

<?
$imagesArray=array();

$imagesArray["src"][0]="1.jpg";
$imagesArray["alt"][0]="First Image";
$imagesArray["src"][1]="2.jpg";
$imagesArray["alt"][1]="Second Image";
$imagesArray["src"][2]="3.jpg";
$imagesArray["alt"][2]="Third Image";
$imagesArray["src"][3]="4.jpg";
$imagesArray["alt"][3]="Fourth Image";
$imagesArray["src"][4]="5.jpg";
$imagesArray["alt"][4]="Fifth Image";

$useImage=0; // set default image value (equal to array index number)

if(isset($_REQUEST)){
 while(list($key,$val)=each($_REQUEST)){
  if(strstr($key,"_img_x")){
   $useImage=str_replace("_img_x","",$key);
   break;
  }
 }
}

?>
<form method="post" action="<?=$_SERVER["PHP_SELF"]?>" id="imageSwapperForm" onsubmit="return false">
<?
for($i=0; $i < count($imagesArray["src"]); $i++){
 echo '<input type="image" name="'.$i.'_img" value="'.$i.'_img" src="'.$imagesArray["src"][$i].'" alt="'.$imagesArray["alt"][$i].'" onclick="document.getElementById('img').src=this.src; document.getElementById('img').alt=this.alt" />';
}
?>
<p><img id="img" src="<?=$imagesArray["src"][$useImage]?>" width="250" height="250" border="0" alt="<?=$imagesArray["alt"][$useImage]?>" /></p>
</form>

The script above can be broken down into 3 seperate sections.

Part One

The first part of the script is just an array in PHP to hold the values of the images that you want to use and the alt text that is associated with them. The images can be of any name and any image type that you wish, and of course the alt text can be any thing you wish to associate with the image also. This array can be of any length that you wish to encompass any amount of images.

The default image value ($useImage) reflects whatever image you wish to have displayed first (before anything is clicked).

Part Two

The second part of the script tests to see if the script is posting to itself (i.e. Javascript is disabled) and sets the value of $useImage to whatever was passed through by the form.

Part Three

The third part of the script is the form that is used to hold the thumbnail sized images for actioning. It is essentially just a loop that runs through the array of images that you set previously, and prints out to the page a form input type of image. This input uses the values of your images array to populate itself automatically. Also in the input is the only bit of Javascript needed in the form of an onclick event. Finally there is the main image itself.

How it works.

If Javascript is enabled then the script will make use of the onclick event handler to access the main image directly and set it's source and alt text values to those of the clicked input accordingly.

If Javascript is disabled, then the form will post to iteself and make use of the value assigned to the name attribute of the form input that was clicked. It will then set the value of $useImage, which will be used to assign the correct element from the image array to be used in the main image whe it is displayed.

Conclusion

So that's it. Quick, clean, and simple, and the best part is, it actually works. Feel free to play with the script as you see fit and please report and findings back here so that others (including ourselves!) may benefit.

Limitations

None that we are aware of. However, it is worth noting that the script as it is doesn't use actual thumbnail versions of images, only scaled down for the page versions of the actual images that will be displayed. So it is worth keeping this in mind when using large images as it could slow the displaying of your page if you use overly large images.

More articles

echo '';

document.getElementById(\'img\').title=this.alt;