Prestashop : problème de marge blanche avec JQZoom


JqZoom est une application, basée sur le framework Javascript JQuery, permettant de zoomer sur la photo d’un produit sur la fiche produit (par exemple).
Par le passé, j’ai déjà utilisé JQ Zoom et il est vraiment pas mal ! Il est assez facilement paramétrable, il fonctionne bien… et c’est très agréable !

De base, JqZoom est installé sur Prestashop (du moins, à partir de la version 1.3 de Prestashop).
Pour l’activer ou désactiver JqZoom, aller dans l’interface d’administration de Prestashop > Onglet Préférences > Sous-onglet Produits.

Comment activer ou désactiver JqZoom sur Prestaship

Comment activer ou désactiver JqZoom sur Prestashop

 Problème de marge blanche avec JqZoom sur Prestashop : Comment faire ?

 bug marge blanche Jquery JqZoom

bug marge blanche Jquery JqZoom

Quand est-ce que ce bug a lieu ?

La plupart du temps sur Prestashop.

Pourquoi y a-t’il une marge blanche en Haut et en Bas ?

Cet marge blanche peut être présente sur tous les côtés, selon la taille de l’image zoomée. Si l’image est en mode portrait, alors on aura les marges blanches à gauche et à droite. Si l’image est en mode paysage, les marges seront en haut et en bas. Pour ne pas avoir les marges, il faudrait une image aux dimansions d’un carré.

Pourquoi l’image doit-elle être de forme carrée ?

Sur Prestashop 1.4 (c’est celle que j’utilise actuellement), lorsque l’on survole l’image à zoomer, Prestashop appelle une autre déclinaison de l’image à zoomer !
Cette image est nommée de la façon suivante : http://www. mon_domaine.com/img/p/id_produitid_image-thickbox.jpg (ex : « ./img/p/10-36-thickbox.jpg »)

Or, le format de l’image Thickbox est par défaut de 600 x 600 px.

Parametrage de la taille des images produits dans prestashop

Parametrage de la taille des images produits dans prestashop

2 Solutions :

– Si toutes vos images sources ont toutes les mêmes dimensions et/ou proportions, dans ce cas il est préférable de modifier les dimensions des différentes images qui seront utilisées, et ce via l’interface d’administration (Cf. écran ci-contre).

– Si vos images sont tantôt verticales, tantôt horizontales, il sera préférable d’effectuer la modification de code ci-dessous.

Comment éviter les problèmes de marge blanche avec JqZoom et Prestashop ?

Vos images n’ont pas les mêmes proportions ? Du coup, vous aurez une marge blanche! Pour éviter celà, il faut non plus appeler l’image thickbox ayant une dimension définie, mais appeler l’image originale.
Cette image est nommée de la façon suivante : http://www. mon_domaine.com/img/p/id_produitid_image.jpg (ex : « ./img/p/10-36.jpg »)

Pour cela, ouvrez le fichier product.tpl (/www/themes/mon_theme/product.tpl).

A la ligne 150, vous êtes sensés avoir :

{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" width="{$largeSize.width}" height="{$largeSize.height}" />

à modifier en :

{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, '')}"
{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}"
{/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

On a supprimé le paramètre thickbox du lien généré dans la balise de texte alternatif.

 

ATTENTION : Pensez à supprimer les fichier de cache des templates dans le répertoire ./www/tools/smarty/compile !

Problème JqZoom avec une petite image

Bug JqZoom avec une petite image

NB : Si toutefois votre image originale est plus petite que l’image survolée, alors ça ne sera pas esthétique car d’une part il n’y aura pas de zoom, et d’autre part, le déplacement de la souris ne fera pas déplacer l’image zoomée.

Publicités

À propos de bbgun91

Chef de projets multimédia - Concepteur Intégrateur Multimédia

Publié le 27 juin 2011, dans Prestashop, et tagué , , , , , , , , , , , , , . Bookmarquez ce permalien. 1 Commentaire.

  1. Bonjour, vous m’avez l’air sacrément calé à propos de JQZOOM, je me permet donc de vous poser une question qui n’a pas trouvé de réponse suite à mes différentes recherches.
    Je m’occupe d’une boutique avec un thème personnalisé et j’ai voulu installer la fonctionnalité de zoom. Malheur, il y a bien un zoom mais il reste bloqué sur le coin inférieur droit de l’image, j’arrive à le faire bouger très légèrement quand je met ma souris en haut à gauche de l’image, mais pas plus. Le soucis est au niveau du thème utilisé j’imagine mais… Je n’ai pas plus d’infos.

    Je ne sais pas si l’endroit est bien choisi pour poser ce genre de question (j’en doute même), mais si par miracle une solution existe et que vous la connaissez, faites le moi savoir !

    Excellent travail pour cet article, il est clair est très bien détaillé, pas de bol, pas d’article de ce genre pour mon problème.

    Merci !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :