Jump to content

Problème image produit version mobile [RESOLU]

freds83
 Share

Recommended Posts

freds83 Explorer

freds83

Posted
Posted (edited)

Bonjour je rencontre un problème en version mobile

Sur ordinateur j'ai bien les 3 images (voir capture)

J'ai essayé d'activer et désactiver le thème mobile vider le cache etc aucun changement

site : sucette-perso.fr

Merci pour votre futur aide 

Sans titre.png

Edited by freds83 (see edit history)
Link to comment
Share on other sites
Shonen Contributor

Shonen

Posted
Posted

Salut,

Le problème vient de cette ligne dans le CSS : 

@media (max-width: 767px)
#thumbs_list {
    width: 194px;
}

En soit, c'est le fonctionnement natif, mais normalement les images devraient être centrées et il devrait y avoir un défilement des images avec des flèches. Il semblerait que ton thème ai été override, vérifie dans le CSS de ton thème.

image.png.a553be81f0c2609400fc485e58778d64.png

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

Il semble que vous ayez modifié le code source de l'affichage de la page product.tpl puisque les 2 flèches droite et gauche pour faire défiler les images ne soient plus présentes.

Code d'origine : 

{if isset($images) && count($images) > 0}
	<!-- thumbnails -->
	<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
		{if isset($images) && count($images) > 2}
			<span class="view_scroll_spacer">
				<a id="view_scroll_left" class="" 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`"}
					{if !empty($image.legend)}
						{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
					{else}
						{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
					{/if}
					<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
						<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal}}{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
							<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
						</a>
					</li>
				{/foreach}
			{/if}
			</ul>
		</div> <!-- end thumbs_list -->
		{if isset($images) && count($images) > 2}
			<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
				{l s='Next'}
			</a>
		{/if}
	</div> <!-- end views-block -->
	<!-- end thumbnails -->
{/if}

Donc il semble que vous n'affichez pas les flèches 

		{if isset($images) && count($images) > 2}
			<span class="view_scroll_spacer">
				<a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
					{l s='Previous'}
				</a>
			</span>
		{/if}

et 

		{if isset($images) && count($images) > 2}
			<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
				{l s='Next'}
			</a>
		{/if}

 

Link to comment
Share on other sites
freds83 Explorer

freds83

Posted
  • Author
Posted

j'ai voulu changer de theme bootstrap il ma demandé de régénérer les images j'ai eu un timeout et du coup j'ai des points d'interrogations sur les image large default

Comment les récupérer ?

Je me retrouve aussi avec les catégories en haut j'ai envi de pleurer

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

Vous dites que le code est en place donc il doit s'afficher, si ce n’est pas le cas alors c'est qu'il y a autre chose invisible pour nous il faut donc plonger dans votre code, prendre le temps d'effectuer des test, analyser les résultat, espérer identifier le souci, mais tout cela demande pas mal de temps à moins que quelqu’un d'autre ait rencontré exactement le même souci que vous et passe lire votre demande.

  • Like 1
Link to comment
Share on other sites
doekia Community Regular

doekia

Posted
Posted

Dans votre product.js il manque l'initialisation du nombre d'image affichée (à ajuster à vos besoins) 

function serialScrollSetNbImages()
{
        serialScrollNbImagesDisplayed = 4;
        if ($('#thumbs_list').outerWidth(true) < 194)
                serialScrollNbImagesDisplayed = 1;
        else if ($('#thumbs_list').outerWidth(true) < 294)
                serialScrollNbImagesDisplayed = 2;
        else if ($('#thumbs_list').outerWidth(true) < 392)
                serialScrollNbImagesDisplayed = 3;
}

Il manque également la variable global qui sera utilisée ainsi que le recalcul si resize 

var serialScrollNbImagesDisplayed;

  

$(window).resize(function(){
        serialScrollSetNbImages();
        $('#thumbs_list').trigger('goto', 0);
        serialScrollFixLock('', '', '', '', 0);
});

Dès que le plugin jquery est correctement initialisé, tout va mieux

  • Like 1
Link to comment
Share on other sites
  • freds83 changed the title to Problème image produit version mobile [RESOLU]

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
Go to topic listing
×
×
  • Create New...