Ajouter un bouton au DOM avec jQuery

Version imprimable

28/05/2021, 12h00
simoxxx48

1 pièce(s) jointe(s)

Ajouter un bouton au DOM avec jQuery

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

Pièce jointe 598745
28/05/2021, 15h04
mathieu

le lien vers votre site ne fonctionne pas.
29/05/2021, 03h03
simoxxx48

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

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

Merci.
30/05/2021, 19h51
ABCIWEB

Cela ne marche pas chez moi, accès impossible avec ces identifiants.
31/05/2021, 16h14
simoxxx48

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.
31/05/2021, 17h45
Toufik83
Bonjour,

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

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

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:

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:

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:

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

Bonsoir,

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

Code:

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:

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)

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:

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.

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:

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:

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

01/06/2021, 15h56
simoxxx48

La ligne

Code:

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

Renvoie undefined dans la console

Citation:

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.
01/06/2021, 16h25
Toufik83

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

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:

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:

{{$media->id}}

Vous trouverez ci-dessous le code de toute ma page

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

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:

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:

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

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:

e.type : lcl_on_open , index : 0

Code source de ma page

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

Bonjour,

Pourquoi tu modifies le id du bouton avec cette ligne ?
Code:

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:

1 2 let button = $("<button id='btn' class='galleryclient .....'>Sélectionner</button>");
Parce que le id="btn" est utilisé dans :
Code:

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:

1 2 let button = $("<button class='galleryclient .....'>Sélectionner</button>");
Puis modifier le code de click :
Code:

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

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

Code:

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:

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.

10/06/2021, 02h54
Toufik83

Bonjour,

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