CMSGO LIGHTBOX
 ← CMSGO.NET   Hallo   Gallery   Webmaster-Info

Webmaster-Info

cmsgo® LIGHTBOX trägt diesen Namen insofern in irreführender Weise, als es sich um einen Dia-Schaukasten und eine Slideshow handelt.
Die Software präsentiert zwei Konzepte:
  1. Das Definieren von Parametern in einem html-Tag, anstatt des üblichen "mySwipe = new Swipe{}"
  2. Für Slideshows: Das Ändern der img.src anstatt des Auflistens der Bilder im html.
Werfen Sie einen Blick auf den Seitenquelltext der Testdatei fadeshow-test.html. Betreffend nur die Anwendung für multiple Diashows auf Websites: Die vier möglichen Überblend-Effekte finden Sie hier: diashow-website.html

  

Parameter für lightbox und diashow

data-tanja:
  • lightbox und diashow:
  • dir - string, Bilderverzeichnis
  • lightbox:
  • columns - integer, Anzahl Bilder pro Zeile
  • margin - integer, Margin zwischen Bildern in Pixel
  • lightbox und diashow:
  • intme - float, Fadin-Zeit in Sek.
  • shtme - float, Standzeit in Sek.
  • outme - float, Fadeout-Zeit in Sek.
  • effekt - string, Effekt 'fade', 'blend', 'slide', oder 'flash'
  • starti - number, mit dem eine diahow beginnt
Priorität:
  • html Tag class=Tanja data-tanja überschreibt default values defvs{},
  • getvs{} aus querystring überschreibt html data-tanja
const defvs = { dir:'moon',columns:10,margin:1,shtme:5,intme:2,outme:2,effekt:'fade',starti:0 } <div data-tanja="dir:moon,columns:10,margin:1,shtme:5,intme:2,outme:2,effekt:fade,starti:0"></div> const getvs = { dir:'',columns:0,margin:0,t:0,in:0.0,out:0.0,effekt:'',starti:0 }

Hauptdatei lightbox.html

// Javascript settings var imagepath = '../cntt/imgs/demo/'; var snake = true; // "Snake"-like loading // Javascript includes lightbox.js lightboxall.js // html <div class="Tanja" data-tanja="dir:moon,columns:10,margin:1"></div>

 

Beispiel lightbox

Hauptdatei diashow.html

// Javascript settings var imagepath = '../cntt/imgs/demo/'; // Javascript includes diashow.js lightboxall.js // html <div id="Tanja" class="Tanja" data-tanja="dir:moon,shtme:10,intme:2,outme:2,effekt:fade"> <img id="pic"> <!-- img class="pic" OPTIONAL for effekt other than 'fade' --> </div>

 

Beispiel diashow

Hauptdatei diashow-website.html

// Javascript settings var imagepath = '../cntt/imgs/demo/'; // Javascript includes diashow-website.js lightboxall.js // html <div id="Tanja" class="Tanja" data-tanja="dir:moon,shtme:10,intme:2,outme:2,effekt:fade"> <img id="pic"> </div> <div id="Tanja" class="Tanja" data-tanja="dir:chateau,shtme:7,intme:2,outme:2,effekt:fade"> <img id="pic"> </div> ...

 

Beispiel Website-Diashow

h2




Lightbox ist ein Produkt von CMSGO®
CMSGO