Plugin lightbox et fonction live

Version imprimable

23/04/2009, 09h54
erehcab

Plugin lightbox et fonction live
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:

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 ?
24/04/2009, 00h22
danielhagnoul

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 ?
29/04/2009, 14h18
erehcab
Bonjour danielhagnoul, voilà en temps normal comment s'utilise le plugin lightbox.
Code:

1 2 3 4 $(document).ready( function () { $("a.thickbox").lightBox(); });
Je pense donc que le this fait bien rapport au bon élément.
29/04/2009, 16h21
danielhagnoul
Bonjour erehcab.

Pour moi, il s'agit de :
Code:

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 ! :aie:
30/04/2009, 21h50
erehcab

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 ... 8O
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 ....

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:

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:

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>

17/03/2011, 19h21
nothing_atall
Bonjour,

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

Code:

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

tout les clicks sont déjà la.
Code:

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);