prettyPhoto múltiples galerías en una página

3 minutos de lectura

avatar de usuario
alex tumbas

Estoy creando un sitio de worpdress y tengo varias galerías en una página creada con el código abreviado. Por el momento, todas las imágenes tienen el atributo rel ‘prettyPhoto[1]’ pero necesito que cada galería esté separada. Tengo 56 imágenes en total en la página, así que cuando la primera imagen de la galería 1 se abre en lightbox dice 1/56 y puedo hacer clic en las 56 imágenes, lo que quiero es que la galería uno diga 1/16 y luego la galería 1 /16, etc. Me dijeron que editara esta línea de script en mi archivo raw.js:

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

pero no estoy seguro de qué hacer con él? Cualquier ayuda sería muy apreciada. Aquí hay un enlace a la página en cuestión:

http://www.tetra-shed.co.uk/news/

avatar de usuario
McNab

prettyPhoto agrupa las galerías según el contenido de los corchetes. Entonces, obtienes las 56 imágenes en la misma galería porque todas se han asignado a la galería 1.

Lo que realmente quieres son los primeros dieciséis de la galería 1;

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

Y los próximos 16 en la galería 2;

$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');

La pregunta es: ¿cómo hacerlo dado que el rel atributo se asigna a través de JS? Bueno, consideraría hacerlo en función de la identificación de la división principal principal. Cada elemento de icono de galería tiene un padre de elemento de galería. Cada uno de ellos es parte de una clase de galería que tiene una identificación específica. Por ejemplo

<div id='gallery-3' class="gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail">
    <dl class="gallery-item">
        <dt class="gallery-icon">

Por lo tanto, le gustaría asignar esa identificación única de la galería como el valor real de la foto bonita. es decir;

$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');

Lo haría encontrando todos los íconos de la galería y usando closest() para encontrar la identificación de la galería principal, así;

Encontrar la identificación de un div padre usando Jquery

No lo he probado ni nada, pero algo como esto debería llevarlo en la dirección correcta;

            $('#content').find('.gallery-icon a').each(function() {

                var gallid = $(this).closest("div").attr("id");

                $(this).attr('rel', 'prettyPhoto['+ gallid +']');

            });     

  • McNab eres un salvavidas. Funcionó a la primera. Muchas gracias por la respuesta y la ayuda.

    – Alex Graves

    16 de diciembre de 2012 a las 12:28

avatar de usuario
petr mensik

Tal vez vine con una solución más fácil, solo estoy revisando toda mi galería div en each y luego inicializando el prettyPhoto en imágenes dentro de ellos.

$(document).ready(function(){
    $.each($(".gallery"), function(i, val) {
        var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
        $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
    });
});

  • ¿Por qué votar negativamente? Es simple, está funcionando y su marcado HTML no tiene que cambiar de una galería a otra (lo cual es excelente porque los usuarios pueden agregar o eliminar galerías en mi web)

    – Petr Mensik

    19 de febrero de 2014 a las 7:55

avatar de usuario
Estuardo

Todo lo que se necesita hacer es cambiar el rel en el html donde agregas tu galería que se parece a esto rel=”prettyPhoto[pp_gal]”

en su primera galería que crea dentro de su div, cambie el rel=”prettyPhoto[pp_gal]” a “bonitaFoto[gallery1]” (por ejemplo)

y el siguiente a “prettyPhoto[gallery2]” y así.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad