una galeria de imagenes responsive en WordPress

galeria de imagenes responsive en WordPress de Xavier Torra fotógrafo de bodas

Xavier Torra fotógrafo

Explicaré como lo he hecho para añadir una galeria de imagenes responsive en WordPress a un tema hijo de TwentyTwelve en xaviertorra.cat
Este método es válido para cualquier galería de WordPress mientras los ítems puedan tener un id de CSS.

Para empezar me descargo la última versión de PhotoSwipe que encontraré en su página web.

Después de descomprimir el archivo, que en mi caso es el code.photoswipe-3.0.5.zip, me queda una carpeta con el número de versión, que yo, por no liarme, cambio de nombre a “PSW” .

Copio esta carpeta dentro de la carpeta del tema hijo del TwentyTwelve que he creado para hacer mis modificaciones.

Dentro del header.php del subtema añado el siguiente código:

<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>

Recordad que debéis renombrar el directorio donde lo habéis guardado y corregir las rutas del código para que sean las correctas. Si utilizáis “PSW” como yo ya no necesitaréis corregir el código por este motivo.

Lo que debéis tener en cuenta, es que en la línea donde dice:

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

Tenéis que comprobar que el id “.gallery-icon a” sea el corecto. Podéis cambiarlo por el que queráis.

Espero que os funcione como a mí.

galeria de imagenes responsive en WordPress

galeria de imagenes responsive en WordPress

 

Un pensamiento en “una galeria de imagenes responsive en WordPress

  1. Pingback: manual de SEO en WordPress para fotógrafos - ICSTA publicitat

Los comentarios están cerrados.