Ajouter un bouton au DOM avec jQuery

**simoxxx48** · 28/05/2021, 12h00

Bonjour à tous,

J'utilise le framework LC Lightbox pour afficher des galeries pour un travail d'école, J'aimerais ajouter un bouton personnalisé sur chaque photo mais je ne sais pas comment, (j'ai essayé de l'ajouter en CSS avec :after, mais je ne pouvais pas cibler le bouton en JS par la suite)

Lien du framework :
https://lcweb.it/lc-lightbox
https://lcweb.it/lc-lightbox/documen...section=events

Lien de mon projet :
http://d63961d3dde8.ngrok.io

Nom : ajout boutton personalisé .png
Affichages : 196
Taille : 218,0 Ko

Nom : ajout boutton personalisé .png
Affichages : 196
Taille : 218,0 Ko

**mathieu** · 28/05/2021, 15h04

le lien vers votre site ne fonctionne pas.

**simoxxx48** · 29/05/2021, 03h03

Vous pouvez tester avec ce lien :
http://mohammedmoussaoui.be/projets/...ies/gallery/71

login : client@heaj.be
mot de passe : client

Merci.

**ABCIWEB** · 30/05/2021, 19h51

Cela ne marche pas chez moi, accès impossible avec ces identifiants.

**simoxxx48** · 31/05/2021, 16h14

Pouvez-vous tester avec ces nouveaux accès :
http://mohammedmoussaoui.be/projets/...ies/gallery/71

login : client@heaj.be
mot de passe : user

pour visualiser la page et le slider des images sur le quel je veux ajouter un bouton, il faut aller sur : Mes galeries => choisir une galerie

Merci.

**Toufik83** · 31/05/2021, 17h45

Bonjour,

Utilise les callback (lcl_before_show ou lcl_html_is_ready ou lcl_on_open) et ajoutes cette ligne à l'intérieur.

Code :

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

1
2
 
$("#lcl_contents_wrap").append("<button style='position:absolute;z-index:10;bottom:0;right:0'>Sélectionner</button>");

**simoxxx48** · 31/05/2021, 20h10

Bonjour, je vous remercie pour votre réponse.

J'ai essayé les 3 callback mais y'a aucune qui ajoute le bouton à mon DOM.

Code :

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

1
2
3
lc_lightbox('#lcl_elems_wrapper a').on('lcl_html_is_ready', function(e, opts, vars) {
                $("#lcl_contents_wrap").append("<button class='button button-primary' style='position:absolute;z-index:10;bottom:0;right:0'>Sélectionner</button>");
            });

Code :

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

1
2
3
lc_lightbox('#lcl_elems_wrapper a').on('lcl_on_open', function(e, element, el_index) {
                $("#lcl_contents_wrap").append("<button class='button button-primary' style='position:absolute;z-index:10;bottom:0;right:0'>Sélectionner</button>");
            });

J'ai essayé d'ajouter le code également avec du js mais ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
let wrap = document.querySelectorAll('.lcl_image_elem');
        let div = document.createElement('p');
        div.innerHTML = '<button class="button button-primary" style="position:absolute;z-index:10;bottom:0;right:0">Sélectionner</button>';
        for (let i=0; i<wrap.length; i++)
        {
            wrap[i].appendChild(div);
        }

**Toufik83** · 01/06/2021, 00h34

Bonsoir,

Essaies d'ajouter le callback lors de l'initialisation :

Code :

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

1
2
3
4
5
6
7
8
 
lc_lightbox('.galleryclient__el', {
       .....
      ,html_is_ready :function(opts,vars){
		console.log("html is ready :",", opts :",opts,", vars :",vars);
		$('#lcl_contents_wrap').append("<button class='button button-primary' style='position:absolute;z-index:10;bottom:0;right:0'>Sélectionner</button>");
	}
});

Ou bien avec la syntaxe de chainage :

Code :

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

1
2
3
4
5
6
7
8
 
lc_lightbox('.galleryclient__el', {
       .....
})
.on("lcl_html_is_ready",function(opts,vars){
	console.log("html is ready :",", opts :",opts,", vars :",vars);
	$('#lcl_contents_wrap').append("<button class='button button-primary' style='position:absolute;z-index:10;bottom:0;right:0'>Sélectionner</button>");
});

