Bonjour a tous,

voilà j'essaye de modifier mon design de site prestashop. Actuellement la "galerie d'image" produit change les images lorsqu'on survolle la vignette. ET j'aimerai que cela change lorsqu'on clique sur la vignette et que lorsqu'on la survolle il ne se passe rien?

Es-ce possible ?

Pour vous faire une idée de comment se présente le code: http://politiquementcorrect.fr/prestas [...] ?id_product=2

Merci d'avance pour votre aide.

Là où dans ton code tu as onMouseOver = "ChangerImageGalerie()"
tu mets onClick = "ChangerImageGalerie()"

Et au passage on les met en minuscule les options pour rester valide xhtml

C'est ce que j'avais trouvé sur le net déjà, seulement j'ai pas de onMouseOver ...

Bah sans le code je peux pas t'en dire beaucoup plus ...

Ah mon avis de cette partie là ...

<!-- product img-->
		<div id="image-block">
		{if $have_image}
				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>
		{else}
			<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
		{/if}
		</div>

		{if count($images) > 0}

		<!-- thumbnails -->
		<div id="views_block" {if count($images) < 2}class="hidden"{/if}>
		
		<div id="thumbs_list">
			<ul id="thumbs_list_frame">
				{assign var=cptImage value='1'}
				{foreach from=$images item=image name=thumbnails}
				{assign var=imageIds value=`$product->id`-`$image.id_image`}
				<li class="thumbnail_{$cptImage}" id="thumbnail_{$image.id_image}">
					<a  onclick="return false;" href="{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}" rel="other-views" class="" >
						<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}"  height="{$smallSize.height}" width="{$smallSize.width}" />
					</a>
				</li>
				{assign var=cptImage value=`$cptImage+1`}
				{/foreach}
			</ul>
		</div>
		{if count($images) > 5}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
		</div>
		{/if}
		{if count($images) > 1}<p class="align_center clear"><a id="resetImages" href="{$link->getProductLink($product)}" style="display:none;" onclick="$('a#resetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></p>{/if}
	</div>

Salut.

Alors je t'explique.. Prestashop utilise jQuery comme framework JS.

Regarde plutôt dans la page product.js de ton thème (probablement le thème Home).

Tout le Js est dans cette page (il te suffira de modifier un .hover par un .click si tu connais un peu jQuery).

Bon courage

Yes j'ai trouvé dans mon fichier product.js

Pour ceux qui ont le même problème c'est ici:

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

qui devient donc:

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

Oulala.. La méthode click() de jQuery ne s'écrit pas comme ça.. Ton code devrait même buguer.
Le voici corrigé :

$('#views_block li a').click(function(e){
    e.preventDefault();
    displayImage($(this));
});

</citation>

PS : De rien