Lightgallery: Lightslider utilisé avec lightgallery > faire glisser une image ouvre une lightgallery indésirable

Créé le 18 août 2017  ·  3Commentaires  ·  Source: sachinchoolur/lightGallery

J'utilise la combinaison de lightslider et lightgallery. Tout fonctionne comme je le souhaite, sauf lorsque je fais glisser la souris, la galerie s'ouvre. Je pense que cela ne devrait pas arriver, cela devrait seulement faire glisser les images avec la souris.

Je n'arrive pas à résoudre ce problème. Voici le code correspondant :

var allowOtherImageTools = true;

jQuery(function ($)
{
    if ($(".image_tools > li").length > 1)
    {
        var myLightSlider;

        myLightSlider = $(".image_tools").lightSlider({
            item: 1,
            slideMargin: 5, //margin right

            enableDrag: true, //mouse drag
            loop: true, //loop carousel

            pager: false, //small bullets
            gallery: false, //small thumbnails

            enableTouch: true,
            swipeThreshold: 50,
            prevHtml: '<span class="icon icon-left-open">',
            nextHtml: '<span class="icon icon-right-open">',
            onBeforeSlide: function (imageTools)
            {
                allowOtherImageTools = false;
            },
            onAfterSlide: function (imageTools)
            {
                allowOtherImageTools = true;

                .......
            },
            /*
             * Gallery > When slider is loaded the gallery is iniated
             */
            onSliderLoad: function (imageTools)
            {
                var myLightGallery;

                myLightGallery = imageTools.lightGallery(
                        {
                            selector: '.lslide figure img', // custom selector to find content

                            mode: 'lg-slide', // fade mode (slide and fade present, other need additional css file)
                            download: false, // show or hide download button
                            prevHtml: '<span class="icon icon-left-open">',
                            nextHtml: '<span class="icon icon-right-open">',
                            loop: true,
                            //zoom plugin
                            zoom: true,
                            actualSize: true, // back to default size
                            scale: 0.5, // zoom scale
                            hideBarsDelay: 150000, //hide toolbar 15s
                        })

                        // event        object      Jquery event object
                        // prevIndex    int         index of previous slide
                        // index        int         index of the slide
                        // fromTouch    bool        true if slide function called via touch event or mouse drag
                        // fromThumb    bool        true if slide function called via thumbnail click
                        .on('onAfterSlide.lg', function (event, prevIndex, index, fromTouch, fromThumb)
                        {
                            //match slider index
                            myLightSlider.goToSlide(index);
                        })

                        // event        object      Jquery event object
                        .on('onBeforeOpen.lg', function (event) {
                            if (!allowOtherImageTools)
                            {
                                //what should i do here??

                            }
                        });


            }
        });
    }
    //else no image slider needed
});

En guise de solution, j'essaie (et échoue) de ne pas ouvrir la galerie en faisant glisser la souris. J'utilise les événements onBeforeSlide / onAfterslide pour définir un allowOtherImageTools global dans le but d'arrêter l'ouverture de la galerie.

Mes questions

  • Le mousedrag + auto open the gallery est-il une fonctionnalité ou un bug ?
  • Si ce n'est pas un bug : Que dois-je faire dans la fonction anonyme liée à l'événement onBeforeOpen.lg pour empêcher l'ouverture de la galerie ?
picture preliot

Commentaire le plus utile

Correction temporaire :

onBeforeSlide: function (imageTools)
            {
                $('body').addClass('lg-on');
            },
            /*
             * Slider > Replacement text with real sentences
             */
            onAfterSlide: function (imageTools)
            {
                $('body').removeClass('lg-on');
}
}

Fonctionne, car la galerie suppose qu'elle est déjà ouverte. Ceci est un hack, mais garde mon mousedrag!

picture preliot le 22 août 2017
👍4 ❤2 🎉1

Tous les 3 commentaires

Salut @preliot ,
À l'heure actuelle, il n'existe aucun moyen direct de résoudre le problème. Je travaille sur lightSlider version 2.0. Je vais essayer d'inclure le correctif dans la v 2.0.

pour une utilisation actuelle, vous pouvez désactiver enableDrag et enableTouch à partir des paramètres.
http://sachincholur.github.io/lightslider/settings.html

sachinchoolur picture sachinchoolur le 22 août 2017

Correction temporaire :

onBeforeSlide: function (imageTools)
            {
                $('body').addClass('lg-on');
            },
            /*
             * Slider > Replacement text with real sentences
             */
            onAfterSlide: function (imageTools)
            {
                $('body').removeClass('lg-on');
}
}

Fonctionne, car la galerie suppose qu'elle est déjà ouverte. Ceci est un hack, mais garde mon mousedrag!

preliot picture preliot le 22 août 2017
👍4 ❤2 🎉1

Bien que l'utilisation de lightslider soit probablement une meilleure idée, mais comme il est trop tard pour moi de changer, voici ce qui fonctionne pour moi pour tiny-slider

slider.events.on('dragStart', function () {
        setTimeout(function () {
          $('body').addClass('lg-on');
        }, 100);
      });

      slider.events.on('dragEnd', function () {
        $('body').removeClass('lg-on');
      });
Izopi4a picture Izopi4a le 8 févr. 2020
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

Allmedialab picture Allmedialab  ·  6Commentaires
aitormendez picture aitormendez  ·  4Commentaires
MatteoZorro picture MatteoZorro  ·  7Commentaires
ALTELMA picture ALTELMA  ·  4Commentaires
KomalDivate picture KomalDivate  ·  4Commentaires