J'ai utilisé html_is_ready au hasard, tu peux le remplacer par celui qui te convient le plus (liste des callbacks)

**simoxxx48** · 01/06/2021, 13h20

Le bouton s'ajoute bien à la DOM maintenant, le seul problème si j'ai j'ai un seul bouton pour 5 image, j'aimerais intégrer la création de bouton dans une boucle ou quoi pour que chaque image aura un bouton (qui aura comme id l'id de l'image) dans le but de l'a sélectionner ou désélectionner.

Vous trouverez ci dessous la boucle Laravel qui me récupère mes images de la DB.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="galleryclient__liste">
                    @if(count($gallery->media) > 0)
                        @foreach($gallery->media as $media)
                            <a class="galleryclient__el" href="{{ asset('storage/'.$media->link) }}" title="{{ $loop->index+1 ."/". count($gallery->media)}}" data-lcl-txt="{{ $gallery->desc }}" data-lcl-author="{{ $gallery->user->first_name." ".$gallery->user->last_name }}" data-lcl-thumb="{{ asset('storage/'.$media->link) }}">
                                @if($media->selected==1)
                                    <img class="galleryclient__el-img galleryclient__el-img--selected" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @else
                                    <img class="galleryclient__el-img" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @endif
                            </a>
                        @endforeach
                    @endif
                </div>

Un grand merci à vous.

**Toufik83** · 01/06/2021, 14h37

Bonjour,

Pourquoi 5 boutons alors qu'un seul est bien suffisant ?

N'oublis pas que le paramètre vars contient des variables qui pourraient bien te servir, comme par exemple vars.elem_index qui retourne l'index de l'image courante.

Le callback avec la syntaxe de chainage accepte 3 paramètres (e,opts et vars), et seulement 2 lorsqu'on le met à l'intérieur des options.

À chaque fois que tu cliques sur une image pour l'afficher au diaporama, vars.elem_index retourne l'index de l'élément courant :

Code :

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

1
2
3
4
5
 
.on('lcl_html_is_ready',function(e,opts,vars){
	console.log("html ready : l'index de l'image courante est :",vars.elem_index);
	....
});

Ceci dit que tu peux bien récupérer les attributs de l'image courante en utilisant son index avec seulement un bouton :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.on('lcl_html_is_ready',function(e,opts,vars){
	console.log("html ready : l'index de l'image courante est :",vars.elem_index);
	$("#lcl_contents_wrap").append("<button id='btn' .....></button>");
})
.on('lcl_on_open lcl_on_elem_switch',function(e,opts,index){
	console.log("e.type :",e.type,", index :",index);
	$('#lcl_contents_wrap')
	.on('click','#btn',function(){ 
		console.log('l\'index de l\'image courante est :',index,", options :",opts);
	});
});

**simoxxx48** · 01/06/2021, 15h56

La ligne

Code :

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

console.log("html ready : l'index de l'image courante est :",vars.index_elem);

Renvoie undefined dans la console

html ready : l'index de l'image courante est : undefined

Si vous voulez les accès teamviewer pour regarder ça directement dans mon ordi les voici :

ID : 107388351
MDPS : bprvuu11

Merci à vous.

**Toufik83** · 01/06/2021, 16h25

Oupss, c'était mon erreur c'est elem_index et pas index_elem.

**simoxxx48** · 08/06/2021, 13h07

Bonjour,

Avec elem_index il me recupere l'index de la position d'image dans la galerie et non pas son id dans la base de données

Code :

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

1
2
3
let button = $("<button class='galleryclient__el-button button button--blue'>Sélectionner</button>");
                    button.attr('id', vars.elem_index);
                    $('#lcl_contents_wrap').append(button);

Moi je veux qu'il me récupère l'id de l'image dans la base de données

Code :

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

{{$media->id}}

Vous trouverez ci-dessous le code de toute ma page

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
@extends('_layoutClient')
@section('title') Espace Client @endsection
@section('hero')
    <section class="hero hero--profil mb-6">
        <div class="hero-body has-text-centered">
            <p class="title is-capitalized has-text-white is-center">
                {{ $gallery->name }}
            </p>
            {{--<p class="subtitle"> Primary subtitle </p>--}}
        </div>
    </section>
