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
Video Tutorial: Randomly Display Some Images From A Set of Images: PHP
Source Code: Randomly Display Some Images From A Set of Images: PHP
(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
PHP Code Explanation:
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).
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.