Jump to content

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


FREDPRESTA
 Share

Recommended Posts

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More