Fw

Wordpress Creative Developer

15 Fantastiche Gallery di Foto e Slideshow Jquery

  • Plugin jQuery
  • -

Oggi voglio segnalarti una fantastica raccolta di gallerie fotografiche  e slideshow Jquery,  da utilizzare per i tuoi progetti, con il vantaggio di non appesantire troppo la pagina web (se non dovessero bastare potrai trovare altri esempi tra i tutorial jquery qui nel mio blog ;))

Realizzare delle gallerie di di questo genere con flash richiede poi molto più tempo per il caricamento della pagina, con conseguente abbandono da parte  dell’utente.

La raccolta è stata stilata da Speckyboy, un blogger che cito spesso su questo blog e che ti consiglio vivamente di seguire.

Ecco le gallerie fotografiche che secondo me meritano più interesse

Galleriffic jQuery Plugin

jquerygallerry1

Sliding Boxes and Captions with jQuery Tutorial

jquerygallerry4

Create a Beautiful jQuery Slider Tutorial

jquerygallerry9

GalleryView jQuery Plugin

jquerygallerry10

Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial

jquerygallerry11

Zoomimage – jQuery plugin

jquerygallerry13

Tutte le altre gallerie le trovi nell’articolo originale, se hai bisogno di qualche dritta chiedimi pure! Inoltre se questa raccolta non ti dovesse bastare ti ricordo che potrai trovare numerosi tutorial in questo blog.

Ne approfitto anche per citare un articolo molto interessante di Tom Stardust dove ha parlato della differenza tra Jquery e Mootools, un articolo che sicuramente potrà farti maggiore chiarezza sui framework probabilmente più utilizzati al momento per sfruttare le potenzialità di javascript.

