websitebaker testseite
Private Testseite WB 2.10.0 (Rev.66)

Droplet microGallery2

erweitert um Einzelbild-Start mit Slideshow



Original-Droplet microGallery und Anleitung by Stefek :
https://forum.websitebaker.org/index.php/topic,17806.msg118063.html#msg118063


Galerie normal

Aufruf:
[microGallery2?folder=Ordner-in-media]

boot-canada wasserfall1-canada canada1 
 

 


microGallery2 wurde um &display=one , &class=   und   &rel=   erweitert.
 
  Zeigt nur 1 Bild.
In der Lightbox (Colorbox) sliden alle Bilder aus dem Ordner.

Aufruf:
[microGallery2?folder=ordner-123&group=gruppe1&display=one&class=cslide]




 


 
boot-canada
Zeigt ebenfalls nur 1 Bild.
In der Lightbox (Fancybox) alle Bilder aus einem anderen Ordner.
Fancybox kann nicht sliden.

Aufruf:
[microGallery2?folder=ordner-xyz&rel=223&display=one&class=fancybox]






 

Optionen

Neue Parameter die dem Dropletaufruf mitgegeben werden können:


&display=one // Einzelbild, im Popup alle Bilder
 
&class= // Je nach Lightbox kann die entsprechende Klasse angegeben werden.
Ohne class wird automatisch class="colorbox" hinzugefügt.
 
&group=irgendwas // Wird automatisch in rel="lightbox[irgendwas]" verwandelt.
Optional, kann weggelassen und stattdessen rel= verwendet werden.
Siehe unten.
 
&rel=cslide // Je nach Lightbox kann die Relation angegeben werden.
Ohne rel=  wird automatisch rel="lightbox{irgendwas]" hinzugefügt.
   
   
   
   

Mehrere Colorbox Slideshows


Um mehrere Corlorbox-Slideshows auf einer Seite verwenden zu können, muss zusätzlich noch ein class="cslide" mit den gleichen Werten wie für rel="cslide" angelegt werden.

Für das Plugin Colorbox, in LibraryAdmin, gehört also dies ins Preset bzw. default.preset des Plugins:

jQuery(".cslide").colorbox({
          slideshow:true,
          slideshowSpeed:4000,
          slideshowAuto:true,
          transition:"elastic",
          speed:500,
          opacity: "0.7",
          maxWidth:"90%",
          maxHeight:"90%",
          previous:"zurück",
          next:"vor",
          close:"schließen",
          current: "Bild {current} von {total}",
          slideshowStart: "Diashow starten",
          slideshowStop: "Diashow anhalten"
    });


Für das Snippet Colorbox gehört dies in die slide.js:
var $slideshow2 = jQuery(".cslide"), timeout;

und weiter unten:
$slideshow2.colorbox({
                    slideshow:true,
                    loop:false,
                    slideshowSpeed: $speed,
                    slideshowAuto:true,
                    transition:"elastic",
                    opacity: "0.7",
                    maxWidth:"90%",
                    maxHeight:"90%",
                    previous:"zurück",
                    next:"vor",
                    close:"schließen",
                    current: "Bild {current} von {total}",
                    slideshowStart: "Diashow starten",
                    slideshowStop: "Diashow anhalten"
});


Zusätzlich noch diese Zeile in der frontend.js erweitern von:
if(jQuery("[rel='cslide']").length)
zu
if(jQuery("[rel='cslide'], .cslide").length)
Wir verwenden Cookies zur Verbesserung der Usability. (Snippet Cookie Permission for WebsiteBaker)