Lightbox-Bildergalerie

[idea-tec]

genaue pfadangabe zu den einzubindenden js-dateien prüfen

[BagHira]

Die Bilder werden nun beim anglicken in einem neuen Fenster geeöfnet.
Leider nicht als "Lightbox"
Was ist zu tun ?

Als kleines Beispiel, ich hab das bei meinem Layout, welches für die Galeie zuständig ist, so gelösst:

Code: Alles auswählen

<?php
$my_host = 'http://'.$_SERVER['HTTP_HOST'].'/cms/';
?>
<script type="text/javascript" src="<?php echo $my_host; ?>js/prototype.js"></script>
<script type="text/javascript" src="<?php echo $my_host; ?>js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo $my_host; ?>js/lightbox.js"></script>
<link rel="stylesheet" href="<?php echo $my_host; ?>css/lightbox.css" type="text/css" media="screen" />

Der Quelltext schaut dann so aus:

Code: Alles auswählen

<script type="text/javascript" src="http://www.handgewickelte-glasperlen.de/cms/js/prototype.js"></script>
<script type="text/javascript" src="http://www.handgewickelte-glasperlen.de/cms/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.handgewickelte-glasperlen.de/cms/js/lightbox.js"></script>
<link rel="stylesheet" href="http://www.handgewickelte-glasperlen.de/cms/css/lightbox.css" type="text/css" media="screen" />

Hoffe das hilft dir weiter

[anjaka]

Hallo,
ich setze dieses Modul in Contenido 4.8.11 ein und kämpfe mit folgendem Problem.

Der Medienname, der ALT-text sowie der TITLE-Text werden bei mir nicht ausgegeben.
Die Bildbeschreibung wird unter dem Bild ausgegeben, sonst aber niorgends.
In den Modultemplates ist alles eingetragen.
Wo könnte das Problem liegen

[BagHira]

Der Medienname, der ALT-text sowie der TITLE-Text werden bei mir nicht ausgegeben.

Poste doch bitte mal deinen Modul-Output und das Template...

[anjaka]

Hier ist der Code.
Habe nichts verändert, meine ich.

Output

Code: Alles auswählen

<?php

cInclude("includes", "functions.api.images.php");

/* Gallery variables */
$bRecursive = false;

/* Input variables customized */
$iWidth_crop = "CMS_VALUE[7]";
$iHeight_crop = "CMS_VALUE[8]";
if ($iWidth_crop == 0) {
  $iWidth_crop = '';
}
if ($iHeight_crop == 0) {
  $iHeight_crop = '';
}
/* Cropping ? */
$iCrop = "CMS_VALUE[9]";

/* Input variables */
$iWidth = "CMS_VALUE[0]";
$iHeight = "CMS_VALUE[1]";
if ($iWidth == 0) {
  $iWidth = 300;
}
if ($iHeight == 0) {
  $iHeight = 300;
}

$iColumns = "CMS_VALUE[2]";
if ($iColumns == 0) {
  $iColumns = 2;
}

$iRows = "CMS_VALUE[3]";
if ($iRows == 0) {
  $iRows = 2;
}

$sPath = "CMS_VALUE[4]";
if ($sPath=='') {
    $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "bildergalerie/";
} else {
    $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[4]";
}

$sort = "CMS_VALUE[5]";
if( $sort == "asc" ) {
    $sort = SORT_ASC;
} else {
    $sort = SORT_DESC;
}

$words = "CMS_VALUE[6]";

if (isset($start)) {
  $iCurrentPage = $start;
} else {
  $iCurrentPage = 1;
}

$aValidExtensions = array("jpg", "jpeg", "gif", "png");

$iImagesPerPage = $iRows * $iColumns;

