[SOLUCIONADO] Problema con JqZoom y thumbnails (v.1.5.6.2)

[rlodiaz]

Hola a todos,

 

Estoy creando una tienda con la version 1.5.6.2 de Prestashop pero tengo un problema con el zoom de los productos.

 

Tengo activada la función"lupa" jqzoom pero cuando voy a la página del producto, solo puedo visualizar con esta función la imagen grande del producto y no las otras imágenes que tengo del mismo producto en pequeño. Es como si la función solo cargase la imagen grande y las pequeñas aunque pulse en ellas , se carguen y las pueda ver con la función lightbox, al pasar el  ratón por encima SOLO me amplia la primera imagen de la galeria, es decir la grande, pero no las pequeñas. He estado mirando por este y otros foros pero no he dado con la solución supongo que en parte debido a mis escasos conocimientos en javascript.

 

Aquí abajo os dejo el código html de uno de los productos y el código javascript de la función jqzoom que creo que habría que modificar para ver si alguien me pudiera ayudar.

 

 

Un saludo.

 

 

 

 

 

Código HTML:

 

<div id="image-block">

    <span id="view_full_size">
        <img id="bigpic" class="jqzoom" width="264" height="264" alt="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" title="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" src="http://prestashop.jumby.es/32-large_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg" rel="http://prestashop.jumby.es/32-thickbox_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg"></img>
        <span class="span_link"> … </span>
    </span>

</div>
<div id="views_block" class="clearfix ">

    <span class="view_scroll_spacer"> … </span>
    <div id="thumbs_list">
        <ul id="thumbs_list_frame" style="width: 504px;">
            <li id="thumbnail_32">
                <a class="thickbox shown" title="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" rel="other-views" href="http://prestashop.jumby.es/32-thickbox_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg">
                    <img id="thumb_32" width="58" height="58" title="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" alt="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" src="http://prestashop.jumby.es/32-medium_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg"></img>
                </a>
            </li>
            <li id="thumbnail_96">
                <a class="thickbox" title="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" rel="other-views" href="http://prestashop.jumby.es/96-thickbox_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg">
                    <img id="thumb_96" width="58" height="58" title="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" alt="Asus K550CC-XX509H (Portátil Core i7-3537U 8GB 1TB 15,6 W8)" src="http://prestashop.jumby.es/96-medium_default/asus-k550cc-xx509h-portatil-core-i7-3537u-8gb-1tb-156-w8.jpg"></img>
                </a>

                </li>

 

Código Javascript Jqzoom:

 

//update display of the large image

function displayImage(domAAroundImgThumb, no_animation)
{
    if (typeof(no_animation) == 'undefined')
        no_animation = false;
    if (domAAroundImgThumb.prop('href'))
    {
        var new_src = domAAroundImgThumb.prop('href').replace('thickbox', 'large');
        var new_title = domAAroundImgThumb.prop('title');
        var new_href = domAAroundImgThumb.prop('href');
        if ($('#bigpic').prop('src') != new_src)
        {
            $('#bigpic').prop({
                'src' : new_src,
                'alt' : new_title,
                'title' : new_title
            }).load(function(){
                if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
                    $(this).prop('rel', new_href);
            });
        }
        $('#views_block li a').removeClass('shown');
        $(domAAroundImgThumb).addClass('shown');
    }
}

  
// Change the current product images regarding the combination selected

function refreshProductImages(id_product_attribute)
{
    $('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});

    id_product_attribute = parseInt(id_product_attribute);

    if (id_product_attribute > 0 && typeof(combinationImages) != 'undefined' && typeof(combinationImages[id_product_attribute]) != 'undefined')
    {
        $('#thumbs_list li').hide();
        $('#thumbs_list').trigger('goto', 0);
        for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
            $('#thumbnail_' + parseInt(combinationImages[id_product_attribute])).show();
        if (parseInt($('#thumbs_list_frame >li:visible').length) < parseInt($('#thumbs_list_frame >li').length))
            $('#wrapResetImages').show('slow');
        else
            $('#wrapResetImages').hide('slow');
    }
    else
    {
        $('#thumbs_list li').show();
        if (parseInt($('#thumbs_list_frame >li').length) == parseInt($('#thumbs_list_frame >li:visible').length))
            $('#wrapResetImages').hide('slow');
    }

    var thumb_width = $('#thumbs_list_frame >li').width() + parseInt($('#thumbs_list_frame >li').css('marginRight'));
    $('#thumbs_list_frame').width((parseInt((thumb_width) * $('#thumbs_list_frame >li').length)) + 'px');
    $('#thumbs_list').trigger('goto', 0);
    serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?
}
 

 

Edited February 26, 2014 by rlodiaz (see edit history)

[Feliz Garcia]

El otro dia lei un caso, parecido al tuyo, era en este tema: http://www.prestashop.com/forums/topic/292895-solucionado-jqzoom-no-funciona-para-todas-las-im%C3%A1genes-de-producto-en-1561/ (Mira ver si lo que comentan te funciona)

 

Por otro lado, he visto un aporte chulo en el foro (relacionado) que es este:: http://www.prestashop.com/forums/topic/301884-modulo-elevatezoom-para-prestashop-efectos-de-zoom-y-lupa/ 

 

Saludos,

[rlodiaz]

Hola Feliz Garcia,

 

Muchísimas gracias por el aporte, estuve buscando un rato por este foro y no llegue a encontrarlo. Acabo de probar la primera solución que me diste y la verdad que funciona a la perfección! Ya consigo visualizar correctamente todas las imágenes. 

 

Con esto doy el problema como solucionado con lo que voy a incluir [sOLUCIONADO] en el título del post.

 

Muchas gracias nuevamente.

 

Un saludo.