Beispiel für Colorbox - eine jQuery lightbox

Zuerst müssen wir die benötigten Dateien der gewünschten Lightbox herunterladen.
Ich habe mich hier für die Colorbox von Jack Moore entschieden. Die benötigten Dateien habe ich auf der folgenden Seite erhalten (Download-Button klicken): http://www.jacklmoore.com/colorbox/

Dann habe ich die Datei "jquery.colorbox-min.js" nach fileadmin/Scripts/jquery.colorbox-min.js, sowei die Datei "colorbox.css" mit dem Image-Verzeichnis aus einem beliebigen "example"-Verzeichnis (hier example4) nach fileadmin/Styles/colorbox.css bzw. fileadmin/Styles/images/ kopiert.

Abschließend müssen die neuen Dateien und das benötigte inlineJS eingebunden, sowie die nicht benötigten Dateien und Scripts entfernt oder angepasst werden. Demo: Klick auf ein Bild!

TS-Setup:

 

page {
includeCSS {
# bis Version 3.0.5
ekko >
# ab Version 3.1.0
lightbox >
colorbox = fileadmin/Styles/colorbox.css
}
includeJSFooter {
# bis Version 3.0.5
ekko >
# ab Version 3.1.0
lightbox >
colorbox = fileadmin/Scripts/jquery.colorbox-min.js
}
}

page.jsFooterInline.5.50 >
page.jsFooterInline.5.50 = TEXT
page.jsFooterInline.5.50.value (
jQuery('a.gallery').colorbox({
maxWidth:'95%',
maxHeight:'95%',
slideshow:true,
current:' {current} / {total}',
opacity:'0.80',
transition:'none',
speed:'550',
slideshowSpeed:'5500',
overlayClose:true,
fixed:false,
escKey:true,
arrowKey:true,
loop:true,
title: function(){
return $(this).children('.img-responsive').attr('title');
},
close:'<span class="glyphicon glyphicon-remove"></span>',
previous:'<span class="glyphicon glyphicon-chevron-left"></span>',
next:'<span class="glyphicon glyphicon-chevron-right"></span>',
slideshowStart:'<span class="glyphicon glyphicon-play"></span>',
slideshowStop:'<span class="glyphicon glyphicon-pause"></span>',
rel: function() { return $(this).data('rel')}
});
)

lib.fluidContent.settings.media.popup >
lib.fluidContent.settings.media.popup {
bodyTag >
wrap = |
width = {$styles.content.textmedia.linkWrap.width}
height = {$styles.content.textmedia.linkWrap.height}
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap >
linkParams.ATagParams.stdWrap.cObject = COA
linkParams.ATagParams.stdWrap.cObject {
10 = TEXT
10.value = class="gallery"
# bis Version 3.0.5
20 = TEXT
20.field = uid
20.noTrimWrap = | data-rel="gallery-|"|
}
}

 

Ab Version 3.1.0

Mit folgender Konstante, kann das "HTML data-* Attribute" neu benannt werden.

TS-Konstante:

 

plugin.t3sbootstrap_configuration.extensions.lightbox.dataAttribute = rel

 

Ausgabebeispiel: data-rel="lightboxGroup-1"

Lightbox mit tx_news

Damit die neue Lightbox auch mit tx_news funktioniert, muss hier die neue Konfiguration ebenfalls eingebunden werden.

TS-Setup:

 

plugin.tx_news.settings.media.popup < lib.fluidContent.settings.media.popup