/* Read all gallery files */
$aGalleryFiles = scanDirectory($sPath, $bRecursive);
array_multisort($aGalleryFiles, $sort, 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]);
        }
    }
    
    /* Calculate effective variables */
    $iFileCount = count($aGalleryFiles);
    $iPages = ceil($iFileCount / $iImagesPerPage);
    
    $aImagesToDisplay = array_slice($aGalleryFiles, ($iCurrentPage - 1) * $iImagesPerPage, $iImagesPerPage);
    
    $oImageTpl = new Template;
    $oGalleryTpl = new Template;
    $oEmptyImageTpl = new Template;
    
    $aRenderedImages = array();
    
    $iRow = 0;
    $iImagesRendered = 0;
    
    foreach ($aImagesToDisplay as $sImageToDisplay) {
        /* Do Scaling */

/* ### Customized - changes by GaMbIt ### */
/* Image scale */
$sScaledImage_cr = cApiImgScale($sImageToDisplay, $iWidth, $iHeight, false, false);
/* path */
$sScaledImage_cr = str_replace($cfgClient[$client]["path"]["htmlpath"],"",$sScaledImage_cr);
/* Image crop */
$sScaledImage = cApiImgScale($sScaledImage_cr, $iWidth_crop, $iHeight_crop, true, true);  
/* path */
$sScaledImage = str_replace($cfgClient[$client]["path"]["htmlpath"],"",$sScaledImage);
/* ### End custom changes by GaMbIt ### */

        
        $link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient['htmlpath'],$sImageToDisplay);
        
        $media_name = ig_getMedienName($sImageToDisplay);
        
        $link_description = ig_getImageDescription($sImageToDisplay);
        
        if ($words != "" || $words != 0) {
            # Cutting text but preserving words and entities
            if(strlen($link_description) > $words){
               $description = htmlentities(capiStrTrimAfterWord($link_description, $words)."...");
            } else {
               $description = "";
            }
        }
        
        if( $media_name != "" && $link_description != "") {
            $link_description = $media_name.': '.$link_description;
        } elseif( $media_name != "" ) {
            $link_description = $link_description;
        } elseif( $description != "" ) {
            $link_description = $link_description;
            $media_name = "&nbsp;"; 
        }
        
        $oImageTpl->reset();
        $oImageTpl->set("s", "FILE", $sScaledImage);
        $oImageTpl->set("s", "WIDTH", $iWidth);
        $oImageTpl->set("s", "HEIGHT", $iHeight);
        $oImageTpl->set("s", "LINK", $link);
        $oImageTpl->set("s", "MEDIANAME", $media_name);
        $oImageTpl->set("s", "DESCRIPTION", $description);
        $oImageTpl->set("s", "LINKDESCRIPTION", $link_description);
        
        $aRenderedImages[] = $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/lightbox-gallery_image.html", true, false);
        
        $iImagesRendered++;
        
        if ($iImagesRendered == $iColumns) {
            $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages));
            $oGalleryTpl->next();
            $iImagesRendered = 0;
            $aRenderedImages = array();
        }
    }
    
    if (count($aRenderedImages) < $iColumns && count($aRenderedImages) > 0) {
        $iEmptyCells = $iColumns - count($aRenderedImages);
        
        $oEmptyImageTpl->set("s", "WIDTH", $iWidth);
        $oEmptyImageTpl->set("s", "HEIGHT", $iHeight);
        
        $sEmptyCells = str_repeat($oEmptyImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/lightbox-gallery_empty.html", true, false),$iEmptyCells);
        
        $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages) . $sEmptyCells);
        $oGalleryTpl->next();
    }
    
    $aLinks = array();
    
    if ($iCurrentPage > 1) {
        $oPreviousTpl = new Template;
        $oPreviousTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage - 1));
        $oPreviousTpl->set("s", "TITLE", mi18n("Zurück"));
        $aLinks[] = $oPreviousTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/lightbox-gallery_link.html", true, false);
    }
    
    if (($iCurrentPage < $iPages) && $iCurrentPage) {
        $oNextTpl = new Template;
        $oNextTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage + 1));
        $oNextTpl->set("s", "TITLE", mi18n("Vor"));
        $aLinks[] = $oNextTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/lightbox-gallery_link.html", true, false);
    }
    
    $oGalleryTpl->set("s", "NAVIGATION", implode("", $aLinks));
    
    $oGalleryTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/lightbox-gallery.html", false, false);
}

function ig_getImageDescription($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).'/';
        $query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE (dirname = '".$dirname."') AND (filename='".$path_parts['basename']."') AND (filetype='".$path_parts['extension']."')";
    }
    $db->query($query);
    if($db->next_record()) {
        return htmlspecialchars(urldecode($db->f("description")));
    } else {
        return '';
    }
}

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 '';
    }
}
?>

lightbox-gallery_image.html

Code: Alles auswählen

<td class="gallery_image">
    <div class="link"><a href="{LINK}" rel="lightbox[Images]" title="{LINKDESCRIPTION}"><img src="{FILE}" title="{MEDIANAME}" alt="{DESCRIPTION}" /></a></div>
    <div class="medianame"><h3>{MEDIANAME}</h3></div>
    <div class="description">{DESCRIPTION}</div>
</td>

[BagHira]

Hab mal geschwind geschaut, aber an dem Code nichts gefunden. Ich weiß aber, das es da mal Probleme gab, nur wo?

Leider kann ich das nicht testen, den bei mir läuft die 4.8.12 und da ist es so das der Medienname nicht gespeichert wird.
Getestet und XAMPP: Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color PHP/5.2.9

Hab ein bisserl gesucht, vielleicht hilft dir das weiter?

http://forum.contenido.org/viewtopic.ph ... 5&p=134302
http://forum.contenido.org/viewtopic.ph ... 7&p=131017

[anjaka]

Was mir aufgefallen ist, ist das in der _upl Tabelle gar kein Feld für den Namen existiert.
Könnte es daran liegen?

Nachtrag:
Sorry,
dafür taucht er in der _upl_meta Tabelle auf.

[BagHira]

dafür taucht er in der _upl_meta Tabelle auf.

Ja, das dürfte es sein. Aber da bin ehrlich gesagt überfragt. Ich weis das es da was gab, find es aber nicht mehr....

[anjaka]

Das ist der Code wo der Mediennamen ausgegeben werden sollte,
doch es wird immer nur das Leerzeichen gesetzt.
Hat jemand eine Idee wie ich die Ausgabe des Mediennamens hinbekomme?

Output

