Bildergallerie

[Jericho]

Da mit die WEBCOMpro Gallerie für umfangreiche Bildersammlungen zu aufwändig war, habe ich eine eigne geschrieben, die ich gerne mit der Welt teilen möchte .

Für diese Gallerie müsst Ihr die Bilder einfach per FTP in einem Ordner in eurem Webspace laden, den Ordner im Script angeben und schon ist die Gallerie fertig...

Zumindest fast
Da ich nicht rausbekommen habe wie ich auf die Bildverkleinerung von WEBCOMpro zugreife, verkleinere ich die Bilder vorab alle mit Photoshop und schiebe sie in einen Ordner klein im Gallerieordner.

PHP-Code:

<?
#Diesen Teil bitte anpassen
$pfad = ""; #Pfad zur Bildergallerie
$anzahl = 3; #Anzahl der Bilder die nebeneinander gezeigt werden
$breite = 100; #Breite der Bilder in der Vorschau
$hoehe = 100; #Höhe der Bilder in der Vorschau

# Ab hier bitte nichts mehr ändern.
$zielordner= WCP_ROOT_PATH . $pfad;
if(!(isset($i))) $i = 1;
if ($hdir = @opendir(WCP_ROOT_PATH . "$pfad/")){
    while ($file_object = readdir($hdir)){
        if (
            (! @is_file(WCP_ROOT_PATH . "$pfad/$file_object"))
            ||
            (! eregi("\.(jpg|jpeg)$", $file_object))
        )
        continue;
        $url = WCP_ROOT_URL . "$pfad/$file_object";
        $urlklein = WCP_ROOT_URL . "$pfad/klein/$file_object";
        #$handle = fopen ("$Kom", "r");
        #$kommentar = fgets($handle);
        #fclose($handle);
        echo("<span style='width:104px; text-align:center; margin:5px; padding:2px; float:left; background-color:#330000; color:white;'>
            <a href=\"" . $url . "\" target=\"_blank\"><img src=\"" . $urlklein."\" width=". $breite." height=". $hoehe . " /></a><br/>
        </span>");
        if ($i == $anzahl) echo"<br clear='all' /><hr style='width:80%'><br/>";
        if ($i < $anzahl) $i++;
        else $i = 1;
    };
    closedir($hdir);
};
?>

Alles ohne Anspruch darauf, das es auch bei euch funktioniert
Ich freue mich über Verbesserungsvorschläge!

[PHeyer]

Diese Galerie erlaubt es, Ordner unterhalb eines Ordners "cmsroot/image" als Galerie auszuwählen. Verwendet wird zudem die JavaScript-Erweiterung Highslide (4.1.4), die sich unter "cmsroot/highslide" befinden muss.

Code:

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css">
<![endif]-->

<script type="text/javascript">
hs.graphicsDir      = "highslide/graphics/";
hs.align            = "center";
hs.transitions      = ["expand", "crossfade"];
hs.fadeInOut        = true;
hs.outlineType      = "glossy-dark";
hs.wrapperClassName = "dark";
hs.captionEval      = "this.img.alt";
hs.numberPosition   = "caption";
hs.useBox           = true;
hs.width            = 600;
hs.height           = 400;
hs.dimmingOpacity   = 0.75;

hs.addSlideshow(
{
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: "fit",
        overlayOptions:
        {
                position: "bottom center",
                opacity: 0.75,
                hideOnMouseOut: true
        },
        thumbstrip:
        {
                position: "above",
                mode: "horizontal",
                relativeTo: "expander"
        }
});
</script>

<style type="text/css">
DIV.highslide-gallery IMG
{
    BACKGROUND-COLOR: #FFFFFF;
    BACKGROUND-IMAGE: url();
    BORDER: 1px solid #000000;
    DISPLAY: inline;
    FLOAT: none;
    LEFT: 0px;
    MARGIN: 0px 10px 10px 0px;
    PADDING: 0px;
    POSITION: relative;
    TOP: 0px;
    VERTICAL-ALIGN: top;
}
</style>

<?php
$base_path        = "image";
$thumbnail_width  = 120;
$thumbnail_height = NULL;

//get folder from document data
$range  = $wcp_template_base_id . "image_folder";
$folder = $wcp_template_document->get($range, "text");

//display folder selection in editing mode
if (WCP_TEMPLATE_EDIT)
{
        //retrieve entries from base path
        if (! $array = scandir(WCP_ROOT_PATH . "$base_path/"))
                return; //path not found

        $list = array(); //folder list

        //process entries
        reset($array);
        while (list(, $value) = each($array))
        {
                if (! is_dir(WCP_ROOT_PATH . "$base_path/$value"))
                        continue; //no directory

                if (preg_match("/^\.{1,2}$/", $value))
                        continue; //no directory

                $list[$value] = TRUE; //add entry to folder list
        };

        //display folder selection
        echo("<form action=\"" . x(WCP_ACTIVE_URL . wcp_param()) . "\" " .
                   "method=\"post\">" .
             "<div>" .
             "<input name=\"range\" " .
                    "type=\"hidden\" " .
                    "value=\"" . x($range) . "\">" .
             "<input name=\"type\" " .
                    "type=\"hidden\" " .
                    "value=\"text\">" .
             "<small>Bildordner auswählen</small><br>" .
             "<strong>" .
             x("/$base_path/") .
             "</strong>&nbsp;");
        select($list, $folder, "value");
        echo("&nbsp;" .
             "<input type=\"submit\" " .
                    "value=\"" . WCP_L_COMMAND_CONFIRM . "\" " .
                    "class=\"button\"><br>" .
             "<small>" .
             "Diese Funktion verwendet die JavaScript-Erweiterung " .
             "<span style=\"FONT-STYLE:italic\">Highslide</span> " .
             "von Torstein Hønsi und ist " .
             "<strong>für den kommerziellen Gebrauch nicht kostenfrei</strong>. " .
             "Besuchen Sie die Website des Herstellers unter " .
             "<a href=\"http://www.highslide.com/\" " .
                "target=\"_blank\">" .
             "www.highslide.com" .
             "</a>, " .
             "um ggf. eine Lizenz zu erwerben." .
             "</small>" .
             "</div>" .
             "</form>");
};

//get folder path
$path = "$base_path/$folder/";

//retrieve entries from folder path
if (! $array = scandir(WCP_ROOT_PATH . $path)) return; //path not found

echo("<div class=\"highslide-gallery\">");

//process entries
reset($array);
while (list(, $value) = each($array))
{
        //check filename extension
        if (! preg_match("/^(.+)\.(?:gif|jpeg|jpg|png)$/i", $value, $_value))
                continue; //no valid file format

        //display thumbnail
        echo("<a href=\"" . x(WCP_ROOT_URL . $path . $value) . "\" " .
                "target=\"_blank\" " .
                "class=\"highslide\" " .
                "onclick=\"return hs.expand(this);\">" .
             image(WCP_ROOT_URL . $path . $value,
                   $thumbnail_width,
                   $thumbnail_height,
                   $_value[1]) .
             "</a>");
};

echo("</div>");
?>

Das Template wird in zukünftigen Versionen standardmässig mitgeliefert.