@endsection
@section('content')
    <nav class="level level--galleryclient is-mobile">
        <div class="level-item has-text-centered is-size-7-touch">
            <div>
                <a href="{{ URL::previous() }}">
                    <p class="heading">Retour</p>
                    <i class="fas fa-arrow-left fa-2x"></i>
                </a>
            </div>
        </div>
        <div id="top" class="level-item has-text-centered">
            <div>
                <p class="heading">Sélectionnées</p>
                <p class="title is-size-1-desktop is-size-2-touch">{{ \App\Http\Controllers\MediaController::nombrePhotosSelec($gallery->id) }}/{{ count($gallery->media) }}</p>
            </div>
        </div>
        <div class="level-item has-text-centered is-hidden-touch">
            <div>
                <!-- Si la sélection de galerie est déjà finie -->
                @if($gallery->selection_lock == 1)
                <a href="{{ $gallery->link_zip }}" class="button is-dark">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                    <span>Télécharger la galerie</span>
                </a>
                <!-- Si l'utilisateur n'a pas encore fini de sélectionner le nombre minimum de photos -->
                @elseif(\App\Http\Controllers\MediaController::nombrePhotosSelec($gallery->id) < count($gallery->media))
                <button class="button is-dark" title="Veuillez terminer votre sélection" disabled>
                    <span class="icon">
                      <i class="fas fa-check"></i>
                    </span>
                    <span>Valider la sélection</span>
                </button>
                @else
                <!-- Si l'utilisateur a sélectionné le nombre minimum de photos et que la galerie est prête pour validation -->
                <button class="button is-dark">
                    <span class="icon">
                      <i class="fas fa-check"></i>
                    </span>
                    <span>Valider la sélection</span>
                </button>
                @endif
            </div>
        </div>
    </nav>
    <section class="section section__galleryclient">
        <div class="columns galleryclient">
            <div class="column is-3 is-2-widescreen is-offset-1">
                <div class="galleryclient__miniature card is-shadowless is-transparent">
                    <div class="card-image is-hidden-touch mb-5">
                        @if(count($gallery->media) >0)
                            @foreach($gallery->media as $media)
                                <img class="image is-128x128" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @break
                            @endforeach
                        @else
                            <img class="image is-128x128" src="https://bulma.io/images/placeholders/128x128.png" alt="Pas de miniature">
                        @endif
                    </div>
                    <div class="card-content pl-1 pt-0">
                        <p class="is-size-6">{{ $gallery->name }}</p>
                        <p class="is-size-6 mt-1"><span class="has-text-weight-bold has-text-orange">Photos incluses: </span> {{$gallery->number_photos}}</p>
                        <p class="is-size-6 mt-1"><span class="has-text-weight-bold has-text-orange">Pack actuel: </span>
                            @if($gallery->number_photos <= 20)
                            Starter
                            @elseif($gallery->number_photos >= 20 && $gallery->number_photos <= 40)
                            Zen
                            @else
                            Max
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="galleryclient__liste">
                    @if(count($gallery->media) > 0)
                        @foreach($gallery->media as $media)
                            {{--href 2000x1333      data-lcl-thumb 400 267       backgound image 150x100--}}
                            <a class="galleryclient__el" href="{{ asset('storage/'.$media->link) }}" title="{{ $loop->index+1 ."/". count($gallery->media)}}" data-lcl-txt="{{ $gallery->desc }}" data-lcl-author="{{ $gallery->user->first_name." ".$gallery->user->last_name }}" data-lcl-thumb="{{ asset('storage/'.$media->link) }}">
                                @if($media->selected==1)
                                    <img class="galleryclient__el-img galleryclient__el-img--selected" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @else
                                    <img class="galleryclient__el-img" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @endif
                            </a>
                            {{--<a id="lcl_on_open" href="#" class="galleryclient__el-button button button--blue">
                            <span class="icon">
                              <i class="fas fa-undo-alt"></i>
                            </span>
                                <span>Sélectionner</span>
                            </a>--}}
                        @endforeach
                    @else
                        <div class="is-block">
                            <h1 class="title is-4">Aucune photo n'a été encore ajouté dans cet album</h1>
                            <a href="{{ URL::previous() }}" class="button button--blue">
                            <span class="icon">
                              <i class="fas fa-undo-alt"></i>
                            </span>
                                <span>Retour</span>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
            <a href="#top">
                <i class="icon icon__top fas fa-chevron-up"></i>
            </a>
        </div>
    </section>
