Lightbox-3D-Gallery

[feuerball-design]

Lightbox-3D-Gallery

Für ein Projekt eines Kunden habe ich ein neues Modul gebastelt und das möchte ich nun öffentlich zugänglich machen. Die Lightbox-3D-Gallery ist eine 3D-Bildergalerie mit Flash und Javascript. Das Modul animiert die Bilder eines Ordners zu einem 3D-Karussell. Dabei werden automatisch Vorschaubilder sowie eine XML-Datei mit den nötigen Einstellungen generiert. Die Originalbilder werden dann, nach Klick auf die Vorschaubilder, durch die beliebte "Lightbox" eingeblendet.

Eine Beispielansicht gibt es hier.

Das Modul ist eine freie Kombination der Module Easy Slideshow V2 von Thomas König (http://www.thom-koenig.de/) und Lightbox-Gallery von Phillip Baumgaertner (http://www.ittool.de). Die Flash-Animation stammt von Dietmar Mitterer-Zublasing (http://www.diewebmaster.it) und im Ursprung von Lee Brimelow (http://www.gotoandlearn.com). Danke für die gute Vorarbeit!

Version: 1.0 (Download unter Contenido-Wiki)
Autor: Florian Bube (http://www.feuerball-design.de)
Erstellt am: 23.04.2009
Last Update: 23.04.2009

Changelog

• ...

Installation:

• Dateien aus dem Ordner "Templates" (lightbox-3d-gallery.html und lightbox-3d-link.html) entweder in den Ordner "Templates" des Mandanten hochladen oder in Contenido unter Style/Modul-Templates anlegen - Beide Dateien sind für die Einbindung der Links zu den Zoom-Bildern verantwortlich. Zudem wird über die erste Datei die Flash-Animation eingebunden.
• Dateien aus dem Ordner "Images" in den Ordner "Images" des Mandanten hochladen - Alle Bilder werden in der Zoom-Ansicht sprich der Lightbox zur Steuerung benötigt.
• JavaScript Dateien aus dem Ordner "js" entweder in den Ordner "js" des Mandanten hochladen oder in Contenido unter Style/Skripeditor anlegen - Alle Dateien bis auf swfobject.js sind für die Effekte der Lightbox verantwortlich. Die Datei swfobject.js wird für die Einbindung der Flash-Animation benötigt.
• Die Datei lightbox.css im Ordner "css" entweder in den Ordner "css" des Mandanten hochladen oder in Contenido unter Style/Styleeditor anlegen - Die Datei lightbox.css ist für das Aussehen der Lightbox-Zoom-Animation verantwortlich und muss nicht angepasst werden. Die Flash-Animation kann bei Bedarf in eigenen Stylesheets formatiert werden.
• In Contenido unter Style/Module die Datei Lightbox-3D-Gallery.xml des Ordners "module" als neues Modul importieren.
• Die Flash-Animation 3dfotogalerie.swf (NICHT 3dfotogalerie.fla !) in Contenido unter Content/Dateiverwaltung in den Basisordner "Upload" laden.
• Ein gewünschtes Template mit dem neuen Modul Lightbox-3D-Gallery ausstatten und im Header des Templates (entweder als zusätzliches Modul oder im Layout) den Inhalt der Datei header.html (im Ordner module) einbinden - Dort werden lightbox.css und sämtliche Javascript-Dateien eingebunden und zusätzliche Funktionen definiert.

Verwendung:

• In der Konfiguration eines Artikels (der das Modul Lightbox-3D-Gallery beinhaltet) können weitere Einstellungen für das Modul vorgenommen werden. Wichtigster Punkt ist das Auswählen des Ordners mit den darzustellenden Bildern. Nach dem Auswählen des Ordners werden mit dem Speichern der Konfiguration des Artikels sämtliche Vorschaubilder aus den Bildern des Ordners in der gewünschten Größe im Cache generiert. Zudem wird eine XML-Datei im jeweiligen Ordner der Bilder erstellt, die alle Informationen für die Flash-Animation beinhaltet. In der Flash-Animation werden die verkleinerten Bilder des Cache dargestellt und erst nach Klicken auf die Bilder werden die Originalbilder des Ordners geöffnet.
• Wenn neue Bilder in den Bilderordner geladen wurden werden diese erst in der Flash-Animation angezeigt, wenn die Konfiguration des Artikels neu aufgerufen wird. Erst dadurch wird die XML-Datei im Ordner aktualisiert.
• Wenn die Bilder des Ordners Mediennamen besitzten werden diese als Tooltip in der Animation dargestellt. Die Bildbeschreibung wird sofern vorhanden zusammen mit dem Mediennamen in der Lightbox dargestellt.
• Für Freunde des gepflegten Actionscripts findet sich im Ordner "upload" die Datei 3dfotogalerie.fla die mit Flash weiter bearbeitet werden kann.

Anmerkung:
Das ist das erste Modul, das ich veröffentliche und deshalb war mir bislang nicht bewusst was das für eine Arbeit ist. Deshalb großen Respekt an alle, die sich hier regelmäßig engagieren und Module veröffentlichen. Danke!

Schöne Grüße
Florian

[idea-tec]

Super modul, Respekt...
Nur 1 Frage: Ist das Beispiel auf deiner Seite ein Spiel: "Fang das Bild"? Ich finds zu aufgeregt, muss mir dann mal die Geschwindigkeitssteuerung ansehen.

[racketeer]

Ja Super, Klasse Modul,

Nur leider dreht es sich irgendwann ein wenig zu schnell und schön wäre es wenn es sich aus einem Ordner eine definierte Anzahl von Bildern rausnimmt,

ich habe ihm ein Ordner mit ca 700 Bildern zugewiesen und dementsprechend langsam ist es im aufbau, schön wäre es wenn man sagen könnte "nimm aus dem Ordner X anzahl Bilder"

Ansonnten Tolle Arbeit und RESPEKT!!!

Gruß aus Berlin
Frank

[idea-tec]

du hast doch die fla-datei!!!
programmier es da einfach rein... verändere die geschwindigkeit und sag ihm er soll nur x bilder laden, bzw. es gibt auch die möglichkeit zu sagen: lade mir die bilder so und so sortiert, zunächst 10 und lade dann alle anderen nach

[racketeer]

Abgesehen davon das ich von Flash nicht wirlich viel verstehe, würde ich es ja gerne versuchen... aber allerdings mit Macromedia Flash MX und Macromedia Flash Pro 8 geht die .fla Datei nicht auf, "Unbekanntes Dateiformat"

Und nun?

[idea-tec]

da müssen wir mal feuerball-design befragen.
ich selbst habe es nicht im einsatz und aktuell keinen bedarf, sorry.
wenn überhaupt, dann gegen ende nächster woche wo ich dann mal selbst detailliert schauen kann

[racketeer]

Schaun wa mal,

Danke erstmal, wenn ich was rausfinde sage ich bescheid.

schönes langes Wochenende wünsche ich

Grüße
Frank

[racketeer]

So, für alle die es mögen ich habe ein wenig gebastelt und probiert (im wahrsten Sinne des Wortes) und mit einem etwas abgewandeltem Output und einer neuen .swf könnt Ihr nun die Endgeschwindigkeit Eures Karussels einstellen

Hier das veränderte Output:

Code: Alles auswählen

?><?php

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     Lightbox-3D-Gallery
* Author(s)   :     Florian Bube (www.feuerball-design.de),
            freie Kombination der Module "Easy Slideshow V2" von Thomas König
            und dem Modul "Lightbox-Gallery" von Phillip Baumgaertner (www.ittool.de)

                    SWF-File 3DFotogalerie.swf  
                    basiert auf karussell-v2.1.swf von Dietmar Mitterer-Zublasing 
                    und im Ursprung von Lee Brimelow (www.gotoandlearn.com)
* Created     :     23.04.2009
************************************************/

#Um die Bilder zu Skalieren
cInclude("includes", "functions.api.images.php");

#Selected img directory
$cms_dirname = "CMS_VALUE[1]";
if ($cms_dirname == '') {
    $sPath = '';
} else {
    $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[1]";
}

#Flash-Width
if ("CMS_VALUE[2]" != '') {
    $flash_width = "CMS_VALUE[2]";
} else {
    $flash_width = '300';
}

#Flash-Height
if ("CMS_VALUE[3]" != '') {
    $flash_height = "CMS_VALUE[3]";
} else {
    $flash_height = '200';
}

#Karussell-Radius-Width
if ("CMS_VALUE[4]" != '') {
    $radius_width = "CMS_VALUE[4]";
} else {
    $radius_width = '100';
}

#Karussell-Radius-Height
if ("CMS_VALUE[5]" != '') {
    $radius_height = "CMS_VALUE[5]";
} else {
    $radius_height = '100';
}

#Perspektive des Karussells
if ("CMS_VALUE[6]" != '') {
    $flash_perspective = "CMS_VALUE[6]";
} else {
    $flash_perspective = '200';
}

#Anfangsgeschwindigkeit des Karussells
if ("CMS_VALUE[7]" != '') {
    $flash_speed = "CMS_VALUE[7]";
} else {
    $flash_speed = '0.01';
}

#Endgeschwindigkeit des Karussells
if ("CMS_VALUE[71]" != '') {
    $flash_endspeed = "CMS_VALUE[71]";
} else {
    $flash_endspeed = '0.05';
}
#Tooltip-Hintergrundfarbe
if ("CMS_VALUE[10]" != '') {
    $flash_color = "CMS_VALUE[10]";
} else {
    $flash_color = '#000000';
}

#Pic-Width
if ("CMS_VALUE[8]" != '') {
    $pic_width = "CMS_VALUE[8]";
} else {
    $pic_width = '100';
}

#Pic-Height
if ("CMS_VALUE[9]" != '') {
    $pic_height = "CMS_VALUE[9]";
} else {
    $pic_height = '100';
}

if ($cms_dirname == '' || $cms_dirname == '0') {
    $cms_dirname = '0';
}

#Get paths
$sql = "SELECT
    htmlpath, frontendpath
    FROM
    ".$cfg["tab"]["clients"]." 
    WHERE
    idclient = ".$client." ";

$db->query($sql);

if ($db->next_record()) {
    $htmlpath = $db->f('htmlpath');
    $frontendpath = $db->f('frontendpath');
}

#Enter Settings
echo '<table cellpadding="0" cellspacing="0" border="0">';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Breite x H&ouml;he (Flash)").':</td><td><input type="text" name="CMS_VAR[2]" value="'.$flash_width.'" size="3" > x <input type="text" name="CMS_VAR[3]" value="'.$flash_height.'" size="3" > Pixel</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Breite x H&ouml;he (Radius Karussell)").':</td><td><input type="text" name="CMS_VAR[4]" value="'.$radius_width.'" size="3" > x <input type="text" name="CMS_VAR[5]" value="'.$radius_height.'" size="3" > %</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Perspektive des Karussells").':</td><td><input type="text" name="CMS_VAR[6]" value="'.$flash_perspective.'" size="5" > (Von 0 bis Unendlich)</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Anfangsgeschwindigkeit").':</td><td><input type="text" name="CMS_VAR[7]" value="'.$flash_speed.'" size="5" > (Von 0.001 bis 1)</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Endgeschwindigkeit").':</td><td><input type="text" name="CMS_VAR[71]" value="'.$flash_endspeed.'" size="5" > (Von 0.001 bis 1)</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Tooltip-Hintergrundfarbwert").':</td><td><input type="text" name="CMS_VAR[10]" value="'.$flash_color.'" size="7" > (z.B. #000000)</td></tr>';
echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("max. Breite und H&ouml;he (Bilder)").':</td><td><input type="text" name="CMS_VAR[8]" value="'.$pic_width.'" size="3" > und <input type="text" name="CMS_VAR[9]" value="'.$pic_height.'" size="3" > Pixel</td></tr>';

echo '<tr><td class="text_medium" style="padding:5px">'.mi18n("Bildverzeichnis w&auml;hlen").': </td><td class="text_medium" style="padding:5px">';
echo '<select name="CMS_VAR[1]" style="width:200px">';

#Get upload directories
$sql = "SELECT DISTINCT
    dirname
    FROM
    ".$cfg["tab"]["upl"]."
    WHERE
    idclient='$client' AND
    filetype IN ('jpeg','jpg')
    ORDER BY
    dirname";

$db->query($sql);

$selected = false;
while ($db->next_record()) {
    $dirname = $db->f('dirname');
    if ($cms_dirname != $dirname) {
        echo '<option value="'.$dirname.'">&nbsp;'.$dirname.'</option>';
    } else {
        $selected = true;
        echo '<option value="'.$dirname.'" selected="selected">&nbsp;'.$dirname.'</option>';
    }
}

if (!$selected) {
    echo '<option value="0" selected="selected">'.i18n("Bitte w&auml;hlen").'</option>';
} else {
    echo '<option value="0">'.i18n("Bitte w&auml;hlen").'</option>';
}
echo '</select>&nbsp;<input type="image" src="images/submit.gif">';

echo '<p>'.mi18n("Pfad").': '.$cms_dirname.'</p>';  

#get uploaded JPGs from directory and create XML File
if ($cms_dirname != '0') {
    #xmlstring ist der Inhalt der XML-Datei
    $xmlstring = '<?xml version="1.0" encoding="utf-8"?>'."\n";
    $xmlstring = $xmlstring."<gallery>\n";
    $xmlstring = $xmlstring."<icons>\n";
    
    #Get uploaded files
    $aValidExtensions = array("jpg", "jpeg"); // Gif und PNG erstmal raus - , "gif", "png"

    /* Read all gallery files */
    $aGalleryFiles = scanDirectory($sPath, false);
    array_multisort($aGalleryFiles, SORT_ASC, SORT_STRING);

    if (is_array($aGalleryFiles)) {
        /* Filter out non-images */
        foreach ($aGalleryFiles as $key => $aGalleryFile) {
        $sExtension = strtolower(getFileExtension($aGalleryFile));
        if (!in_array($sExtension, $aValidExtensions)) {
            unset($aGalleryFiles[$key]);
        }
        }

        $oImageTpl = new Template;
        $oGalleryTpl = new Template;
        $oEmptyImageTpl = new Template;

        $aRenderedImages = array();

        $ix = 0;

        foreach ($aGalleryFiles as $sImageToDisplay) { 

        //Bilder passend verkleinern
        $sScaledImage = cApiImgScale($sImageToDisplay, $pic_width, $pic_height);
        $sScaledImage = str_replace($cfgClient[$client]["path"]["htmlpath"],"",$sScaledImage);

        $media_name = ig_getMedienName($sImageToDisplay);

        $xmlstring=$xmlstring.'<icon image="'.$sScaledImage.'" ';
        if ($media_name == '' || $media_name == '0') {
        } else {
            $xmlstring = $xmlstring.'tooltip="'.$media_name.'"';
        }        
        $xmlstring = $xmlstring.'href="javascript:aclick(\'zoom'.$ix.'\')" ziel="_self" />'."\n";
        $ix++;
        }
        $xmlstring = $xmlstring."</icons>\n";
        $xmlstring = $xmlstring."<options>\n";
        $xmlstring = $xmlstring.'<einst radiusx="'.$radius_width.'" />'."\n";
        $xmlstring = $xmlstring.'<einst radiusy="'.$radius_height.'" />'."\n";
        $xmlstring = $xmlstring.'<einst perspektive="'.$flash_perspective.'" />'."\n";
        $xmlstring = $xmlstring.'<einst geschwindigkeit="'.$flash_speed.'" />'."\n";
        $xmlstring = $xmlstring.'<einst geschwindigmausover="'.$flash_endspeed.'" />'."\n";
        $xmlstring = $xmlstring.'<einst farbe="'.$flash_color.'" />'."\n";
        $xmlstring = $xmlstring."</options>\n";
        $xmlstring = $xmlstring."</gallery>\n";


        $xmlpfad = $frontendpath.'upload/'.$cms_dirname."bildergalerie.xml";

        # Copy SWF-File from upload into Image-Directory
        /*
        if (!copy($frontendpath.'upload/easy_slideshow_v2.swf', $frontendpath.'upload/'.$cms_dirname.'easy_slideshow_v2.swf')) {
            print ("Konnte SWF-Datei nicht kopieren<br>\n");
        }
        */

        # Write XML-File for frontend
        if (!$handle = fopen($xmlpfad, "w")) {
             print "Kann die Datei $xmlpfad nicht öffnen";
             exit;
            }

        // Write XML-String to File
        if (!fwrite($handle, $xmlstring)) {
            print "Kann in die Datei $xmlpfad nicht schreiben";
            exit;
        }

        print "<p>XML für Frontend neu geschrieben</p>\n";

        fclose($handle);
    }
}

echo '</td></tr>';
echo '</table>';

function ig_getMedienName($idupl) {
    
    global $cfg, $cfgClient, $db, $client, $lang;
    
    $cApiClient = new cApiClient($client);
    $language_separator = $cApiClient->getProperty('language','separator');
    if ($language_separator == "") {
        //Sanity, if module used in client without set client setting
        $language_separator = "§§§";
        $cApiClient->setProperty('language','separator', $language_separator);
    }
    if( is_numeric($idupl) ) {
        //ID is a number
        $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE idupl = ".$idupl;
    } else {
        //ID is a string
        $path_parts = pathinfo($idupl);
        $upload = $cfgClient[$client]['upl']['frontendpath'];
        $len = strlen($upload);
        $pos = strpos($idupl,$upload);
        $dirname = substr($path_parts['dirname'],$pos+$len).'/';
        $danis = $dirname.$path_parts['basename'];
        $query = "SELECT value FROM ".$cfg["tab"]["properties"]." WHERE itemid = '".$dirname.$path_parts['basename']."' AND name = 'medianame'";
    }
    $db->query($query);
    if( $db->next_record() ) {
        return htmlspecialchars(urldecode($db->f("value")));
    } else {
        return '';
    }
}
?><?php

Und hier im Dateianhang findet Ihr die veränderte 3dfotogalerie.swf (gepackt)

Viel Spass dabei

Grüße aus Berlin

[Alex_1337]

Super Model! Respekt!

Danke auch @racketeer für die Anpassung.

Ich würde mir jetzt nur noch wünschen, die Bilderanzahl einstellen zu können, die vorrausgeladen werden, wie weiter oben schon geschrieben.. dann wärs perfekt!

gruß

[buttx]

Hi Florian,

echt super arbeit
Wir sind echt sehr zufrieden mit dem Modul.

Zu sehen ist es hier http://www.fahrzeug-yachtaufbereitung.de

LG
Katja

[DiMiZu]

Hallo Florian,

da wollte ich mich heute an eine Umsetzung meines Flash Karussells als Contenido Modul ran setzten; zum Glück habe ich zuerst im Contenido Forum gesucht. Sie da, jemand hat mir die Arbeit schon vollständig abgenommen. Super! Danke dir

Da bleibt mir nur die Arbeit einen Link zu diesen Post zu setzten. Das ging ja schnell...

Grüße
Dietmar

[MakD42]

Hy ersteinmal,

vielen Dank für das Modul. Bekomme aber ums den Tooltip nich angezeigt!
Weß Du vielleicht rat?

... und das mit der Geschwingigkeit geht auch nicht. Habe den modifizierten Input übernommen und die neue SWF-Datei hochgeladen aber wenn ich mit der Maus drauf gehe bleibt das Karusel einfach stehen!

Danke scho-ma

[racketeer]

Hallo MakD42

Erstmal, nicht der Input ist modifizert, sondern der Output.
Ich habe mich mit dem Modul sowie mit Contenido die letzten 18Monate nicht beschäftigt, jedoch, wenn man die Lightbox-3D-Galerie so einbaut, den Output verändert und die swf Datei hochlädt sollte es klappen.

Mögliche Ursachen wenn es nicht klappt könnte sein, die Lightbox-3D-Galerie hat eine andere Version als die von der wir damals gesprochen haben, und oder die Contenidoversion die Du benutzt unterstützt das ganz nicht mehr so.

Wen ich mich richtig erinnere, sollte das Karrussel auch stehenbleiben wenn man mit der Maus auf ein Bild geht?!

Grüße
Frank

[MakD42]

So habs hinbekommen mit der Geschwindigkeit.
Man sollte wenn man den Ziffernblock verwendet nicht einen Punk durch ein Komma ersetzten

Jetzt gehts an den Tooltipp. Habe ne Farbe eingestellt und jedem Bild einen Mediennamen verpasst.
Wird ums verplatzen nicht gezeigt. Nich IE noch FiFo!

(habe in cont. 4.8.11 die Version Lightbox 2.4 mit neuer swf und Moduloutput Datei)

Weiß nisch meeer weider