una galeria de imatges responsive a WordPress

galeria de imatges responsive a wordpress de Xavier Torra fotògraf de casaments

Xavier Torra fotògraf

Explicaré com ho he fet per afegir una galeria de imatges responsive a WordPress a un tema fill de TwentyTwelve a xaviertorra.cat
Aquest mètode es vàlid per qualsevol galeria de wordPress mentre els ítems puguin tenir un id de CSS.

Per començar em descarrego la darrera versió de PhotoSwipe que trobaré a la seva plana web.

Després de descomprimir l’arxiu, que en el meu cas és el code.photoswipe-3.0.5.zip, em queda una carpeta amb el número de versió, que jo, per no embolicar-me, canvio de nom a “psw”.

Copio aquesta carpeta a dins de la carpeta del tema fill del TwentyTwelve que he creat per a fer les meves modificacions.

Dins el header.php del subtema afegeixo el següent codi:

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/psw/lib/klass.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/psw/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript">

        (function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {},
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('.gallery-icon a '), options );

            }, false);

        }(window, window.Code.PhotoSwipe));
</script>

Recordeu que heu de reanomenar el directori on ho guardeu i corregir les rutes del codi perquè siguin les correctes. Si feu servir “psw” com jo ja no us caldrà corregir el codi per aquest mortiu.

El que heu de tenir en compte, es que a la línea on diu:

instance = PhotoSwipe.attach( window.document.querySelectorAll('.gallery-icon a '), options );

Heu de comprovar que el id “.gallery-icon a” sigui el correcte. Podeu canviar-ho pel que vulgueu.

Espero que us funcioni com a mi.

galeria de imatges responsive a wordpress

galeria de imatges responsive a wordpress

 

Un pensament a “una galeria de imatges responsive a WordPress

  1. Retroenllaç: Manual de SEO a WordPress per fotògrafs - ICSTA publicitat

Els comentaris estan tancats.