Randomizing Slideshow Images

[Max 2]

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:....

 

 

<?php

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;">

 

<?php

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">

</div>';

echo '<div style="text-align:center">

<span class="dot"></span> 

</div>';

$repeat = 1;  //Can't remember what this does!!!

}

 

?>

</div>

<br>

 

Now for the js:

<script>

var slideIndex = 0;

showSlides();

 

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";  

    }

    slideIndex++;

    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

}

</script>

 

etc. etc.......

 

COMMENTS:  

 

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. 

 

Regards

 

Max

Edited April 1, 2017 by Max

[Max 2]

STOP PRESS!!

 

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:

shuffle($listing);

 

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." />

</div>';

echo '<div style="text-align:center">

<span class="dot"></span> 

</div>';

$repeat = 1;

}

 

That also solves the issue of repeats.  KISS - keep it simple, STOOPID!

 

Regards

 

Max

[Larry 429]

Whohoo! Kudos for figuring it out and thanks for sharing!