Discussion :

[pasc06]

Bonjour,

Actuellement j'ai une grande photo avec plusieurs zones réactives sur lesquelles s'ouvrent des pop up classiques.
Mais j'aimerais que quand on clique sur une des zones réactives ça ouvre l'agrandissement correspondant dans la lightbox V2.04.

Voici une des zones réactives telle qu'elle est actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<map name="Map" id="Map">
<area shape="poly" coords="164,2,224,2,224,94,194,95,194,117,162,118"
href="#" onclick="MM_openBrWindow('gallery/image.jpg','','width=400,height=584')" 
alt=""/>
</map>

Voici un lien standard lightbox V2.04 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="gallery/image.jpg" rel="lightbox">
<img src="images/miniature.jpg" width="100" height="130" alt=""/></a>

Evidemment en final il n'y aurait plus de "miniature.jpg" puisque les miniatures sont intégrées dans la grande photo que voici :



Je n'arrive pas à "mélanger" les 2 codes ! J'ai essayé plusieurs solutions mais ça ne fonctionne pas...

Est-ce possible ?

Merci pour votre aide

[emmanuel.remy]

Salut,

Exactement comme pour une balise A: ajoute rel="lightbox" et le bon href dans les balises area concernées.


ERE

[pasc06]

J'ai déjà essayé plusieurs solutions, mais ça ne fonctionne pas. J'ai essayé par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<area shape="poly" coords="164,2,224,2,224,94,194,95,194,117,162,118"
href="/gallery/image.jpg" rel="lightbox" alt=""/>

Quand je clique sur la zone réactive, l'écran se grise, mais la lightbox ne s'affiche pas....

[emmanuel.remy]

Salut,

Cela vient certainement d'un autre souci car voilà le code posé par Lighbox 2.4 pour choisir les liens à gérer:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    //
    // updateImageList()
    // Loops through anchor tags looking for 'lightbox' references and applies onclick
    // events to appropriate links. You can rerun after dynamically adding images w/ajax.
    //
    updateImageList: function() {   
        this.updateImageList = Prototype.emptyFunction;
 
        document.observe('click', (function(event){
            var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
            if (target) {
                event.stop();
                this.start(target);
            }
        }).bind(this));
    }

Donc <area rel="lightbox" ...> devrait fonctionner

ERE

[pasc06]

Bin oui ça devrait mais ça ne fonctionne pô...

Je récapitule :
Actuellement la gallerie fonctionne avec la grande photo, des zones réactives et des pop up classiques. Le problème pour moi est que je veux remplacer les pop up par la lightbox. J'ai un grand nombre de photos sur le site, et il serait plus rapide de gérer la gallerie de cette manière (grande photo/zones réactives) plutôt que d'insérer les miniatures une à une.

Si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="gallery/image.jpg" rel="lightbox">
<img src="images/miniature.jpg" width="100" height="130" alt=""/></a>

Avec une miniature "miniature.jpg" et un agrandissement "image.jpg", la lightbox fonctionne parfaitement !

Mais si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<area shape="poly" coords="164,2,224,2,224,94,194,95,194,117,162,118"
href="/gallery/image.jpg" rel="lightbox" alt=""/>

Avec la grande photo dans laquelle sont insérées les miniatures avec des zones réactives, quand je clique sur la zone réactive, l'écran se grise comme si la lightbox allait s'afficher, mais elle ne s'affiche pas....

En tout cas merci de t'intéresser à mon problème !

[Bovino]

Salut,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="gallery/image.jpg" rel="lightbox">

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<area href="/gallery/image.jpg" rel="lightbox" alt=""/>

Attention, "gallery/image.jpg" n'est pas pareil que "/gallery/image.jpg" !

[pasc06]

Marche toujours pô...

Si je retire le "/" avant gallery et rel="lightbox" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<area href="gallery/image.jpg" alt=""/>

Quand je clique ça m'affiche l'agrandissement. Donc il trouve bien l'image.

Par contre si je rajoute rel="lightbox"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<area href="gallery/image.jpg" rel="lightbox" alt=""/>

Toujours pareil : Ca grise l'écran mais la lightbox ne s'affiche toujours pas...

Mais tu avais raison : Il faut retirer le "/" sinon ça ne trouve pas l'image !

[emmanuel.remy]

Re,

Ton histoire m'a titillé du coup j'ai débuggé sur un cas complet... Remplace dans "lightbox.js" le if ligne 220 par celui-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
        if ($(imageLink).readAttribute("rel") == 'lightbox'){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);
 
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + $(imageLink).readAttribute("rel") + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
 
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
        }

Initialement le code est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (imageLink.rel == 'lightbox'){

or il ne trouve pas l'attribut rel avec cette syntaxe pour une area. Il faut donc passer par un getAttribute ce qu'on fait "proprement" en utilisant prototype mis à notre disposition (suis pas spécialiste de cette librairie, mais readAttribute semble approprié).

Ce n'est pas la première fois que je vois des bugs dans ce script lightbox et je suis assez atterré de constater qu'ils n'ont même pasfait des tests basiques, à savoir sur les deux seuls éléments gérés, A et AREA.

ERE

[pasc06]

Effectivement après avoir modifié "lightbox.js" maintenant ça fonctionne !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<area shape="poly" coords="164,2,224,2,224,94,194,95,194,117,162,118"
href="gallery/image.jpg" rel="lightbox" alt="" />

Je ne risquais pas de trouver par moi-même, étant nul en javascript !

Merci beaucoup !

[greg91]

Pour ceux qui ont le même problème mais avec l'option [roadtrip] pour la galerie d'image, il faut également remplacer la ligne 222 dans le fichier lightbox.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$$(imageLink.tagName + '[href][rel="' + imageLink.readAttribute("rel") + '"]').

le bloc condition devient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
        if ($(imageLink).readAttribute("rel") == 'lightbox'){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.readAttribute("rel") + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
 
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
        }