@endsection
 
@section('script')
    <!-- LIGHTBOX INITIALIZATION -->
    <script type='text/javascript'>
        "use strict";
        $(document).ready(function(e) {
            // live handler
            lc_lightbox('.galleryclient__el', {
                wrap_class: 'lcl_fade_oc',
                gallery : true,
                thumb_attr: 'data-lcl-thumb',
                skin: 'minimal',
                radius: 0,
                padding	: 0,
                border_w: 0,
                //custom
                cmd_position:'outer',
                fullscreen:true,
                fs_img_behavior:'fit',
                fs_only:false,
                socials:true,
                //txt_toggle_cmd:true,
                download:true,
                touchswipe:true,
                mousewheel:true,
                rclick_prevent:true,
                html_is_ready :function(opts,vars){
                    //console.log("html ready : l'index de l'image courante est :",vars.elem_index);
                    //console.log("html is ready :",", opts :",opts,", vars :",vars);
                    let button = $("<button class='galleryclient__el-button button button--blue'>Sélectionner</button>");
                    button.attr('id', vars.elem_index);
                    $('#lcl_contents_wrap').append(button);
                }
            })
        });
 
        //hide / show go top button
        const btnTop = document.querySelector(".icon__top");
        btnTop.style.display = 'none';
        window.addEventListener("scroll", (e) => {
            let maxScroll = document.body.scrollHeight - window.innerHeight;
            let max = maxScroll-200;
            if(window.scrollY > 400 && window.scrollY < max)
            {
                btnTop.style.display = 'block';
            }
            else
            {
                btnTop.style.display = 'none';
            }
        });
    </script>
@endsection

**Toufik83** · 08/06/2021, 17h53

Bonjour,

Dans ce cas il faut ajouter l'attribut id ou data-id aux images dans la boucle foreach lors de la génération :

Code html :

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

1
2
3
4
 
@foreach($gallery->media as $media)
     <img class="image is-128x128"  data-id="{{$media->id}}" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
@break

Pour qu'en suite tu récupères cet attribut via javascript (dans lcl_on_open et lcl_on_elem_switch et pas ailleurs):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.on('lcl_on_open lcl_on_elem_switch',function(e,opts,index){
	console.log("e.type :",e.type,", index :",index);
	$('#lcl_contents_wrap')
	.on('click','#btn',function(){ 
		console.log(
                     'data-id de l\'image courante est :'+$("#lcl_contents_wrap").find("img.image").eq(index).attr("data-id")
                    +', l\'index de l\'image courante est :',index
                );
	});
});

**simoxxx48** · 09/06/2021, 20h54

Bonsoir,

J'obtiens toujours le même résultat il m'affiche la position de l'image dans la galerie et non son id dans la base de données.

Résultat obtenue

Code :

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

e.type : lcl_on_open , index : 0

Code source de ma page

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
@extends('_layoutClient')
@section('title') Espace Client @endsection
@section('hero')
    <section class="hero hero--profil mb-6">
        <div class="hero-body has-text-centered">
            <p class="title is-capitalized has-text-white is-center is-family-secondary">
                {{ $gallery->name }}
            </p>
            {{--<p class="subtitle"> Primary subtitle </p>--}}
        </div>
    </section>
