Use of this script:
1. If you have a photo blog with 100 or more images, using this small php script you can show some random images on your homepage, to keep it more dynamic.. This makes up for a good user experience due to constant fresh content(images) each time.
2. If you have 10 products and you want to show atleast 3 products image on your homepage, using this php script you can randomly display the images and yet not bore your audience!
Page Contents
(image.php)
<?php $pic = array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'); shuffle($pic); ?> <html> <head> <title>Random Images</title> </head> <body> <ul> <?php for( $i = 0; $i < 3; $i++) echo "<li style=\"display: inline;\"> <img src=\"$pic[$i]\" width=\"250\" height=\"250\"> </li>"; ?> </ul> </body> </html>
Copy and paste above code into a plain text editor. Save the file with .php file extension. Make sure to have 5 image files(with .jpg extensions) in the same folder as image.php
Arrays are very important concept in all programming language.
$pic = array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
here $pic is an array variable and is used to store the file names of all the images.
shuffle($pic);
shuffle() is a standard PHP function, which shuffles the content of the array variable. i.e., it re-orders or changes the position of the elements of an array.
<?php for( $i = 0; $i < 3; $i++) echo "<li style=\"display: inline;\"> <img src=\"$pic[$i]\" width=\"250\" height=\"250\"> </li>"; ?>
Usually unordered listing tags of HTML displays elements vertically.
<li style="display: inline;"> </li>
But using some css style property, we are showing the images horizontally.
i.e., display: inline;
for loop, loops through 0 to 3(in above example). After the execution of the above line of code(for one instance), we get the following HTML output in the browser.
<ul> <li style="display: inline;"> <img src="4.jpg" width="250" height="250"> </li> <li style="display: inline;"> <img src="5.jpg" width="250" height="250"> </li> <li style="display: inline;"> <img src="1.jpg" width="250" height="250"> </li> </ul>
\ (back slash) is used as an escape character, to escape the effect of “ (double quote).
View Comments
thanks a lot bt how do i make it change automatically without happen to refresh the page? plz help.
@blay, That needs AJAX methods, and its a lengthy process..instead display the images inside an iframe.