Code: Alles auswählen

        
if( $media_name != "" && $link_description != "") {
            $link_description = $media_name.': '.$link_description;
        } elseif( $media_name != "" ) {
            $link_description = $link_description;
        } elseif( $description != "" ) {
            $link_description = $link_description;
            $media_name = " "; 
        }

[dho]

Hallo zusammen,
ich bin neu hier und nutze auch die lightbox. Vielen Dank an dieser Stelle an die Macher des Moduls!

Ich habe allerdings das Problem, dass unterhalb der Miniatur-Bilder unsichtbare zeilen generiert werden. Je mehr Seiten die Galerie hat um so größer ist der Abstand nach unten.
Klickt man die Seiten weiter, baut sich der Abstand oben auf!? zu sehen auf http://www.fmvev.de/front_content.php?idcat=18&lang=1.
Ich kenne mich nicht so gut aus und habe gehofft dass ihr mir weiter helfen könnt!?
Danke schonmal!!

[Spider IT]

Code: Alles auswählen

        
if( $media_name != "" && $link_description != "") {
            $link_description = $media_name.': '.$link_description;
        } elseif( $media_name != "" ) {
            $link_description = $link_description;
        } elseif( $description != "" ) {
            $link_description = $link_description;
            $media_name = " "; 
        }

Das Problem liegt in der 4. Zeile: In Zeile 3 wird geprüft, ob $media_name gesetzt ist um dann in Zeile 4 $link_description zuzuweisen.
Ersetze die 4. Zeile durch:

Code: Alles auswählen

$link_description = $media_name;

Gruß
René

[Spider IT]

Hallo zusammen,
ich bin neu hier und nutze auch die lightbox. Vielen Dank an dieser Stelle an die Macher des Moduls!

Ich habe allerdings das Problem, dass unterhalb der Miniatur-Bilder unsichtbare zeilen generiert werden. Je mehr Seiten die Galerie hat um so größer ist der Abstand nach unten.
Klickt man die Seiten weiter, baut sich der Abstand oben auf!? zu sehen auf http://www.fmvev.de/front_content.php?idcat=18&lang=1.
Ich kenne mich nicht so gut aus und habe gehofft dass ihr mir weiter helfen könnt!?
Danke schonmal!!

Herzlich willkommen!

Auf der von dir genannten Seite wird (wie es aussieht) die Multiple Lightbox Galery eingesetzt.
Dies ist eine Erweiterung der in diesem Threat behandelten Lightbox Galery, weshalb deine Frage an dieser Stelle falsch ist.
Der Threat für die Multiple Lightbox Galery findest du hier: forum.contenido.org/viewtopic.php?t=24337.

Da du hier neu bist will ich deien Frage trotzdem kurz beantworten:
In dein Stylesheet (contenido_sample.css) ist folgendes eingestellt:

Code: Alles auswählen

td.gallery_image {
    height:30px;
    padding:0;
}

Die Angabe height wirkt sich auf ALLE Tabellenzellen der Multiple Lightbox Galery aus, auch auf denen die nicht gezeigt werden (die Galery kann nur Bilder anzeigen, welche durch Links mit zusammenhängenden Angaben (rel="lightbox[...]) in der Seite vorhanden sind.
In der original Lightbox Galery (diesem Threat) werden nur die Bilder ausgegeben, welche auch gezeigt werden sollen, wodurch die Galery dann (in deinem Beispiel) nur die 12 Bilder zeigen kann. In der Multiple Lightbox Galery werden zusätzliche Zeilen mit Links ohne Inhalt (nicht sichtbar) für die restlichen Bilder des angegebenen Verzeichnisses ausgegeben, wodurch die Galery auch diese zeigen kann ohne dass der Besucher zuvor in der Seite auf [Weiter] klicken muss.
Soweit klar?
Wenn nicht, willkommen im oben genannten Threat

Gruß
René

[dho]

Hallo René,
danke für deine schnelle Antwort. Das stimmt, es ist die multiple galery verbaut (sorry mein Fehler...)
Die Idee war eben die Funktion zu nutzen, dass nicht nur die Bilder der Seite angezeigt werden, sondern alle durchgeklickt werden können.
Ich habe die height auf null gesetzt und jetzt scheint es zu funktionieren.
Vielen Dank nochmal !

Gruß, Flo

[Earthling]

Hi @all

eine Frage zu den Thumbnails.
Auf allen Seiten die ich bis jetzt gesehen habe (Links hier im Thread), ausser unserer eigenen (!), sind die Thumbnails schwarz-weiss und beim MouseOver werden sie erst farbig angezeigt. Habe ich irgendetwas vergessen oder falsch gemacht? Oder, die Frage wurde bereits gestellt, ist der MouseOver effekt gar nicht Teil dieser Bildgalerie und muss separat gemacht werden? Ich denke aber schon dass das ein Teil ist, da ja die Thumbnails automatisch erstellt werden.

[Spider IT]

Der MouseOver Effekt ist nicht Teil der Bildergalerie, zumindest nicht im Standardmodul.
Der von dir gesehene Effekt kann nachträglich einprogrammiert worden sein.

Gruß
René