Plugin lightbox et fonction live

**erehcab** · 23/04/2009, 09h54

Bonjour à tous,

Je viens de découvrir la fonction live (merci danielhagnoul) et j'aimerai l'appliquer à l'utilisation du plugin lightbox (version 0.3). Voilà ce que j''ai fait pour le moment :

Code :

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

1
2
3
4
5
6
 
$(document).ready( function () {
	$("a.thickbox").live("click", function () {
		$(this).lightBox();
	});
});

Malheureusement ça ne fonctionne pas ... Quelqu'un aurait t'il une idée de la syntaxe à utiliser pour faire fonctionner lightbox avec live ?

**danielhagnoul** · 24/04/2009, 00h22

Bonsoir erehcab.

Ici this se réfère au lien de class thickbox, est-ce bien normal ? La division à animé ne porte t'elle pas un autre nom ?

**erehcab** · 29/04/2009, 14h18

Bonjour danielhagnoul, voilà en temps normal comment s'utilise le plugin lightbox.

Code :

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

1
2
3
4
 
$(document).ready( function () {
	$("a.thickbox").lightBox();
});

Je pense donc que le this fait bien rapport au bon élément.

**danielhagnoul** · 29/04/2009, 16h21

Bonjour erehcab.

Pour moi, il s'agit de :

Code :

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

1
2
3
4
5
6
 
jquery.lightbox-0.5.js
 
http://leandrovieira.com/projects/jquery/lightbox/
 
$('#gallery a').lightBox();

Il est impossible d'apporter une aide valable sur si peu de code !

**erehcab** · 30/04/2009, 21h50

Bonsoir,

La syntaxe que tu as écrites est celle que j'utilise fonctionnent toutes les deux. Mais si tu essaies de t'en servir avec live tu vas voir, ça bug ...

Etant donné que je gère une bibliothèque multimédia et qu'il y à beaucoup de photos, j'ai créé une pagination mais avec ajax. D'ou l'utilisation de live, parce que autrement ça fonctionne au chargement de la page pour les n premières images mais dès que je passe à la seconde page plus rien ....

**danielhagnoul** · 01/05/2009, 00h15

Bonsoir.

live ou pas, ce n'est pas la qu'est le problème !

$("#gallery a").lightBox(); c'est uniquement pour mettre en place la gallery.

Pour déclencher le diaporama, il faut toujours cliquer sur une image, ici avec $("#goGallery").click();

Code :

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

1
2
3
4
5
6
7
8
 
        $(document).ready(function(){ 
            $("#gallery a").lightBox();
 
            $("#go").live("click", function(){
                $("#goGallery").click();
            });
        });

goGallery est ici l'id attribué au lien de la première photo, voir exemple complet :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Test Lightbox</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
 
        /* jQuery lightBox plugin - Gallery style */
        #gallery {
            background-color: #444;
            padding: 10px;
            width: 520px;
        }
        #gallery ul { list-style: none; }
        #gallery ul li { display: inline; }
        #gallery ul img {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
        }
        #gallery ul a:hover img {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        #gallery ul a:hover { color: #fff; }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            $("#gallery a").lightBox();
 
            $("#go").live("click", function(){
                $("#goGallery").click();
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="go" type="button">OK</button>
        <div id="gallery">
            <ul>
                <li>
                    <a id="goGallery" href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                        <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
                    </a>
                </li>
                <li>
                    <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                        <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
                    </a>
                </li>
                <li>
                    <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                        <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
                    </a>
                </li>
                <li>
                    <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                        <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
                    </a>
                </li>
                <li>
                    <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                        <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

**nothing_atall** · 17/03/2011, 19h21

Bonjour,

#1 danielhagnoul
lightBox crée ses propres click. Donc, non il ne faut pas ajouter de click sur un objet. En utilisant

Code :

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

$("#gallery a").lightBox();

tout les clicks sont déjà la.

Code :

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

1
2
3
4
5
6
#2
erehcab
change la ligne (#470)
return this.unbind('click').click(_initialize);
pour 
return this.die('click').live('click',_initialize);

Plugin lightbox et fonction live

jQuery

Discussions similaires

Partager

Partager