THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour
J'ai découvert ce matin votre superbe Boutique que je me suis empressé de l'utiliser.
Je vous remercie pour sa simplicité et sa souplesse (et tout ça en français !), un vrai régal !

Pour les besoins d'une boutique en cours j'ai développé un petit bout de code+fichiers pour faire une petite galerie Mootools + Lightbox pour la page produit :

1. télécharger MOOTOOLS - mootool.js >> http://www.mootools.net/
2. télécharger l'extension LIGHTBOX de Phatfusion >> http://www.phatfusion.net/lightbox/
(+ le css et les images associés)
3. intégrer le bout de code suivant dans le head de la page produit.html :

<link href="template/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template/mootools.js"></script>	
<script type="text/javascript" src="template/lightbox.js"></script>

4. ensuite,toujours dans la même page produit.html, à l'endroit où vous souhaitez voir la galerie, insérer ce code :

<THELIA_PROD type="PRODUIT" ref="#PRODUIT_REF">
      <div style="clear:both"> </div>
      <div id="galerie">
        <THELIA_photos type="IMAGE" produit="#ID"  largeur="70">
            <a href="#FICHIER" rel="lightbox[produit]" id="image#ID"><img src="#FICHIER" width="50" height="50"/></a><div class="lightboxDesc image#ID">#TITRE<br />#DESCRIPTION</div>
        </THELIA_photos>
      </div>
      <div style="clear:both"> </div>
      </THELIA_PROD>

      
      <script type="text/javascript">
			window.addEvent('domready',function(){
				Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
			});
      </script>

Et voilà le tour est joué !

Cela affiche les fichiers images en vignette de 50px et puis lorsque l'on clique dessus, on affiche le fichier image dans une lightbox avec navigation s'il y a plusieurs images.

theliament vôtre !

Olivier

Last edited by 123dev (24-01-2008 18:02:41)

Offline


Sauf qu'il faut que toutes tes images soient carrées en forçant ton image en 50X50.
De + cliquer sur une image de 50 pour en avoir une de 70 qui s'ouvre sad ,
j'ai installé lightbox moi aussi mais avec jquery, je fais deux boucles, une pour le lien vers l'image en 650px et une pour la miniature de 120px.

  • manu
  • faï tot petar miladiu

Offline


ben voila présente nous comment tu fais toi aussi ca fera deux fois plus de contributions comme ça :-) ...


http://doc.thelia.net/
http://thelia.net/modules
http://raynaud.io
PGP public Key : 0xC6E546A6

Offline


Ceci dit, pour la taille des images suffit de changer les valeurs, tout simplement.
Et si on veut juste un hauteur ou une largeur (pour le ratio) on vire la balise pas necessaire.

Offline


le wiki est la pour ça:)
n'hésitez pas smile


Save the Documentation of thelia, Save the World !

We're not heroes...

Offline


Faut-il quelque chose de spécifique sur le serveur pour que Lightbox fonctionne ?

Car j'ai suivi le tuto ci-dessus et chez moi, cela ne fonctionne pas : l'image s'ouvre mais sans l'effet désiré.

J'ai aussi essayé ce code :
http://forum.thelia.fr/viewtopic.php?id=1748
mais sans succès ...

Offline


... pour info, je suis chez OVH ... cela change quelque chose ?

Offline


Peut etre voir du coté du DOCTYPE (donc rien à voir avec ton hebergeur)

Offline


Hello virginie22

Est-ce que ton fichier lightbox.css existe et le chemin est bien renseigné dans ce code :

<link href="template/lightbox.css" rel="stylesheet" type="text/css" />

Est-ce que tes fichiers javascript existent et sont bien renseignés dans ce code :

<script type="text/javascript" src="template/mootools.js"></script>    
<script type="text/javascript" src="template/lightbox.js"></script>

Dans ces exemples ils sont dans le fichier template...

++


eriath

Offline


Merci Eriath mais oui, j'ai bien vérifié ces paramètres.

Merci Psai, j'ai vérifié le DOCTYPE et il est OK.

J'ai même été plus loin : si je pointe vers les js et css d'un autre site (je ne dirais pas lequel ;o)), cela fonctionne sur mon site.
Si je télécharge ces mêmes js & css (venant du même site ...) et que je les installe sur mon serveur ... cela ne fonctionne pas

snif snif snif ...

Offline


Et si tu les pointe avec le chemin complet de ton site comme tu l'as fait avec un autre site ?
Si cela fonctionne, c'est tout simplement que tes chemins relatifs sont faux smile

Offline


Super script.

Mes félicitations