30 commenti

  1. Molto interessanti, ho avuto modo di provare Simple Jquery.. (la penultima galleria) e devo ammettere che funziona egregiamente.

  2. ciao, intanto grazie per tutto il materiale che metti a disposizione.. ho provato a fare la la galleria dell’articolo “Create a Beautiful jQuery Slider Tutorial”. Come potrei fare per avere la galleria larga al 100% del body?? io ho provato a cambiare le misure nel css ma succede che lo script funziona solo nelle didascalie e mi mette le immagini una sotto l’altra.

    dove sbaglio? grazie intanto ciao erika

  3. Ciao erika e benvenuta nel blog ;)

    Per ottenere l’effetto che vuoi tu, ti consiglio di leggere questo tutorial.

  4. Anche io ho lo stesso problema di Erika! Vorrei utilizzare la tua gallery in vari siti ma con dimensioni diverse (400×500, 150×700 ecc…) Ho letto il tutorial che consigli ma è davvero complicato, il css è lungo e ovviamente organizzato per QUEL sito il tuo invece era semplice e solo per la gallery.
    DOve posso “mettere mano” per correggere solo la dimensione delle foto? se cambio solo il css ovviamente non funziona più nulla! ho capito che devo settare il jQuery ma non so da dove partire….mi auteresti? grazie

  5. Ciao Nicole e benvenuta nel blog ;)

    Lo slideshow di cui parla Erika non è semplicissimo da adattare al layout del sito. Bisogna lavorare sul css per ottenere le dimensioni volute.

    Ti consiglio di leggere questo tutorial: http://www.fedeweb.net/creare-fantastici-slideshow-in-5-minuti/

  6. Eh sì proprio di questo parlo! ho letto il tuo tutorial sulle slideshow in 5 minuti e ho usato il primo esempio (movimento+fade) per il mio slideshow perchè lo trovavo perfetto.
    Se però io cambio la dimensione da CSS da 500×200 a ed 500×400 il tutto smette di funzionare….Io sto iniziando lo ammetto ma non so dove mettere le mani! nelle solite slideshow adattavo il div contenitore secondo le mie esigenze e le immagini di conseguenza qui invece non sono in grado di farlo funzionare. Se cambio la larghezza funziona tutto ma con l’altezza no. Perchè? cosa sbaglio? devo mettere le mani nella jQuery? o no?
    grazie mille per la disponibilità e la risposta tempestiva! una manna dal cielo per quelli come me!

  7. ciao e grazie per la risposta celere =).
    Vi voglio fare vedere quello che dovrei realizzare io.

    http://www.designwine.com

    Lo slide che mi serve è questo. L’ho provato su molte risoluzioni monitor e ho notato che le immagini hanno dimensione fissa (secondo me sui 2000 px visto che anche su una risoluzione 1980 rimangono larghe quanto il body o cmq quanto la finestra del browser). Ho cercato in lungo e in largo per il web qualcosa del genere ma non l’ho trovato allora ho guardato il codice sorgente e ho visto che come libreria jquery principale hanno usato fancybox.
    C’è una libreria che mi permetterebbe di ridimensionare anche la larghezza delle immagini in modo che si adattino alla risoluzione monitor mantenendo questo effetto panoramico e spostandosi sempre all’inizio e non troncandosi a metà tra un’immagine e l’altra?

    Mi rendo conto di essere stata prolissa. Scusate =).
    Se troviamo una soluzione prometto che scrivo un tutorial e ve lo mando!!!!

  8. @Nicole
    Lo script non funziona se la differenza tra l’altezza impostata nel css e l’altezza della foto è più piccola di 91 pixel . Quindi tutto quello che devi modificare l’height nel css, stando attenta a questo particolare

    @Erika
    Molto molto bello l’esempio che hai proposto..me lo studio un po’ e poi ti dico come è stato fatto ok? ciao e grazie!

  9. ah…così facile? e io che pensavo….
    grazie mille, cortese, disponibile gentile!
    davvero grazie a te!

  10. Grazie a te!!

  11. @Nicole
    Hai combinato? sei riuscita a risolvere?

    @Erika
    Dammi tempo fino a giovedì che devo fare un esame e poi potrò dedicarmi allo slideshow ok? ciao!

  12. Ciao Fedeweb!
    Volevo segnalare uno slideshow jQuery scritto da me medesimo :)
    Come effetti è molto semplice, ma la particolaritá sta nell’ottimizzazione per dispositivi mobili come iphone e ipad…dategli un’occhiata se vi va!

    http://www.trapella.it/2010/italiano/mobile-slideshow-un-semplice-slideshow-jquery-ottimizzato-per-iphone-e-ipad/

    Matteo

  13. Ciao Fede,
    sto cercando di implementare galleriffic, ma ho grossi problemi. Attualmente non visualizzo le immagini nella slide, ma solo le thumb e non capisco se sia obbligatorio fare una gallery online o meno (ho letto sul sito dell’autore della slide ma faccio un pò fatica).
    Hai qualche suggerimento da darmi o magari qualche link a una guida per quella slide? Io ho cercato ma non ho trovato nulla.
    Grazie

  14. Ciao Fedeweb,
    volevo segnalarti questa gallery che secondo me è carina:
    http://nivo.dev7studios.com

    Secondo te si può abbinare le foto anche a un ingrandimento tipo lightbox?

    Ciao
    Fede

  15. @Gabriele
    Ciao no non è obbligatorio creare una gallery online. Hai messo il div “slideshow”? Hai collegato le thumb con le immagini?

    @Federico
    Ciao e benvenuto nel blog ;)

    Ti ringrazio per la segnalazione, credo di si, non dovrebbero esserci problemi. Anche se non la trovo una buona soluzione integrare uno slideshow con lightbox. Prova e fammi sapere!

  16. Grazie della risposta Fede,
    me la sto cavicchiando con gli esempi già pronti. Ho dovuto modificare tutto il css perché ho esigenze diverse. Ora non capisco però da dove tira fuori i link con i numeri che collegano alle varie thumb. Mi servirebbe proprio una paginazione di quel tipo perché ho varie thumbs, ma non vedo nella mia gallery alcuna paginazione nonostante le tante thumbs presenti.

  17. Prova a mandarmi la gallery per e mail che quando ho appena un attimo di tempo provo a dargli un’occhiata ;)

  18. @fedeweb
    Grazie fede, onorato anche solo della proposta di aiuto :)
    Per fortuna guardando tutto con calma ho capito che la galleria mostrava la paginazione solo dopo 15 thumb, così è bastato modificare questo campo e tutto è andato a posto :D
    Grazie comunque.

  19. Ciao Fede! ti seguo sempre anche su YIMagazine!
    Chiedo una cosa: è possibile che la gallery Galleriffic jQuery non funzioni su Google Chrome?
    l’ho usata per il mio sito (o meglio ho cercato di usarla dopo aver seguito “come realizzare un sito dalla A alla Z” di Nando e SAra) eppure su Google Chrome non gira…cosa ho sbagliato?

    grazie e in bocca al lupo per la tesi!

  20. Ciao, grazie per la guida, mi sai consigliare dove scaricare il plugin per wordpress con effetto:”JQuery Photo Slider with Semi Transparent Caption Tutorial” come mostrato qui sopra (non riesco a trovarlo così semplice)? Grazie

  21. @Nicoletta
    Ciao e benvenuta nel blog ;)
    Mi dispiace molto per il ritardo nella risposta, hai risolto poi?

    @Lionard
    Ciao e benvenuto nel blog ;)
    Forse questo plugin fa al caso tuo: Slideshow Gallery

  22. mmhmmm..a dire il vero…no…
    ma non preoccuparti per il ritardo! è già tanto la risposta!

  23. Dovresti provare a mandarmi i sorgenti per capire il problema. Così su due piedi mi è difficile darti una mano. Oppure provare a chiedere ai ragazzi di YIM ;)

  24. Veramente posso mandarteli?

  25. Ciao Fede,
    complimenti e grazie per il tuo blog.
    Vorrei chiederti una informazione (ci sto sbattendo la testa da un paio di giorni).
    Dovrei fare una gallery tipo http://m.samsung.com/it/ solo che in questo sito è stata fatta una funzione ad hoc. Sai se esiste un plugin che faccia lo stesso effetto? a me interessano assolutamente 2 cose:
    width delle immagini al 100% rispetto al contenitore;
    possibilità di scorrere a dx e a sx le foto;

    Un plugin che farebbe al mio caso potrebbero essere i seguenti:
    nivo slider ma non posso impostare le dimensioni in %;
    supersized 3.2 ma non posso impostare la gallery all’interno di un contenitore ma solo al body;

    mi sfugge qualcosa?
    grazie
    federico

  26. Scusa Fede,
    ho trovato quello che fa per me. Te lo posto magari un giorno ti potrà essere utile:

    http://beta.slidesjs.com/examples/responsive/

  27. Ciao Federico e benvenuto nel blog ;)

    Ti ringrazio molto per la risorsa che hai condiviso, non la conoscevo!

    Ciao e buone vacanze!

  28. vorrei fare una slider come nel sito indicato, che suggerimento puoi darmi o con quale UI di jquery è stato fatto? ti premetto che non vorrei fare lo slider con le freccie ma con gli indirizzi. grazie

  29. Ciao,
    qualcuno ha mai fatto uno slideshow con delle immagini trasparenti?
    mi spiego meglio: vorrei fare uno slide con delle immagini trasparenti ognuna delle quali contiene un livello, così all’inizio vedo l’immagine completa e poi piano piano vado a eliminare tutti i livelli dell’immagine. (un po’ come funziona con un psd).
    Il massimo sarebbe utilizzare uno slide con effetto libro ma tutti quelli che ho provato sono “scattosi” forse questo effetto viene molto meglio con flash, giusto?

  30. F A N T A S T I C O ! ! !

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *