PHP-scripts

Mange hits?

Hits : 139733
Hits dag : 40
Online : 1

Slideshow med PHP (v. 2008-08-23)

Download hele eksemplet som en køreklar fil (skal omdøbes til .php) slideshow.source.phps. [Downloads: 1362]

Om slideshowet

Slideshow-scriptet tager udgangspunkt i at billederne findes i to udgaver: en almindelig udgave samt i en miniatureudgave hvor det oprindelige filnavn er tilføjet _small til sidst. Miniaturene kan f.eks. være 150px bredde.

Slideshowet kan også danne en oversigt af alle billederne i slideshowet som vises under slideshowets hovedvindue. Billederne i oversigten kan klikkes til at vise det pågældende billede i slideshowets hovedvindue. Desuden er det aktuelle billede i slideshowets hovedvindue klikbart så der kan vises den store udgave af billedet - dette kan bringes til at til åbne et nyt vindue.

Slideshowet kan også vise en beskrivelse for hvert billede. Beskrivelserne placeres i en tekstfil med navnet beskrivelser.txt og denne uploades til samme bibliotek som billederne. Beskrivelserne vises kun hvis filen beskrivelser.txt findes. Filen opbygges ved at der for hvert billede skrives en linie med billedets filnavn og beskrivelse semikolonsepareret. Altså kommer filen til at indeholde ligeså mange linier som der er billeder i biblioteket til slideshowet (hverken mere eller mindre vil virke korrekt). Se følgende eksemplificering:

Fil med billedbeskrivelser

Billedmappens indhold

Billed01.jpg
Billed01_small.jpg
Billed02.jpg
Billed02_small.jpg
Billed03.jpg
Billed03_small.jpg

Filen beskrivelser.txt skal da se ud som følgende:

Billed01.jpg; Beskrivelse af billede 1.
Billed02.jpg; Beskrivelse af billede 2.
Billed03.jpg; Beskrivelse af billede 3.

En tekstfil med filnavnene på billederne kan hurtigt dannes vha. en kommandopromt: gå til biblioteket med billederne og skriv dir /b *.jpg > beskrivelser.txt i Windows eller ls *.jpg > beskrivelser.txt i Linux eller OS X.

Kode

Følgende kode kan kopieres og indsættes i en fil som f.eks. navngives »slideshow.php« eller koden kan downloades i en fil øverst på denne side. Husk at læse kommentarer for instruktioner.

slideshow.php

<?php
/**
 * PHP Slideshow
 * Version: 2008-08-23
 * Author:  Christian L. Dünweber
 * Webpage: http://www.dunweber.com/docs/scripts/#slideshow
 * Copyright (C) 2006-2008 Christian L. Dünweber
 * This program is distributed under the GNU General Public License,
 * see <http://www.gnu.org/licenses/gpl.html>.
 */

# Her angives nogle værdier som styrer slideshowet
#   $bibliotek: angiver stien til billederne. Angiv relativ sti. F.eks.
#    "../../billeder/slide".
#    Angiv "." hvis slideshowbillederne ligger i samme bibliotek som denne fil.
#   $miniaturer: sættes til 1 hvis der skal vises miniaturer, 0 hvis ikke.
#   $nyt_vindue: sættes til 1 hvis der skal åbnes et nyt vindue når det aktuelle
#    billede klikkes, 0 hvis ikke.
#   $width_main: angiver bredden af slideshowets hovedvindue og hovedbillede.
#   $miniheight: angiver højden af miniaturebillederne (hvis disse altså vises).
#   $autoslide: angiver om slideshowet skal kunne sættes til at skifte billede
#    automatisk. 1 for ja, 0 for nej.
#   $forsinkelse: angiver forsinkelsen i sekunder mellem billedeskift hvis autoslide
#    er slået til.
$bibliotek "billeder"// Angiv "." hvis denne fil ligger i samme bibliotek som billederne
$miniaturer 1;
$nyt_vindue 1;
$width_main "250px"// Angives i pixel. F.eks "250px"
$miniheight "50px"// Angives i pixel. F.eks "50px"
$autoslide 1;
$forsinkelse 3;
        
/*** Kodestart :: Ændre kun dette hvis du ved hvad du gør! ***/

// Gør variablen $nr der angiver billedenummer tilgængelig når der klikkes frem og
// tilbage samt $auto der styrer den selvkørende del af slideshowet
$nr $_GET["nr"];
$auto $_GET["auto"];

// Åbner biblioteket, looper igennem og opsamler billeder i arrayet $fotos. Her
// benytter vi kun billeder vis filnavn ender med "_small"
if($handle opendir($bibliotek)) {
    while(
false !== ($fil readdir($handle))) {
        if(
$fil != "." && $fil != ".." &&
           
preg_match("/\.(jpg|jpeg|png|gif|tiff|ico)$/i"$fil) &&
           
preg_match("/_small/i"$fil)) {
            
$fotos[] = $fil;
        }
    }
    
closedir($handle);
} else {
    exit(
"Kunne ikke åbne biblioteket: <em>$bibliotek</em>");
}

// Looper igennem $fotos og fjerner "_small" så der kan linkes til den store
// version af billederne
for ($i=0$i<count($fotos); $i++) {
    
$fotos_stor[] = preg_replace("/_small/i"''$fotos[$i]);
}

