Jump to content

Problème d'affichage de l'image du produit

Silveris
 Share

Recommended Posts

Silveris Newbie

Silveris

Posted
Posted

Bonjour,
je rencontre actuellement un soucis au niveau de l'affichage de l'image de mes produit sur ma boutique en ligne. Je n'ai aucune idée de quoi cela pourrait venir. Quand je clique sur l'image de mon produit ou sur "agrandir l'image", sur certains produits, un "filtre" gris s'applique sur la page (normal), cependant l'image n’apparaît pas. Sur d'autres produits, il n'y a carrément rien qui se passe. Je mets les screenshots en pièce jointe.

 

post-1112834-0-61908500-1445852221_thumb.pngpost-1112834-0-69049600-1445852222_thumb.png

Merci d'avance, Romain.

Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted (edited)

Merci pour votre réponse :)

Oui je pense que le soucis vient d'un template mais lequel ?

EDIT : Après examen de mes templates je pense avoir trouvé celui concerné, et le bloc correspondant, cependant je ne vois aucune erreur.

 

{if $have_image}
	<span id="view_full_size">
		{if $jqZoomEnabled && $have_image && !$content_only}
			<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|esca                      pe:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_                      default')|escape:'html':'UTF-8'}" itemprop="url">
				<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default'                                )|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$                                product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'                                UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>
			</a>
		{else}
			<img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_defa                        ult')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$prod                        uct->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else                        }{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
			{if !$content_only}
				<span class="span_link no-print status-enable">{l s='View larger'}</span>
			{/if}
		{/if}
	</span>
{else}
	<span id="view_full_size">
		<img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->na                me|escape:'html':'UTF-8'}"/>
		{if !$content_only}
			<span class="span_link">
				{l s='View larger'}
			</span>
		{/if}
	</span>
{/if}
Edited by Silveris (see edit history)
Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted (edited)

J'ai regardé dans le product.tpl mais tout m'a l'air normal :/
Je trouve ça assez étrange que lorsque je clique sur l'image pour l'agrandir cela ne fonctionne pas, alors que lorsque je clique sur le petit bandeau "nouveau" au dessus de l'image, celle-ci s'affiche correctement dans la thickbox...

EDIT : L'image est là en back-office et quand j'essaie d'y accéder via son lien elle s'affiche très bien (l'image de la thickbox), elle ne s'affiche juste pas quand je clique sur l'image "large" pour l'agrandir et avoir l'image de la thickbox :/

Merci de votre aide :)

Edited by Silveris (see edit history)
Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted (edited)

L'image s'affiche correctement dans la thickbox chez vous ?
Cela pourrait venir de mon explorateur ? (j'utilise chrome, je vais essayer de voir ce que ça donne avec firefox)

EDIT : En effet je ne rencontre pas non plus de problème avec Firefox, mais sous Chrome ça ne s'affiche toujours pas... Une idée ? :)

Merci encore pour votre aide :)

Edited by Silveris (see edit history)
Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted

Oui en effet ce matin l'image s'affichait trop bas, mais là je ne la vois carrément plus du tout (je suppose qu'elle est affichée mais trop bas pour que je puisse la voir sur mon écran ?)
Une idée de pourquoi cela agit comme ça avec Chrome ?

Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted

Merci pour votre réponse :)
Étonnant tout de même que le js fonctionne bien sous firefox et pas sous chrome :/
Est-ce que vous auriez une idée d'où je pourrais jeter un coup d'oeil ? Une variable à toucher ou quoique ce soit ? (je suppose que cela vient du product.tpl ?)

Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted

En fouillant un peu sur le code de la page j'ai réussi à trouver et à modifier le décalage en fonction de la hauteur :

 

<div class="fancybox-wrap fancybox-desktop fancybox-type-image fancybox-opened" tabindex="-1" style="opacity: 1; overflow: visible; height: auto; width: 821px; position: fixed; top: 715px; left: 20px;"><div class="fancybox-skin" style="padding: 15px; width: auto; height: auto;"><div class="fancybox-outer"><div class="fancybox-inner" style="overflow: visible; width: 791px; height: 791px;"><img class="fancybox-image" src="http://maxwine.fr/img/p/2/6/26-thickbox_default.jpg" alt=""></div></div><div class="fancybox-title fancybox-title-float-wrap"><span class="child">Vin rouge</span></div><a title="Fermer" class="fancybox-item fancybox-close" href="javascript:;"></a></div></div>

En modifiant le "top: 715px;" en 50px mon image s'affiche à la bonne hauteur.
Cependant je n'arrive pas à trouver ou modifier ça dans mes fichiers, si quelqu'un a une idée ? (Impossible de trouver les classes fancybox-desktop, fancybox-type-image et fancybox-opened dans mes .css, je suppose que le soucis vient de là ?)

Link to comment
Share on other sites
Silveris Newbie

Silveris

Posted
  • Author
Posted

Trêve de plaisanteries, je pense avoir trouvé là où la marge en fonction du haut de la page est définie, dans le jquery.fancybox.js :

 

return b});if(f.support.fixedPosition===v){a=f.support;d=f('<div style="position:fixed;top:20px;"></div>').appendTo("body");var e=20===
d[0].offsetTop||15===d[0].offsetTop;d.remove();a.fixedPosition=e}f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(r).width();J.addClass("fancybox-lock-test");d=f(r).width();J.removeClass("fancybox-lock-test");f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

N'y connaissant rien js, je voulais savoir si quelqu'un pouvait m'apporter de l'aide, je pense que la marge est définie ici : "top:20px;" et je ne comprends donc pas pourquoi elle augmente sur Chrome (elle est à 715px) alors qu'elle est bien à 20px sur Firefox.

Merci d'avance :)

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