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
[youtube https://www.youtube.com/watch?v=ajAj6oAkz60]
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.