Lightbox V2.04 sur zone réactive

Version imprimable

22/09/2009, 21h35
pasc06

Lightbox V2.04 sur zone réactive
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:

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:

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 :

http://www.comeric.fr/HE2/gallery/galbar.jpg

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
23/09/2009, 00h22
emmanuel.remy

Salut,

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

ERE
23/09/2009, 00h29
pasc06

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

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.... :(

Salut,

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

Code:

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

23/09/2009, 10h01
pasc06

Area
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:

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:

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 !
23/09/2009, 12h31
Bovino

Salut,

Code:

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

Code:

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

Attention, "gallery/image.jpg" n'est pas pareil que "/gallery/image.jpg" !
23/09/2009, 16h44
pasc06

Mais euuuuh !

Marche toujours pô... :(

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

Code:

<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:

<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 !

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:

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:

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. :furieux:

ERE

28/09/2009, 10h34
pasc06

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

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 !

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:

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

le bloc condition devient donc

Code:

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++; }
        }