MAJ - Zoom des images

Information :

Quels logiciels utiliser ?

Cette mise à jour vous permet d'ajouter un nouveau zoom

Préparatif

Important :

Vous allez dans un premier temps faire une sauvegarde des fichiers header.html et produit.html qui se trouvent dans le dossier html.

Les fichiers sont encodés en UTF-8, n'oubliez pas de configurer votre éditeur de texte.

Mise à jour

produit.html

Remplacez tous les :

class="thickbox"

par le code ci-dessous :

class="lightbox"

header.html

Supprimez

<link rel="stylesheet" href="{W_CSS_PATH}/thickbox.css" type="text/css" media="screen" />

et suprimez

<script type="text/javascript" src="{W_JS_PATH}/thickbox.js"></script>

Puis,

Insérez après :
(Si vous n'avez pas {COMMON_SCRIPT} dans votre fichier, vous devez procéder à cette mise à jour : MAJ - Scripts communs avant de continuer celle-ci : )

	{COMMON_SCRIPT}


le code ci-dessous:

<link rel="stylesheet" href="{W_CSS_PATH_GLOBAL}/jquery.lightbox-min.css" type="text/css" media="screen" />
<script type="text/javascript" src="{W_JS_PATH_GLOBAL}/jquery/jquery.lightbox-min.js"></script>

En suite,

Insérez après

$(document).ready(function(){

le code ci-dessous:

$("a.lightbox").lightBox({fixedNavigation:true});

Enfin

Insérez avant {HEAD_SCRIPT} le code ci-dessous.

<!-- DEBUT PROD -->
<!-- SI PROD.IMG_RAW_WIDTH > 899 ou PROD.IMG_RAW_HEIGHT > 899 -->
<link rel="stylesheet" href="{W_CSS_PATH_GLOBAL}/jqzoom-min.css" type="text/css" media="screen" />
<script type="text/javascript" src="{W_JS_PATH_GLOBAL}/jquery/jquery.jqzoom-min.js"></script>
<script type="text/javascript">
	var imgRaw = '{PROD.IMG_RAW}';
	$(document).ready(function(){	
		var options = {
			zoomWidth: 715,
			zoomHeight: 400,
			xOffset: 5,
			position: "right" 
		};
		$("#principale a").jqzoom(options);
	});
</script>
<!-- FINSI -->
<!-- FIN PROD -->

Pour terminer,

Changez position: "right' en position: "left" si vous voulez faire aparaitre le zoom à gauche de l'image

Remplacez 715 par la largeur en pixel que vous souhaitez avoir.

MAJ - Ajout de contenu dans les catégories et sous-catégories »