Contrôler un défilement d'images en continu dans les deux sens

[FREDPRESTA]

Bonjour,

 

Je cherche le code en javascript qui pourra permettre de faire défiler les images miniatures dans une page produit avec des fleches.

Il faudrait faire en sorte qu'une fois arrivé à la dernière image, si je reclick sur la fleche, que cela me ramene sur la premiere image.

L'exemple type de ce que je cherche à faire est montré sur ce lien :

http://www.johnlewis.com/ted-baker-melbor-holdall-black/p1774059?colour=Black

 

Je transmets ce que j'ai déjà réussi à faire en code JS sur ma page produit :

http://www.mon-emballage.com/boite-mignardises/45765-boite-1-cupcake-blanche.html

 

Je précise que je suis en version prestashop : 1.4.4.0

 

 

Voici un morceau de la page JS ('product.js') de prestashop utilisé pour cela :

 

// Serialscroll exclude option bug ?
function serialScrollFixLock(event, targeted, scrolled, items, position)
{
    serialScrollNbImages = $('#thumbs_list li:visible').length;
    serialScrollNbImagesDisplayed = 3;

    var leftArrow = position == 0 ? true : false;
    var rightArrow = position + serialScrollNbImagesDisplayed >= serialScrollNbImages ? true : false;

    $('a#view_scroll_left').css('cursor', leftArrow ? 'default' : 'pointer').css('display', leftArrow ? 'none' : 'block').fadeTo(0, leftArrow ? 1 : 1);
    $('a#view_scroll_right').css('cursor', rightArrow ? 'default' : 'pointer').fadeTo(0, rightArrow ? 1 : 1).css('display', rightArrow ? 'block' : 'block');
    return true;
}

// Change the current product images regarding the combination selected
function refreshProductImages(id_product_attribute)
{
    $('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});
    $('#thumbs_list li').hide();
    id_product_attribute = parseInt(id_product_attribute);

    if (typeof(combinationImages) != 'undefined' && typeof(combinationImages[id_product_attribute]) != 'undefined')
    {
        for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
            $('#thumbnail_' + parseInt(combinationImages[id_product_attribute])).show();
    }
    if (i > 0)
    {
        var thumb_height = $('#thumbs_list_frame >li').height()+parseInt($('#thumbs_list_frame >li').css('marginRight'));
        $('#thumbs_list_frame').height((parseInt((thumb_height)* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?
    }
    else
    {
        $('#thumbnail_' + idDefaultImage).show();
        displayImage($('#thumbnail_'+ idDefaultImage +' a'));
    }
    $('#thumbs_list').trigger('goto', 0);
    serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?
}

//To do after loading HTML
$(document).ready(function()
{
    //init the serialScroll for thumbs
    $('#thumbs_list').serialScroll({
        items:'li:visible',
        prev:'a#view_scroll_left',
        next:'a#view_scroll_right',
        axis:'y',
        offset:0,
        start:0,
        stop:true,
        onBefore:serialScrollFixLock,
        duration:700,
        step: 2,
        lazy: true,
        lock: false,
        force:false,
        cycle:false
    });

    $('#thumbs_list').trigger('goto', 1);// SerialScroll Bug on goto 0 ?
    $('#thumbs_list').trigger('goto', 0);

    //hover 'other views' images management
    $('#views_block li a').hover(
        function(){displayImage($(this));},
        function(){}
    );
 

 

Et voici maintenant le morceau de code utilisé sur la page 'product.tpl' :

 

        <div id="views_block" {if isset($images) && count($images) < 2}class="hidden"{/if}>
        {if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a style="opacity:1;" id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
        <div id="thumbs_list">
            <ul id="thumbs_list_frame">
                {if isset($images)}
                    {foreach from=$images item=image name=thumbnails}
                    {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                    <li id="thumbnail_{$image.id_image}">
                        <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                            <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                        </a>
                    </li>
                    {/foreach}
                {/if}
            </ul>
        </div>
        {if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
        </div>
        {/if}
        {if isset($images) && count($images) > 1}<p class="align_center clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_16x18.gif" alt="{l s='Cancel'}" width="16" height="18"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

    </div>

 

Voila, si quelqu'un aurait une solution, cela serait sympa qu'il en fasse part et je le remercie d'avance.

En attendant je vais essayer de mon côté de trouver une solution...