It has become a commonly used feature on a lot of sites to rotate certain images or banners at random order to maintain a fresher feel without the need to update (of course any website should be updated regularly - but I am talking about 'cosmetic' elements such as non-essential visuals for the enter or home page of a site).
This random feature can be set up with different methods such as Javascript or php - we will look at the php option as it is more compatible and does not rely on low to medium security settings to work.
In order to set up this random function - we will need a number of images for our random rotation of display as well as a php file performing the random selection and display the chosen image. The image placement can be done in two different set ups:
- using the php code directly within the HTML code
- placing the php (and therefore the image) within the HTML code via the include_once(); php function
In the example here - 10 images have been prepared in a designated folder - all images have been named starting from 1 - and the include_once(); php function has been set up to place the image at random order on the page.
If you are working on a larger site you will need to organise all site elements into an appropriate folder structure. You might use a specific folder for all elements to be placed on the page via the include_once(); php function, or group visual elements together.
For the sake of keeping this set up simple and easy to understand - our example has the most basic folder structure as you can see below. Before starting any php set up - make sure you have added your images into the root folder into an appropriate folder.
The following steps will take you through the set up of the example shown at the top of the page [open in new window]. Here the focus is on setting up the random function - please see the sample for a link to the css.
html script
The HTML script for the image is very minimal as it consists of 2 elements only. It defines a new DIV, <div id="random_img"> </div>, for the image formatting via CSS and contains the include_once(); php function which calls in the random image as soon as the page is loaded into the browser.<div id="random_img">
<!--random image -->
<?php include_once ( 'random_image_process.php' ); ?>
</div>
php script
As we have already linked to a named php file in the HTML code above - random_image_process.php - we will now need to name our new php file this existing name and save it into the folder as the HTML file - see folder set up shown above.The php code now defines 6 new variables to execute the random function:
- $total
defining the total number of image contained within the allocated folder - $file_type
quoting used file types by their extension - $image_folder
stating the folder containing the image files - $start
defining the first number of the image collection (for use in random calculation) - $random
generating the random number using mt_rand - $image_name
containing the chosen image and creating a file name for the ALT tag
<?php
// images named 1.jpg, 2.jpg etc
// total number of images in the folder
$total = "10";
// type of image file eg. .jpg or .gif
$file_type = ".jpg";
// location of folder containing images
$image_folder = "../random_img/";
$start = "1";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";
?>
0 komentar:
Posting Komentar