@endsection
@section('content')
    <nav class="level level--galleryclient is-mobile">
        <div class="level-item has-text-centered is-size-7-touch">
            <div>
                <a href="{{ URL::previous() }}">
                    <p class="heading">Retour</p>
                    <i class="fas fa-arrow-left fa-2x"></i>
                </a>
            </div>
        </div>
        <div id="top" class="level-item has-text-centered">
            <div>
                <p class="heading">Sélectionnées</p>
                <p class="title is-size-1-desktop is-size-2-touch">{{ \App\Http\Controllers\MediaController::nombrePhotosSelec($gallery->id) }}/{{ count($gallery->media) }}</p>
            </div>
        </div>
        <div class="level-item has-text-centered is-hidden-touch">
            <div>
                <!-- Si la sélection de galerie est déjà finie -->
                @if($gallery->selection_lock == 1)
                <a href="{{ $gallery->link_zip }}" class="button is-dark">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                    <span>Télécharger la galerie</span>
                </a>
                <!-- Si l'utilisateur n'a pas encore fini de sélectionner le nombre minimum de photos -->
                @elseif(\App\Http\Controllers\MediaController::nombrePhotosSelec($gallery->id) < count($gallery->media))
                <button class="button is-dark" title="Veuillez terminer votre sélection" disabled>
                    <span class="icon">
                      <i class="fas fa-check"></i>
                    </span>
                    <span>Valider la sélection</span>
                </button>
                @else
                <!-- Si l'utilisateur a sélectionné le nombre minimum de photos et que la galerie est prête pour validation -->
                <button class="button is-dark">
                    <span class="icon">
                      <i class="fas fa-check"></i>
                    </span>
                    <span>Valider la sélection</span>
                </button>
                @endif
            </div>
        </div>
    </nav>
    <section class="section section__galleryclient">
        <div class="columns galleryclient">
            <div class="column is-3 is-2-widescreen is-offset-1">
                <div class="galleryclient__miniature card is-shadowless is-transparent">
                    <div class="card-image is-hidden-touch mb-5">
                        @if(count($gallery->media) >0)
                            @foreach($gallery->media as $media)
                                <img class="image is-128x128" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @break
                            @endforeach
                        @else
                            <img class="image is-128x128" src="https://bulma.io/images/placeholders/128x128.png" alt="Pas de miniature">
                        @endif
                    </div>
                    <div class="card-content pl-1 pt-0">
                        <p class="is-size-6">{{ $gallery->name }}</p>
                        <p class="is-size-6 mt-1"><span class="has-text-weight-bold has-text-orange">Photos incluses: </span> {{$gallery->number_photos}}</p>
                        <p class="is-size-6 mt-1"><span class="has-text-weight-bold has-text-orange">Pack actuel: </span>
                            @if($gallery->number_photos <= 20)
                            Starter
                            @elseif($gallery->number_photos >= 20 && $gallery->number_photos <= 40)
                            Zen
                            @else
                            Max
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="galleryclient__liste">
                    @if(count($gallery->media) > 0)
                        @foreach($gallery->media as $media)
                            {{--href 2000x1333      data-lcl-thumb 400 267       backgound image 150x100--}}
                            <a class="galleryclient__el" href="{{ asset('storage/'.$media->link) }}" title="{{ $loop->index+1 ."/". count($gallery->media)}}" data-lcl-txt="{{ $gallery->desc }}" data-lcl-author="www.pexels.com{{--{{ $gallery->user->first_name." ".$gallery->user->last_name }}--}}" data-lcl-thumb="{{ asset('storage/'.$media->link) }}">
                                @if($media->selected==1)
                                    <img  data-id="{{$media->id}}" class="galleryclient__el-img galleryclient__el-img--selected" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @else
                                    <img  data-id="{{$media->id}}" class="galleryclient__el-img" src="{{ asset('storage/'.$media->link) }}" alt="{{$media->title}}">
                                @endif
                            </a>
                            {{--<a id="lcl_on_open" href="#" class="galleryclient__el-button button button--blue">
                            <span class="icon">
                              <i class="fas fa-undo-alt"></i>
                            </span>
                                <span>Sélectionner</span>
                            </a>--}}
                        @endforeach
                    @else
                        <div class="is-block">
                            <h1 class="title is-4">Aucune photo n'a été encore ajouté dans cet album</h1>
                            <a href="{{ URL::previous() }}" class="button button--blue">
                            <span class="icon">
                              <i class="fas fa-undo-alt"></i>
                            </span>
                                <span>Retour</span>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
            <a href="#top">
                <i class="icon icon__top fas fa-chevron-up"></i>
            </a>
        </div>
    </section>
@endsection
 
