Fw

Wordpress Creative Developer

jQuery Plugin Ascensor – Navigazione in un Ascensore

  • Tutorial Jquery
  • -

Appuntamento come ogni lunedì con risorse e tutorial jQuery.

Oggi ti segnalo ascensor, un plugin davvero eccezionale per realizzare una navigazione animata, come se fossi in un ascensore.

jQuery Ascensor - Navigazione animata

Vediamo brevemente come funziona il plugin, già comunque ampiamente spiegato nella pagina di Ascensor.

Passo 1. Scaricare e richiamare gli script

Come primo passo dovrai scaricare e richiamare gli script necessari per il funzionamento, cioè jquery, scrollTo e ascensor.

   

Passo 2. Codice HTML

Il passo successivo è quello di creare i vari “piani” dell’ascensore, semplicemente inserendo dei div.

Passo 3. Applicare lo script

Come ultimo passa basta applicare lo script, al div “condominio”.

$('#house').ascensor();

Passo 4. Personalizzazione

Poi è possibile personalizzare il comportamento dello script, attraverso diversi parametri che puoi trovare sempre nella pagina del plugin, come ad esempio l’inserimenti dei pulsanti di navigazione, la navigazione attraverso la tastiera, le coordinate dei div ecc.

Al momento lo trovo il plugin più completo e semplice da utilizzare, tu cosa ne pensi?

17 Commenti

  1. mito di uomo!!!!!!!! Grazie lo cercavo da tempo..

  2. Io non riesco ad utilizzarlo…ho copiato ed incollato il tuo esempio per fare una prova, ma vedo tutti i div (in cui ho inserito un’immagine per provare) uno sotto l’altro…cosa sbaglio?

  3. Ho trovato il problema…bisogna includere anche lo script prettify.js, solo che questo particolare non viene menzionato da nessuna parte…

  4. ciao…debbo dire che questo tutorial è tra i migliori che ho mai usato/visto 🙂
    ottimissima scelta!
    ho eletto Ascensor come gestore della navigazione del mio sito in costruzione…volevo però sapere, perchè non riesco a farlo, come eliminare i bottoni “next” e “prev” e come eventualmente nominare gli altri che serveno per navigare tra i “piani” 🙂

    grazie in anticipo

  5. altro problema…
    ho provato ad inserire nella pagina, il plugin lightbox, ma non funziona: (

    ho inserito questo:

    body{ color: #333; font: 13px ‘Lucida Grande’, Verdana, sans-serif; }

    e poi per la foto da provare:

    p align=”center” class=”Stile1″>

    Cliccandoci sopra invece dell’higlight con la trasparenza mi apre una nuova pagina html con l’immagine grande 🙁

    grazie in anticipo della risposta 🙂

  6. ah…mi pare di capire che il codice inserito nel box non lo prende 🙁

  7. Ciao a tutti,
    qualcuno sa come poter cambiare lo stile del menu di navigazione e dei pulsanti prev e next?

    Fede riesci ad aiutartmi?

    • Ciao Andrea e benvenuto nel blog 😉

      Per modificare gli stili a tuo piacimento devi settare il parametro CSSstyles a False.

      Per i pulsanti prev e next ci sono degli stili applicati direttamente nel codice html tramite l’attributo “style”. Inoltre i link hanno id “houseNext” e “housePrev”. Spero di esserti stato d’aiuto 😉

      • Grazie Fede.. ma dopo che ho creato il mio stile per i due bottino (next e prev), come dovrei caricarli in modo da farli vedere correttamente? Ho provato a fare cosi:

        Nel css ho inserito:

        #houseNext
        {
        background: none repeat scroll 0 0 #CCCCCC;
        left: 90px;
        padding: 10px;
        position: fixed;
        top: 20px;
        z-index: 20000;
        }
        #housePrev
        {
        background: none repeat scroll 0 0 #CCCCCC;
        left: 30px;
        padding: 10px;
        position: fixed;
        top: 20px;
        z-index: 20000;
        }

        nel html:

        Scusami ma sono all’inizio con jquery e family 🙂 grazie del tuo supporto!

  8. Innanzitutto grazie per i tutorial, non sai quanto mi sono utili, me li sto studiando uno ad uno. Non vorrei fare il pignolo, ma non dovrebbe essere class=”ContentName invece di id=”ContentName . Grazie ancora tantissime. Willy

    • Ciao Willy e benvenuto nel blog 😉

      Sono contento che i tutorial ti siano d’aiuto! Per quanto riguarda i div è giusto che abbiano l’id, solamente che ognuno dovrebbe avere un nome diverso.

  9. Un’altra domanda se posso. Come si fa a creare l’effetto del riquadro dei social network sulla sinistra che si sposta allo scrolling della pagina? Quello con “mi piace” di facebook, tweet e +1. E’ un plug in di wordpress? Grazie tante, mi piace molto quando c’è solidarietà nel condividere idee e soluzioni con altri colleghi web desginer che magari hanno meno esperienza di te. A presto.

  10. Tutorial molto interessanti. Grazie.

  11. Ciao Fede, complimenti sto plugin spacca.
    Sto ristrutturando il mio sito con Ascensor e va alla grande.
    Sono una cosa non riesco a fare, sicuramente è una cavolata, ma….
    Io sono su un livello dell’ascensore, vorrei piazzare un form di iscrizione al mio sito, ma non so cosa mettere sulla ACTION del form affinchè si rinfreschi solo quel livello passandogli le variabili in POST.
    Dovrei fare lo stesso con un semplice a href passando le variabili in GET, ma ancora una volta non capisco che URL devo specificare.

    Puoi aiutarmi? Grazie

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *