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

 

 

<?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 by Max

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×