@section('script')
    <!-- LIGHTBOX INITIALIZATION -->
    <script>
        "use strict";
        $(document).ready(function(e) {
            // live handler
            lc_lightbox('.galleryclient__el', {
                wrap_class: 'lcl_fade_oc',
                gallery : true,
                thumb_attr: 'data-lcl-thumb',
                skin: 'minimal',
                radius: 0,
                padding	: 0,
                border_w: 0,
                //custom
                cmd_position:'outer',
                fullscreen:true,
                fs_img_behavior:'fit',
                fs_only:false,
                socials:true,
                //txt_toggle_cmd:true,
                download:true,
                touchswipe:true,
                mousewheel:true,
                rclick_prevent:true,
                html_is_ready :function(opts,vars){
                    //console.log("html ready : l'index de l'image courante est :",vars.elem_index);
                    //console.log("html is ready :",", opts :",opts,", vars :",vars);
                    let button = $("<button class='galleryclient__el-button button button--blue'>Sélectionner</button>");
                    //button.attr('id', vars.elem_index);
                    $('#lcl_contents_wrap').append(button);
                }
 
            }).on('lcl_on_open lcl_on_elem_switch',function(e,opts,index){
                console.log("e.type :",e.type,", index :",index);
                $('#lcl_contents_wrap')
                    .on('click','#btn',function(){
                        console.log(
                            'data-id de l\'image courante est :'+$("#lcl_contents_wrap").find("img.image").eq(index).attr("data-id")
                            +', l\'index de l\'image courante est :',index
                        );
                    });
            });
        });
    </script>

**Toufik83** · 09/06/2021, 23h43

Bonjour,

Pourquoi tu modifies le id du bouton avec cette ligne ?

Code :

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

1
2
 
button.attr('id', vars.elem_index);

Il faudrait comprendre un peu ce que tu fais, et attribuer un id bien défini id="btn" au bouton lors de l'ajout :

Code :

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

1
2
 
let button = $("<button id='btn' class='galleryclient .....'>Sélectionner</button>");

Parce que le id="btn" est utilisé dans :

Code :

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

1
2
3
4
5
 
$('#lcl_contents_wrap')
.on('click','#btn',function(){ 
	console.log(......);
});

Ou bien sans id et utiliser seulement la class du bouton :

Code :

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

1
2
 
let button = $("<button class='galleryclient .....'>Sélectionner</button>");

Puis modifier le code de click :

Code :

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

1
2
3
4
5
 
$('#lcl_contents_wrap')
.on('click','button.galleryclient',function(){ 
	console.log(....);
});

**simoxxx48** · 10/06/2021, 02h13

J'ai ajouté un id à mon bouton comme ceci :

Code :

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

let button = $("<button id='btnSelection' class='galleryclient__el-button button button--blue'>Sélectionner</button>");

Et j'ai utilisé la même fonction que vous avez mentionné en haut

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
$(document).ready(function(e) {
            // live handler
            lc_lightbox('.galleryclient__el', {
                wrap_class: 'lcl_fade_oc',
                gallery : true,
                thumb_attr: 'data-lcl-thumb',
                skin: 'minimal',
                radius: 0,
                padding	: 0,
                border_w: 0,
                //custom
                cmd_position:'outer',
                fullscreen:true,
                fs_img_behavior:'fit',
                fs_only:false,
                socials:true,
                //txt_toggle_cmd:true,
                download:true,
                touchswipe:true,
                mousewheel:true,
                rclick_prevent:true,
                html_is_ready :function(opts,vars){
                    //console.log("html ready : l'index de l'image courante est :",vars.elem_index);
                    //console.log("html is ready :",", opts :",opts,", vars :",vars);
                    let button = $("<button id='btnSelection' class='galleryclient__el-button button button--blue'>Sélectionner</button>");
                    //button.attr('id', vars.elem_index);
                    $('#lcl_contents_wrap').append(button);
                }
 
            }).on('lcl_on_open lcl_on_elem_switch',function(e,opts,index){
                $('#lcl_contents_wrap')
                    .on('click','#btnSelection',function(){
                        console.log('data-id de l\'image courante est :'+$("#lcl_contents_wrap").find("img.image").eq(index).attr("data-id")
                            +', l\'index de l\'image courante est :',index
                        );
                    });
            });
        });

Mais dans la console y'a rien qui s'affiche.

**Toufik83** · 10/06/2021, 02h54

Bonjour,

tu fais surement une erreur quelque part, car j'ai testé en local et ça a fonctionné.

Ajouter un bouton au DOM avec jQuery

jQuery

Discussions similaires

Partager

Partager