// Sorterer arrayene med billeder
sort($fotos);
sort($fotos_stor);

// Antal billeder i biblioteket
$antal count($fotos);

// Vis første billede igen når slideshowet har kørt en omgang
if(!$nr || $nr == $antal || $nr $antal) {
    
$nr 0;
}

// Inkrementer for hvert klik på næste-knappen
$naeste $nr 1;

// Sæt det forrige billedes index
if($nr == 0) {
    
$forrige $antal 1;
} else {
    
$forrige $nr 1;
}

// Skal det aktuelle billedes link skal åbne et nyt vindue ($nyt_vindue = 1)
if($nyt_vindue == 1) {
    
$target_blank =  "onclick=\"window.open(this.href,'',".
        
"'width=640,height=480,left=30,top=30,resizable=yes'); return false;\"";
}

// Indlæser filen med beskriveler af de billederne (beskrivelser.txt) hvis denne eksisterer
if(file_exists($bibliotek."/beskrivelser.txt")) {
    
$billedeinfo = array();
    
$billedeinfo file($bibliotek."/beskrivelser.txt");
    
sort($billedeinfo);
    
$beskrivelse explode(";"$billedeinfo[$nr]);
}

// Hvis automatisk skiftende slideshow er slået til (dvs. hvis $autoslide = 1),
// køres slideshowet med en meta-refresh sammen med $naeste-tælleren
if($autoslide == 1) {
    if(
$auto == 1) {
        
$autometa "<meta http-equiv=\"refresh\" content=\"$forsinkelse;".
            
" url=?auto=1&amp;nr=$naeste\" />";
        
$autolink "<p><a href=\"?nr=$nr\">Stop show</a></p>";
    } else {
        
$autometa "";
        
$autolink "<p><a href=\"?auto=1&amp;nr=$nr\">Start show</a></p>";
    }
}

// Opbygger container med miniaturer hvis disse ønskes vist
if($miniaturer == 1) {
    
$mini "<div id=\"slide-mini\">";
    
    for (
$i=0$i<count($fotos); $i++) {
        
$mini .= "<a href=\"?nr=".$i."\" title=\"Klik og vis\">".
            
"<img src=\"$bibliotek/".$fotos[$i]."\" alt=\"Klik og vis\"".
            
" style=\"height:$miniheight;\" /></a>";
    }
    
    
$mini .= "</div>";
}
        
/**
 * HTML udskrives til visning :: Ændre til dit eget, MEN
 * PAS PŅ ikke at ændre i PHP-kodestumperne der styre showet.
 * De starter alle med et dollartegn $ og der er skrevet HTML-
 * kommentarer der fortæller hvad er hvad.
 * Al HTML-koden skal blive stående i denne fil.
*/

print <<<END
<!DOCTYPE html>
<html lang="da-DK">
<head>
    <title>Slideshow med miniaturer</title>
    
    <!-- Her indsættes meta-tagen der genindlæser siden når slideshowet kører selv.
         FJERN IKKE! -->
    
$autometa
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    /**
     * Dette kan evt. indsættes i dit stylesheet og inkluderes på sædvanlig vis.
     */
    #slide-mini {
        text-align: center;
        }
    #slide-mini img {
        border: 1px solid silver;
        margin-right: 3px;
        margin-bottom: 3px;
        }
    .slide-main-img {
        border: 2px solid silver;
        padding: 5px;
        }
    .slide-table {
        margin: auto;
        }
    .slide-table td {
        color: silver;
        font-family: georgia,serif;
        font-size: 13px;
        }
    .slide-table a, .slide-table a:visited {
        color: silver;
        font-family: georgia,serif;
        font-size: 13px;
        }
    .slide-table a:hover {
        color: red;
        }
</style>
</head>
<body>

<h1>Slideshow med miniaturer</h1>

<!-- Her indsættes link til at starte og stoppe slideshowet - FJERN IKKE! -->
$autolink

<!-- Tabel til slideshowets hovedvindue med beskrivelse og frem-/tilbagelinks.
     ÆNDRE IKKE, men styr via CSS! -->
<table class="slide-table" style="width:
$width_main;">
    <tr>
        <td colspan="3" align="center">
$beskrivelse[1]</td>
    </tr>
    <tr>
        <td colspan="3" align="center">
        <a href="
$bibliotek/$fotos_stor[$nr]$target_blank title="Klik og se i stor">
        <img src="
$bibliotek/$fotos_stor[$nr]" class="slide-main-img"
            alt="Klik og se i stor" style="width:
$width_main;" /></a></td>
    </tr>
    <tr>
        <td><a href="?nr=
$forrige">&laquo; Tilbage</a></td>
        <td valign="bottom">(
$naeste af $antal)</td>
        <td align="right"><a href="?nr=
$naeste">Frem &raquo;</a></td>
    </tr>
</table>

<hr />

<!-- Her indsættes miniaturebillederne. FJERN IKKE! -->
$mini

<!-- Dette indsætter blot valideringsmærkaten fra W3C (www.w3.org).
     Kan blot fjernes. -->
<p style="position:absolute;left:15px;bottom:15px;">
    <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"
    style="border:0;" height="31" width="88" /></a>
</p>

</body>
</html>
END;
?>

» Til toppen