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