Bonjour,

je vous propose un petit bout de code pour afficher une grande image dans une fenêtre modale (connu aussi sous le nom de lightbox) lors d'un clic sur un visuel d'une fiche produit, comme le font beaucoup de sites informatique.Démo ici :

http://www.amediastore.net/jeux/radio-commande/helicopteres/6407-helicoptere-telecommande-heli-mission-police.html

1. choisir un système de modale - lighbtox
Emajine fonctionne sous jquery, c'est parfait, il nous faut maintenant une libraire qui créé des fenêtres modales. Je vous conseille NyroModal : simple à personnaliser, simple à mettre en oeuvre, se redimensionne automatiquement si la modale est plus grande de base que l'écran.

http://nyromodal.nyrodev.com/

Si vous souhaitez tester d'autres systèmes de fenêtres modales, voici un article sur un comparateur de modales :

http://www.hightech-actu.fr/index.php?post/2009/03/comparatif-lighbox-%3A-Quelle-lightbox-choisir-choisir-pour-son-site

2. Charger la modale dans emajine
Il suffit d'appeler la bibliothèque (que vous aurez préalablement placé dans le dossier /scripts/ via FTP) dans MainPage.html, après l'appel de jquery :





il faudra également appeler le fichier css nyromodal et changer éventuellement les urls vers les images (bouton fermer et image chargement)

3. un peu de modifs dans les templates
la seule chose qu'a besoin nyroModal pour fonctionner, c'est une classe nyromodal sur les liens qui devront ouvrir l'image en grand

donc ajoutez class=nyromodal dans les balises a entourant les images concernées. exemple dans product_produit.html





4. rendre tout ça compatible emajine
il vous suffira de créer un petit script jquery de 5 lignes pour palier à tous les cas de figure :
vous pourrez le placer dans un fichier js à part ou dans la mainpage, au choix :

[Code]
$(document).ready(function() {
$('.nyroModal img').each (function(){
var url=$(this).attr("src");
url=url.replace('thumbnails/','');
$(this).parent().attr("href",url);
});
});
/code]

ce code va aller chercher la grosse image, au cas ou l'image affichée est la miniature, et va correctement mettre le lien direct vers l'image et pas vers une page zoom (comme le font les fiches produit)

Ce dernier code est de moi, c'est une version optimisée du code proposé ici :

http://communaute.medialibs.com/forum/topic-1198.html

Si vous avez des questions n'hésitez pas à me joindre.
Maxime [agence Dysign]

La mise en page a ... planté!

donc voici les codes :

pour le 2 :


pour le 3 :

Ok ... je peux le faire !
(Si un modo passe dans le coin pour arranger tout ça ^^ merci !)

2:
< script type="text/javascript" src="/scripts/jquery.nyroModal.js" >< /script>

3 :
< a id="mainpicture" class="nyroModal" alt="visuel du produit">

5. Pour aller plus loin

Dans les fiches produit emajine ne propose que d'afficher l'image principale en thumbnail ou en grand. Ce que certains comme moi aimeraient c'est avoir cette image en taille moyenne, les visuels supplémentaires en vignette et lorsque l'on clique sur tout ce beau petit monde, avoir un affichag en grand dans la modale.

Pour réduire dynamiquement l'affichage de la grande image de la fiche produit, voici un petit code jquery :

pré requis : dans le template product_produit.html, avoir ajouté un identifiant id="mainpicture" (par exemple)


< a id="mainpicture" class="nyroModal" alt="visuel du produit" >


et ensuite dans un fichier .js ou dans le template de la fiche produit entre des balises script :


$("#mainpicture img").each(function(){
var largeur=$(this).attr("width");
var hauteur=$(this).attr("height");

if (largeur>315) {
// calcul de la nouvelle hauteur (produit en croix. largeur connue et voulue : 315)
var newHauteur=Math.round(315*hauteur/largeur);
$(this).width(315).height(newHauteur);
}

});


mon code va redimensionner automatiquement une image grande en 315px, pour rentrer correctement dans la fiche produit.
Par défaut les images "grandes" sur mon site font 800px. mais elles servent seulement pour l'affichage dans une modale.

Pour ceux que ça intéresse j'ai aussi fait un mini script Photoshop pour redimensionner un pack d'images (et eventuellement incrustation de logo) afin d'importer sur votre catalogue que des images de même taille.

Merci beaucoup pour ces explications fort utiles et qui m'ont permet de gagner du temps dans mon développement de catalogue.

1. choisir un système de modale - lighbtox
Téléchargement du pack de NyroModal => ok

2. Charger la modale dans emajine
Mise en place de la bibliothèque + CSS par FTP et dans le mainPage.html :
[script language="javascript" type="text/javascript" src="/script/jquery.nyroModal-1.6.2.js"]
[/script]
Test avec et sans jQuery appelé au début du [head] et
test avec et sans jQuery appelé juste avant l'appel nyroModal...
Le CSS directement implémenté dans le CSS d'emagine.

3. un peu de modifs dans les templates
Changements comme indiqué :
[a title="Cliquez pour agrandir la photo" id="mainpicture" class="nyroModal"][mx:text id="picture" /][/a]
ou pour tester :
[a mXattribut ="href:href;hreflang:hreflang;" title="Cliquez pour agrandir la photo" id="mainpicture" class="nyroModal"][mx:text id="picture" /][/a]
C'est la même chose...

4. rendre tout ça compatible emajine
Script mis entre les balise [head][/head] de la mainPage.html et testé au dessus des images :
[script type="text/javascript"]
$(document).ready(function() {
$('.nyroModal img').each (function(){
var url=$(this).attr("src");
url=url.replace('thumbnails/','');
$(this).parent().attr("href",url);
});
});
[/script]

Malgré ce tutoriel... rien ne se passe...

Pourriez-vous m'indiquer l'endroit de mon erreur ? SVP

Bonjour,

Pour rappel, il est possible de mettre des morceaux de code source dans vos messages. Pour cela, il suffit de lire les instructions dans la FAQ : Comment présenter du code sur le forum ?.

Sinon, sans nous laisser un exemple de ton intégration, il va être compliqué de pouvoir trouver ton erreur. Obtiens tu un message d'erreur javascript ?

Bonne journée

Jérémie

Je crois qu'il y a une erreur dans le chemin de ton .js, il manque un "s" à "script/" :

<script type="text/javascript" src="/scripts/jquery-nyroModal-pack.js"></script>

et non

<script type="text/javascript" src="/script/jquery-nyroModal-pack.js"></script>

Bien joué ;-)