Simpele JavaScript SlideShow met PHP Rotator

2 jaar geleden -- Reacties 7 - Hits 4449

Boven aan deze pagina kun je de Simpele JavaScript SlideShow met PHP Rotator zien zoals ik die gebruik op TrapperDesign.com. Van de week kreeg ik de vraag of iemand deze mocht gebruiken voor zijn eigen site. Hier heb ik geen problemen mee en heb toen gelijk besloten om de code online te zetten voor iedereen die het wil gebruiken.

Door een PHP Rotator Function toe te voegen heb ik ervoor gezorgd dat de Slideshow altijd begint met een nieuwe afbeelding zodra de pagina opnieuw geladen wordt. Dit omdat ik het jammer vond als de SlideShow altijd hetzelfde rijtje afbeeldingen van begin tot eind afdraait.

De code is makkelijk aan te passen en in elke gewenste website in te voegen. Bij gebruik wordt een link naar www.trapperdesign.com op prijs gesteld. Hieronder zal ik de benodigde bestanden plaatsen voorzien van uitgebreid commentaar zodat alle stappen duidelijk zijn. Voor de te downloaden .zip bestand ga naar: slideshow.zip

Voor het gemak heb ik een PHP pagina gemaakt waarin ik de SlideShow heb verwerkt. Deze pagina heb ik test_slideshow.php genoemd.

test_slideshow.php

<html>
<head>
<title>Simpele JavaScript SlideShow met PHP Rotator</title> 
<meta name="author" content="Steven Groothuismink -- www.trapperdesign.com">
<meta name="web_author" content="Steven Groothuismink -- www.trapperdesign.com">
<meta name="copyright" content="Steven Groothuismink -- www.trapperdesign.com">
<script type="text/javascript" src="images.php"></script>
<script type="text/javascript" src="slideshow.js"></script>
<style type="text/css">
html{
margin:0;
padding:0
}
 
body{
font-size:62.5%;
font-family: Tahoma, sans-serif;
line-height:1.88889;
color:#FFFFFF;
background:#E1E1E1;
margin:0;
padding:0;
}
 
p{
font-size: 1.3em;
text-align:justify;
padding: 2px;
}
 
h1{
font:bold 1.6em georgia,sans-serif;
letter-spacing:1px;
margin-bottom:0;
color:#FFFFFF
}
 
img{
border: solid #FFFFFF 6px;
}
 
