Shadowbox no carga la URL actual

estoy usando una galería de imágenes simple con shadowbox integrado. Este es el guión normal.

 <div id="gallery">
            <div id="panel">
            <p><a id="showimg" href="images/image_01.jpg" rel="shadowbox">
                <img id="largeImage" src="images/image_01.jpg" />
                </a></p>
            <div id="description">1st image description</div>
            </div>

            <div id="thumbs">
                <img src="images/image_01.jpg" alt="1st image description" />
                <img src="images/image_02.jpg" alt="2nd image description" />
                <img src="images/image_03.jpg" alt="3rd image description" />
                <img src="images/image_04.jpg" alt="4th image description" />
                <img src="images/image_05.jpg" alt="5th image description" />
            </div>
        </div>

        </div>

        <script>

        $('#thumbs').delegate('img','click', function(){
            $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
            $('#description').html($(this).attr('alt'));
        });

        </script>

Noté que la URL de la imagen grande nunca cambiaba, por lo tanto, agregué otra línea en el script para cambiar el href todo el tiempo que el mouse cambia la imagen.

<script>

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src'));
    $('#description').html($(this).attr('alt'));
    $('#showimg').attr('href', $(this).attr('src'));
});

</script>

No sé si es correcto, pero cuando paso el mouse sobre las imágenes, la URL siempre es diferente ahora, pero SHADOWBOX carga siempre la misma imagen (la primera).

¡Un poco de ayuda por favor!

preguntado el 16 de septiembre de 13 a las 00:09

1 Respuestas

Intenta usar esta sintaxis:

html (poner clase a cada imagen en la lista):

<div id="thumbs">
<img class="imglist" src="images/image_01_thumb.jpg" alt="1st image description" />
</div>

js:

$('.imglist').on('click','img', function(e){

e.stopPropagation(); or e.preventDefault();

       $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
            $('#description').html($(this).attr('alt'));
            $('#showimg').attr('href', $(this).attr('src').replace('thumb', 'large'));

         });

Respondido el 16 de Septiembre de 13 a las 01:09

¿Qué quiere decir con "Intente escribir este método e.stopPropagation() o e.preventDefault()"? Nunca codifiqué Javascript :/ - André Ferreira

prueba primero y si nada cambia entonces segundo - user1956570

Lo siento, pero no pasó nada. la imagen grande ni siquiera ha cambiado - André Ferreira

¿Qué significa esto $(this).attr('src').replace('thumb','large')) ? - user1956570

Ya había cambiado... olvídate del replace... Solo reemplazaría un texto que ya no uso. Va a atribuir el src de #thumbs al src de #largeimage. ¡Y debo usar #thumbs en lugar de .imglist porque la función no puede obtener la etiqueta img! - André Ferreira

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.