MISTERWEBBY - WORDPRESS - CSS - JQUERY - TUTORIAL PHOTOSHOP - FREEBIES

Creare un portfolio con effetto Zoom e scorrimento tramite slider

in Coding, jquery by microtag il 6-04-11 - 3 Comments

In questo tutorial si andranno a creare diversi effetti visivi per un portfolio o un progetto simile usando jQuery. Si darà vita a un piccolo slider integrato con il fantastico plugin Cloud Zoom e l’elegante Fancybox. L’idea è quella di dare all’utente l’opzione di vedere attraverso lo zoom i dettagli di un portfolio quando il cursone vi passa sopra e di premettere una visualizzazione a pieno schermo, qualora vi si cliccasse.

DEMO    VAI AL SITO


Collabora con MisterWebby

Collaborando con MisterWebby avrai l'opportunita' di inserire una breve biografia in coda all'articolo scritto o recensito. I tuoi articoli avranno visibilita' sul sito, che conta oltre 40mila contatti al mese, inoltre verranno segnalati tramite Twitter, Facebook, e Feed RSS. Se interessato, attendiamo la tua candidatura


Risorse correlate

  • Effetto zoom

    Come realizzare un effetto zoom con photoshop

    in Grafica, tutorial photoshop by microtag il 7-10-09 - No Comments

  • 5 differenti tipi di zoom con jQuery image zoomer

    Plugin jQuery che consente di ingrandire un'immagine a tutto schermo o come lighbox; la sua caratteristica principale è che si può determinare la posizione delle immagini. Nivo Zoom è un plugin ...

    in Coding, jquery by mouse il 17-11-10 - No Comments

  • Effetto zoom con photoshop

    Tutorial photoshop che spiega com creare un effetto di zoom immagine, utilizzando una simpatica lente di ingrandimento

    in Grafica, tutorial photoshop by microtag il 26-05-08 - No Comments

  • 20+ templates per la creazione del vostro portfolio

    Per un designer, uno sviluppatore, un fotografo o per qualsiasi attività creativa, un sito web è il posto migliore per mostrare le proprie competenze. Ecco una raccolta di 20 e ...

    in Grafica by mouse il 28-04-10 - No Comments

  • 40+ utili Tutorial jQuery & Ajax per creare Slider

    Gli slider jQuery servono a esporre i vostri contenuti in una maniera accattivante. Avrete forse notato in molti siti che gli articoli in evidenza vengono mostrati usando effetti di slittamento ...

    in Coding, jquery by microtag il 30-03-11 - No Comments

  • Novità in casa YouTube

    YouTube è il portale di videosharing più conosciuto ed utilizzato a livello mondiale, ora il sito acquistato da Google nel 2006, si rifà il look e pensa a monetizzare finalmente ...

    in web by Lorenzo Renzulli il 24-01-10 - No Comments

ricerca

Usa il motore di ricerca interno per trovare le migliori risorse per web designer.

Social trend
i post piu' menzionati nei social network

Sito mobile: il tuo è compatibile?

Menu in CSS – Collection

Tutorial Photoshop per modificare il colore degli occhi – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection

Tutorial Natalizi Photoshop – Collection

featured
i post consigliati

Pulsanti CSS3 – Collection

Tutorial Natalizi Photoshop – Collection

Azioni Photoshop – Collection

Temi per WordPress – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection

  • Camizzilla

     Ciao! Ho usato questo slider per un mio progetto, tutto bene tranne che per una cosa. L’effetto zoom che nell’esempio viene a destra io vorrei sapere se tu sai come si fa a metterlo sotto.  Non riesco a modificare il valore position. Ho provato da html a mettere “bottom”, ma niente. Poi ho provato anche a guardare cloud-zoom.js ma quello per me è arabo! Grazie!

    • MisterWebby

      Prova a giocare con i margini:

      margin-left:-213px; 
      margin-top:110px;

      aggiungi il codice sopra nel file cloud-zoom.css alla classe .cloud-zoom-big
      Fammi sapere.
      Ciao

      • Camizzilla

        Grandissimo!
        Pensare che ci avevo anche provato!
        Grazie mille e scusa per il disturbo!!