Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi Larry.


I am sure that this has been done elsewhere, but I thought I would share it with you anyway.


I have a website that displays a slideshow of images of where I live ( www.beautifulcastril.com ).  To make things cleaner and quicker, I just upload the jpgs to the server via Filezilla and then, in the program use glob() to bring their filenames into an array.  I then used to pass through the array using foreach() to display the images automatically using js and CSS as per your book Chapter 2.


The irritating thing was that they always came out in the same order so I have changed the php to randomize the image order.  I have added comments in red specifically for this post:....



include ('header.php');
<table style = "width: 100%; border: 0; table-layout: fixed;">
<tr><td style = "width: 20%"><a href="castril.php"><img src = "images/village/P9040321.jpg" style = "width: 100%;" alt = "Sorry - image missing" title = "Click here" /></a></td><td style = "width: 20%;"><a href="castril.php" id = "area1">Castril town</a></td><td rowspan = "6" style = "vertical-align: top; margin: auto;">
This starts the js/CSS:
<div class="slideshow-container" style = "margin: auto;">
Get the images from the server and put them into an array called '$listing' using glob():
$listing = glob("images/area/*.jpg");
Find out how many files there are and subtract 1 as they start with 0:
$arrlength = count($listing) - 1;
Do a for/next loop to run through the whole array (from 0 to the length of the array - 1:
for($x = 0; $x < $arrlength; $x++) 
Get a random number between 0 and array length - 1 using mt_rand() which apparently is quicker than rand():
$random_keys = mt_rand(0, $arrlength);
$value is the filename related to the random number obtained above:
$value = $listing[$random_keys];
Use some js to take the filename and produce the image (see below):
echo '<div class="mySlides fade">
<img src="' . $value . '" style="display: block; margin: auto; width:80%;  border-style: solid; border-width: 2px; border-color: black; vertical-align: top;" alt = "Sorry - image missing">
echo '<div style="text-align:center">
<span class="dot"></span> 
$repeat = 1;  //Can't remember what this does!!!
Now for the js:
var slideIndex = 0;
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides.style.display = "none";  
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots.className = dots.className.replace(" active", "");
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 3000); // Change image every 3 seconds
etc. etc.......
1)  I know that my CSS is clumsy and I should use id = "..." linked to a CSS file to make it cleaner and not be passing the same CSS code to the browser.  Will sort it.
2)  The mt_rand() function doesn't check that it hasn't supplied that number before and perhaps I should add a routine that looks at images that have been displayed and to inhibit the repeat(s) but it would make the code a bit clunky, I think.  Something like:
- Create an array
In the 'for' loop:
Second loop to:
- Pass through array to see if $random_keys == $myarray()

- If 'yes' then delete $random_keys
- If 'No' then add $random_keys to array
Return to loop......
In reality, if there are more than a few images, it doesn't really notice.
I hope this has been of help. 
Edited by Max
Link to post
Share on other sites



Darn it!  I have just found a much easier way, thanks to your book (Chapter 2):....


Create array of all jpg files on server in the images/activities/activities directory:

$listing = glob("images/activities/activities/*.jpg");
Use 'shuffle() to change the order of the jpg files in the array:
Use 'foreach()' to trawl through the array to extract the filenames:
foreach($listing as $key => $value)
This is a bit of js:
echo '<div class="mySlides fade">
<img src = "' . $value . '" style=" display: block; margin: auto; width:80%;  border-style: solid; border-width: 2px; border-color: black; vertical-align: top;" alt = "Sorry - image missing." />
echo '<div style="text-align:center">
<span class="dot"></span> 
$repeat = 1;
That also solves the issue of repeats.  KISS - keep it simple, STOOPID!
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...