a{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
 
a:hover{
text-decoration:none;
color:#C3C3C3;
}
 
.container {
background: #3C3C3C;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
margin-bottom: 30px;
width:700px;
border: solid #000000 3px;
padding:0px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Simpele JavaScript SlideShow met PHP Rotator</h1>
 
require_once 'rotator.php';
echo '().'" alt="SlideShow" />';
?>
<p>Hierboven kun je de Simpele JavaScript SlideShow met PHP Rotator zien die ik ook gebruik op TrapperDesign.com</p>
<p>Door een PHP Rotator Function toe te voegen heb ik ervoor gezorgd dat de Slideshow altijd begint met een nieuwe afbeelding zodra de pagina opnieuw geladen wordt. Dit omdat ik het jammer vond als de SlideShow altijd hetzelfde rijtje afbeeldingen van begin tot eind afdraait.</p>
<p>De code is makkelijk aan te passen en in elke gewenste website in te voegen. Bij gebruik wordt een link naar www.trapperdesign.com op prijs gesteld. Veel plezier ermee!</p>
<p>Steven Groothuismink -- <a href="http://www.trapperdesign.com" title="www.trapperdesign.com">www.trapperdesign.com</a></p>
</div>
</body>
</html>

Zoals je in de code kan zien worden er nog drie pagina's aangeroepen. Namelijk: rotator.php, images.php en slideshow.js Deze pagina's heb je allemaal nodig om de SlideShow goed werkend te krijgen. Ik heb alle bestanden in dezelfde folder staan op de server. Mocht je dit anders willen dan moet je er voor zorgen dat de verwijzingen kloppen met de locaties van de bestanden. De afbeeldingen die ik gebruik in dit voorbeeld heb ik in het mapje /images gezet.

En dan nu Rotator.php Dit is de PHP code die ik gebruik voor de function Rotator(). Deze functie zorgt ervoor dat elke keer dat de pagina opnieuw geladen wordt een andere foto zichtbaar is.

rotator.php


// SCRIPT GESCHREVEN DOOR STEVEN GROOTHUISMINK
// VOOR INFORMATIE NEEM CONTACT OP VIA TRAPPERDESIGN.COM
// BIJ GEBRUIK VAN DIT SCRIPT WORDT EEN LINK NAAR WWW.TRAPPERDESIGN.COM GEWAARDEERD
// ENJOY! STEVEN GROOTHUISMINK, -- WWW.TRAPPERDESIGN.COM -- 2009
 
// Begin de function Rotator().
function Rotator(){
 
// Maak de Array aan
$array = array();
 
// Open de folder waar de afbeeldingen in staan.
// In dit geval is dat de map images.
if ($handle = opendir('images/')) {
while (false !== ($file = readdir($handle))) { 
if ($file != "." && $file != "..") { 
$extension = strtolower(end(explode('.', $file)));
 
// Zorg ervoor dat alleen bestanden met de volgende extensies in een array gezet worden: .jpg, .jpeg, .png, .gif
if ($extension == 'jpg' || $extension == 'jpeg' || $extension == 'png' || $extension == 'gif'){
$array[] = $file;
}}}
 
//Tel het aantal afbeeldingen in de array
$images = $array;
$numimg = count( $images );
 
//Zet de random functie in werking
$num = 0;
if ($numimg > 1) {
    $numimg--;
	mt_srand( (double) microtime()*1000000 );
	$num = mt_rand( 0, $numimg );
}
 
//Begin met de uiteindelijke functie
if ($numimg){
$image = $images[$num];
 
// Geef de uitgekozen afbeelding weer.
return $image;
}
 
// Sluit de folder
closedir($handle); 
}
}
?>

Nu de afbeeldingen willekeurig geladen worden bij opnieuw laden van de pagina is het tijd voor de daadwerkelijke SlideShow. Als eerste maak ik gebruik van een PHP script dat de afbeeldingen uit de images map haalt en in een array() (lijst) plaatst. Dit doe ik met het script images.php

images.php


// SCRIPT GESCHREVEN DOOR STEVEN GROOTHUISMINK
// VOOR INFORMATIE NEEM CONTACT OP VIA TRAPPERDESIGN.COM
// BIJ GEBRUIK VAN DIT SCRIPT WORDT EEN LINK NAAR WWW.TRAPPERDESIGN.COM GEWAARDEERD
// ENJOY! STEVEN GROOTHUISMINK, -- WWW.TRAPPERDESIGN.COM -- 2009
 
// Verstuur de header waarin deze PHP pagina als JavaScript wordt verzonden
Header("content-type: application/x-javascript");
 
// Start de function slideshow().
// Vul achter $dirname de map in waar de afbeeldingen in staan die je wilt uitlezen.
function slideshow($dirname="images/") {
 
// Lees alleen afbeeldingen uit met de extensie .jpg, .jpeg, .png of .gif
// Je kunt hier altijd extensies toevoegen of verwijderen.
$image="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; 
 
// Zet de afbeeldingen in een array. Hier hoef je niets aan te passen.
$images = array();
$imgnr=0;
if($action = opendir($dirname)) {
while(false !== ($img = readdir($action))){
if(eregi($image, $img)){ 
echo 'gallery['.$imgnr.']="'.$img .'";';
$imgnr++;
}
}
 
// Sluit de map met afbeeldingen.
closedir($action);
}
 
// Bied de lijst met afbeeldingen aan.
return($images);
}
 
// Zet de lijst in een variabele zodat slideshow.js de lijst kan weergeven in een SlideShow.
echo 'var gallery=new Array();'; 
slideshow() 
?>

Nu we de afbeeldingen in een bruikbare lijst hebben geplaatst roepen we nu de JavaScript aan die de afbeeldingen 1 voor 1 laat zien in de SlideShow. Dit doe ik met slideshow.js

slideshow.js

// SCRIPT GESCHREVEN DOOR STEVEN GROOTHUISMINK
// VOOR INFORMATIE NEEM CONTACT OP VIA TRAPPERDESIGN.COM
// BIJ GEBRUIK VAN DIT SCRIPT WORDT EEN LINK NAAR WWW.TRAPPERDESIGN.COM GEWAARDEERD
// ENJOY! STEVEN GROOTHUISMINK, -- WWW.TRAPPERDESIGN.COM -- 2009
 
// Begin door de variabele in te stellen op 0
var image=0
 
// Begin de Function slide(). Dit is de functie de de Array() van images.php omzet naar een SlideShow
function slide(){
 
// getElementById verwijst naar de img id van de image waar de SlideShow begint.
// In dit geval is de img id slideshow op de pagina test_slideshow.php
// setAttribute verwijst naar de locatie waar de afbeeldingen zich bevinden. 
// In dit geval is dat de images map
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[image])
image=(image<gallery.length-1)? image+1 : 0
}
window.onload=function(){
 
// Hier kun je de tijd instellen dat tussen 2 afbeeldingen zit tijdens de SlideShow.
// Ik heb de tijd (in mil. sec.) hier ingesteld op 3000. 
// Bijv. bij 1000 gaat hij sneller lopen en bij 10000 een stuk langzamer.
setInterval("slide()", 3000)
}

Dat is alles. Ik hoop dat mijn toegevoegde commentaar genoeg is om het begrijpbaar te maken. Laat me weten wat je van deze uitleg en de scripts vindt! Heb je een mooi voorbeeld van hoe je dit script gebruikt dan hoor ik het graag en plaats ik het hierbij.

Veel plezier ermee

Home | Web | Category | Tags | Top Geplaatst onder: Websites . Tutorials . Downloads .
Tags: PHP . Scripts . JavaScript . SlideShow .

Reacties op: Simpele JavaScript SlideShow met PHP Rotator

9 maanden geleden
valerie Ik krijg enkel een error dat gallery niet gedefinieerd is. Heb nochtans gewoon de inhoud van de zip gekopieerd en niets aangepast...
1 jaar geleden
Steven Hi Bookish,

Ik heb niet zo n scriptje liggen. Zal er eens naar kijken of ik iets kan bedenken. Misschien dat ik binnenkort wat online heb staan.

Groet Steven
1 jaar geleden
Bookish Helemaal top!!
Ik heb een soort gelijke op mijn site staan alleen nu zoek ik er een waar je links en rechts op het plaatje een pijltje hebt waarmee je zelf de rotatie bepaald dmv. te clicken! Dus links op het pijltje kliken en je krijgt de volgende..

Toevallig daar ook een scriptje voor???
Ben al zelf aan het schrijven maar kom er niet uit.
2 jaar geleden
gerda Het werkt wel! Sorry.
Op mijn wamp server niet maar op een ander host wel. Misschien kunt u aangeven wat de systeemeisen zijn zodat het op mijn wamp server ook werkt. Alvast bedankt
2 jaar geleden
gerda leuk script maar bij mij geeft het script alleen een ander beeld als ik refresh in de browser!
Ik heb de tijd ook al verandert in het script maar helaas. Hoe los ik dit op?
2 jaar geleden
Nick Hallo,
Mooie scripts. Ik zie ook mogelijkheden om het Rotator script los in te zetten.
Bedankt voor de duidelijke uitleg!
Groet Nick
2 jaar geleden
Steven Groothuismink Zag zonet dat de link naar mijn slideshow.zip bestand niet werkte. Nu opgelost en dus te downloaden uit bovenstaande tekst.

Groet Steven