SlideShow Widget

Combinato con il Modal Widget permette la creazione di un oggetto multifunzione utilizzabile come slideshow, gallery o lightbox

// API dBJs-ui  

Davide Bausach /

Options and settings:
      - data-ssTime : tempo della transizione in ms (default 3000)
      - data-ssPos : slide di partenza (default 1)
      - data-ssHeight : altezza fissa dello slideshow in px
      - data-ssNav : navigazione next e prev (default off)
      - data-ssDot : navigazione dot (default off)
      - data-ssAnim : tipo animazione (default animOff)
      - data-ssPlay : slideshow in play al caricamento (default off)
      - data-ssCont : controlli play/pause (default off)
      - data-ssThumb : navigazione con thumbnail (default off)
      - data-ssHide : slideshow nascosto (default off)
      - data-ModalGallery : id modal per lightbox (default off)
      -data-ssInSlideshow : settaggio in "on" per slideshow in una modal 

Standard sintax

    <div class="slideshowContainer">
      <div class="slideshow" data-ssTime="3000" data-ssPos="1" data-ssHeight="0" data-ssNav="off" data-ssAnim="animOff" data-ssDot="off" data-ssPlay="off" data-ssCont="off" data-ssThumb="off" data-ssHide="off" data-ssModalGallery="off">
        <div class="slide"><img src="img/slide_01.jpg" alt="slide-1" /></div>
        <div class="slide"><img src="img/slide_02.jpg" alt="slide-2" /></div>
        <div class="slide"><img src="img/slide_03.jpg" alt="slide-3" /></div>
      </div>
    </div>

Nel seguente esempio è mostrato il widget SlideShow con tutti i controlli di navigazione attivi, con un tempo di transizione di 2500 millisecondi, con un aposizione di partenza dalla slide numero 2 e con un un'anumazione Fade tra un passaggio e l'altro (per ora ` disponibile solo tale animazione).

Example 1
slide-1
slide-2
slide-3
    <div class="slideshowContainer">
      <div class="slideshow" data-ssTime="2500" data-ssPos="2" data-ssNav="on" data-ssAnim="ssFade" data-ssDot="on" data-ssPlay="on" data-ssCont="on" data-ssThumb="on">
        <div class="slide"><img src="img/slide_01.jpg" alt="slide-1" /></div>
        <div class="slide"><img src="img/slide_02.jpg" alt="slide-2" /></div>
        <div class="slide"><img src="img/slide_03.jpg" alt="slide-3" /></div>
      </div>
    </div>

In questo secondo esempio il widget SlideShow viene usato come una gallery con l'apertura di una lightbox al click su unda delle thumbnail.
Per fare ci&ogarve; è necessario combinare il widget SlideShow con il widget Modal: si deve creare una SlideShow normale e se si vuole che la visualizzazione delle slide sia nascosta e si vedano solo le thumbnail si dovrà impostare la proprietà data-ssHide al valore on, bosogna poi collocare una Modal normale, nel codice del docuemnto stesso, contenente un div con classe slideshow e le proprietà tipiche del widget SlideShow che si desiderano, ma vuoto; inoltre bisogna settare per quest'ultimo SlideShow la proprietà data-ssInSlideshow al valore on per indicare al sistema che si tratta di un oggetto Slideshow che non dovrà essere inizializzato all'onload del documento ma solo quando sarà cliccata la tumbnail corrispondente. E il gioco e fatto!

Example 2
slide-1
slide-2
slide-3
    <div class="slideshowContainer">
      <div class="slideshow" data-ssThumb="on" data-ssHide="on" data-ssModalGallery="modal-gallery">
        <div class="slide"><img src="img/slide_01.jpg" alt="slide-1" /></div>
        <div class="slide"><img src="img/slide_02.jpg" alt="slide-2" /></div>
        <div class="slide"><img src="img/slide_03.jpg" alt="slide-3" /></div>
      </div>
    </div>

    <div id="modal-gallery" class="modal" data-mSize="800">
      <div class="slideshow" data-ssNav="on" data-ssAnim="ssFade" data-ssInSlideshow="on"></div>
    </div>
Operazione eseguita con successo!