IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajouter un bouton au DOM avec jQuery


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut 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

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

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 279
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 279
    Points : 12 847
    Points
    12 847
    Par défaut
    le lien vers votre site ne fonctionne pas.

  3. #3
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    Vous pouvez tester avec ce lien :
    http://mohammedmoussaoui.be/projets/...ies/gallery/71

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

    Merci.

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2010
    Messages
    5 226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : septembre 2010
    Messages : 5 226
    Points : 10 050
    Points
    10 050
    Par défaut
    Cela ne marche pas chez moi, accès impossible avec ces identifiants.

  5. #5
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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.

  6. #6
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    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>");

  7. #7
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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);
            }

  8. #8
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    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)

  9. #9
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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.

  10. #10
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    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);
    	});
    });

  11. #11
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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.

  12. #12
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    Oupss, c'était mon erreur c'est elem_index et pas index_elem.

  13. #13
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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
    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

  14. #14
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    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
                    );
    	});
    });

  15. #15
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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>

  16. #16
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    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(....);
    });

  17. #17
    Membre à l'essai
    Femme Profil pro
    Étudiant
    Inscrit en
    juillet 2019
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 25
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2019
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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.

  18. #18
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 866
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 866
    Points : 3 516
    Points
    3 516
    Par défaut
    Bonjour,

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 25/05/2012, 08h34
  2. Faire du DOM avec jQuery
    Par okoweb dans le forum jQuery
    Réponses: 1
    Dernier message: 31/08/2011, 17h53
  3. Ajouter des boutons avec setParent ?
    Par NiamorH dans le forum Windows
    Réponses: 2
    Dernier message: 18/12/2006, 13h58
  4. [DOM] Ajouter un bouton avec un nouveau style
    Par Mehdi Feki dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/12/2005, 08h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo