Hallo,
wenn man nach wt_gallery und perfectlightbox "googelt", findet man die abenteuerlichsten Beschreibungen, um wt_gallery und Perfect Lightbox oder andere Lightbox-Varianten zu einer Zusammenarbeit zu "überreden" und einige zusätzliche Features einzubauen.
Dabei ist doch alles so einfach 😉
Fangen wir also erstmal mit der einfachsten Variante an:
1. Öffnen einer Bildergalerie aus dem 'list-view-Modus' der wt-gallery als Dia-Show:
### WT_Gallery mit Perfect Lightbox
// Pfad zum List-Template von wt_gallery - evtl. anpassen
plugin.tx_wtgallery_pi1.template.list = typo3conf/ext/wt_gallery/templates/list.html
plugin.tx_wtgallery_pi1 {
list {
image = IMAGE
image {
imageLinkWrap.typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.field = picture
parameter.cObject.file.maxW = 640
parameter.cObject.file.maxH = 480
// Add the "rel" attribute to activate the lightbox effect
ATagParams = rel="lightbox[slideshow]"
}
}
}
}
Die Anweisung ATagParams = rel="lightbox[slideshow]" sorgt dafür, dass beim Anklicken eines beliebigen Bildes die Dia-Show startet.
Weiter geht's mit:
2. Anzeige von Titel oder Exif-Informationen im Lightbox-Popup:
plugin.tx_wtgallery_pi1 {
list {
image = IMAGE
image {
imageLinkWrap.typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.field = picture
parameter.cObject.file.maxW = 640
parameter.cObject.file.maxH = 480
// Add the "rel" attribute to activate the lightbox effect
// and 'title' and 'alt' attributes
ATagParams = rel="lightbox[slideshow]" title="{field:title}" alt="{field:comments}"
ATagParams.insertData = 1
}
}
}
}
Wichtig ist hier die Erweiterung der ATagParams-Anweisung um
title="{field:title}" alt="{field:comments}"
und die zusätzliche Anweisung
ATagParams.insertData = 1
Als kleines "Schmankerl" verpassen wir jetzt noch jedem Vorschau-Bild eine kleine Lupe, um den Anwender darauf aufmerksam zu machen, dass er das Bild auch in einer vergrösserten Darstellung oder - wie in unserem Fall - in einer Dia-Show betrachten kann.
Dazu reicht eine einzige Zeile im TS-Setup und ein paar Zeilen in den CSS-Stylesheets.
3. Thumbnails in wt_gallery mit einer Lupe versehen:
wir fügen in unser TS-Setup folgende Zeile ein:
stdWrap.innerWrap = <div class="lupe-aussen"><div class="lupe-innen"></div></div> |
Anschliessend sollte Euer komplettes Template wie folgt aussehen:
plugin.tx_wtgallery_pi1 {
list {
image = IMAGE
image {
stdWrap.innerWrap = <div class="lupe-aussen"><div class="lupe-innen"></div></div> |
imageLinkWrap.typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.field = picture
parameter.cObject.file.maxW = 640
parameter.cObject.file.maxH = 480
// Add the "rel" attribute to activate the lightbox effect
// and 'title' and 'alt' attributes
ATagParams = rel="lightbox[slideshow]" title="{field:title}" alt="{field:comments}"
ATagParams.insertData = 1
}
}
}
}
Jetzt fehlen nur noch die CSS-Anweisungen:
/**************************************************/
/* Lupensymbol auf klickbare Bilder positionieren */
/**************************************************/
.lupe-aussen {
top: 0px;
clear: both;
position: relative;
}
.lupe-innen {
background: url('Pfad_zum_Lupen_Bild') no-repeat scroll center center transparent;
height: 16px;
width: 16px;
position: absolute;
right: 3px;
top: 5px;
}
Ich hoffe, dass ich damit etwas Klarheit in die teilweise verwirrenden Anleitungen zur Implementierung 'wt_gallery/Perfect Lightbox' gebracht habe.
Das Ganze lässt sich u.a. "live" hier betrachten.
Gruss,
Günter