Deck js una libreria per trasformare il tuo sito in una galleria di immagini.

Deck js è un plugin JQuery per trasformare codice HTML di base in slide show animate e sfogliabili sia tramite mouse che tramite tasitera.

Dopo aver integrato nella pagina web desiderata almeno la libreria presente nella cartella core del plugin chiamata appunto core.deck.js

<script src="../core/deck.core.js"></script>

Ora puoi iniziare a creare le tue slide partendo da un codice HTML come potrebbe essere questo:

<div class="slide">
... contenuto della slide ...
</div>

e trasformarla nella tua prima slide aggiungendo tar i tag script l’istruzione JQuery per individuare quali saranno gli elementi HTML da trasformare in slide

$.deck('.slide');

e inoltre aggiungere alcune classi per definire quale sarà la prima slide, la seconda e così via

<div class="slide deck-current">
... contenuto della slide ...
</div>

Dopo aver creato la struttra in HTML, Deck js contiene al suo interno alcuni fogli di stile che puoi usare per creare ed assegnare dei temi e delle transizioni alle tue slide, esempio:

<link rel="stylesheet" href="/path/to/css/style-theme.css">
</link>

i fogli di stile presenti dentro la libreria sono inizialmente tre, Web2.0, Swiss e Neon, mentre i fogli di stile per le transizioni sono orizzontale, verticale e fade, quest’ultima per creare sfumature tra una e l’altra.

infine nella cartella Extension del plugin troverai delle estensioni scritte in JQuery per implementare utili funzioni alla navigazione delle slide, nativamente ne troverai cinque:

deck.goto: Per integrare un campo in cui poter inserire il numero di una slide e andarla a visitare direttamente.
deck.hash: Per abilitare link interni alle slide e saltare direttamente da una all’altra senza dover seguire l’ordine di quest’ultime.
deck.menu: per Mostrare e disporre tutte le slide in una griglia per poterne avere una panoramica.
deck.navigation: Aggiunge un menu cliccabile per scorrere a destra e sinistra le slide.
deck.status: Aggiunge un indicatore della slide in cui sei posizionato e rispetto al numero totale delle di quest’ultime.

Per consultare tutta la documentazione relativa al plugin ecco il link alla sezione Deck js doc

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco