Search the Community
Showing results for tags 'mt_rand()'.
-
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