Implementare Next Gen Gallery con Fancybox
4 marzo 2011 
Uno dei migliori plugin di wordpress per gestire le gallerie di immagini è Next-Gen Gallery.
Questo plugin offre un pannello di amministrazione incredibile, facile da utilizzare, alla portata di chiunque, e dà pure la possibilità di inserire le foto tutte insieme e di poterle ordinare dopo.
Ma ho notato che ha un’unica pecca: la lightbox è “un pugno negli occhi”. Scarna, poco funzionale, secondo me diventa difficile pure da guardare.
Per questo tempo fa decisi di implementarla in un mio lavoro, con un plugin di Jquery: FancyBox.
Oggi condivido con voi questa semplice tecnica per rendere più professionale la nostra Next Gen Gallery.
1) Carichiamo FancyBox
Dopo aver istallato Next-Gen Gallery , andate in questo link, scaricate FancyBox Plugin di Jquery e caricate il tutto sulla cartella del vostro tema di wordpress.
2) Implementiamo il codice <head>
Ora apriamo la header.php del vostro tema wordpress e inseriamo prima della chiusura del </head> questo codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.1.css" media="screen"> <script> $(document).ready(function() { $(".various4").fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> |
Infine salvate la nuova header.php. Assicuratevi di non inserire due volte il tag che richiama la libreria jquery.js e di non aver inserito una vecchia libreria di jquery.
3) Implementiamo il codice <img>
Ora andate sul back-end di wordpress su:
Gallery > Opzione > Effetti
Troverete un piccolo box con del codice e dovrete aggiungere questo:
1 | class='various4' |
Salvate le modifiche.
Finito NextGen Gallery implementata
Ora andate sulla vostra gallery e cliccate su una qualsiasi immagine e vedrete che il gioco è fatto.
Ovviamente FancyBox ha tantissimi altri effetti (transizione, rimpicciolimento, fade in, fade out) che potete implementare leggendo qua: http://fancybox.net/
Se invece foste interessati al fancybox, avevo già parlato di questa fantasmagorica libreria anche in un mio ex articolo: FancyBox ottima lightbox in Jquery .
Se vi fosse piaciuto il mio articolo potreste condividerlo oppure commentarlo 
Potresti trovare interessante anche
Ottima risorsa di sempre