jQuery reemplazar IMG SRC en tres pasos

Question

Un poco atascado con este. Estoy construyendo una galería de imágenes de productos para una tienda Shopify que necesita tener la siguiente funcionalidad:

1. Miniaturas para cada imagen del producto
2. Imagen de tamaño mediano que entra en la imagen principal 'contenedor'
3. Imagen de tamaño completo que aparece como una caja de luz cuando hace clic en la imagen de tamaño mediano

Por lo tanto, haría clic en una miniatura que cargaría la imagen de tamaño mediano en el contenedor de imagen y luego hacer clic en esa imagen de tamaño mediano mostraría la imagen de tamaño completo como una superposición de la caja de luz.

Aquí está mi marcado:

<div id="imgcontainer">
                <a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
            </div> <!-- End div#imgcontainer -->
            <div id="thumbs">
                <div class="thumbnav">
                    <ul>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                    </ul>
                </div> <!-- End div#thumbnav -->
                <a href="javascript:void(0);" class="tbpr">&nbsp;</a>
                <a href="javascript:void(0);" class="tbnx">&nbsp;</a>
            </div> <!-- End div#thumbs -->
        </div> <!-- End div#main -->

¿Alguien puede recomendar la mejor manera de hacer esto? Shopify usa un lenguaje llamado 'líquido' que me permite usar una declaración 'foreach' para obtener el marcado para las imágenes, o incluso los tres tipos de URL de imágenes (miniatura, mediana y tamaño completo).

Tenga en cuenta que no hay una convención de nombres simple para el nombre de archivo y la ubicación de la imagen, ya que se generan sobre la marcha, por lo que no puedo cambiar la parte 'media' del nombre de archivo por 'tamaño completo', etc.

Gracias por cualquier consejo,

OSU

Answer 1

¿Puede almacenar las URL de tamaño completo como un atributo de datos en los anclajes? P.ej,

<li><a href="assets/medium-1.jpg" data-fullsize="assets/fullsize-1.jpg">
       <img src="assets/thumb-1.jpg" alt="..." /></a></li>

Entonces podrías usar algo como:

$('a[data-fullsize]').click( function() {
     var $this = $(this);
     $('#imgcontainer a:first').attr('href',$this.data('fullsize'))
                               .find('img')
                               .attr('src',$this.attr('href'));
     return false;
});
$('#imgcontainer').on('click','a:first',function() {
     // load href into lightbox
     return false;
});

Answer 2

Agregaría la ruta al enlace como un atributo de datos.

Agregar la gran información de la imagen

<li><a href="assets/medium-1.jpg" data-zoomimage="assets/big-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>

Manejo de los clics (jQuery v1.7)

Primero para los pulgares -> medio

$('.thumbnav').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    $('#imgcontainer a') // find the link 
        .attr('href',self.data('zoomimage') ) // and update its href to point to the zoom
        .find('img') // fint the image inside
        .attr('src', self.attr('href') ); // and load the medium
});

luego para el medio -> zoom

$('#imgcontainer').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    // use lightbox system to load the link's href.. self.attr('href')
});