Lightgallery: ライトギャラリーで使用されるライトスライダー>画像をドラッグすると不要なライトギャラリーが開きます

作成日 2017年08月18日  ·  3コメント  ·  ソース: sachinchoolur/lightGallery

私はlightsliderとlightgalleryの組み合わせを使用しています。 マウスをドラッグするとギャラリーが開くことを除いて、すべてが希望どおりに機能しています。 これは起こらないはずだと思います。マウスドラッグで画像をスライドさせるだけです。

私はこれを修正できないようです。 これは関連するコードです:

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

修正として、マウスドラッグでギャラリーを開かないようにしようとしています(失敗しています)。 onBeforeSlide / onAfterslideイベントを使用して、ギャラリーのオープンを停止するためにグローバルなallowOtherImageToolsを設定しています。

私の質問

  • マウスドラッグ+ギャラリーの自動オープンは機能またはバグですか?
  • バグでない場合:ギャラリーが開かないようにするには、イベントonBeforeOpen.lgにバインドされた無名関数で何をすべきですか?

最も参考になるコメント

一時的な修正:

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

ギャラリーはすでに開いていると想定しているため、機能します。 これはハックですが、マウスドラッグを続けます!

全てのコメント3件

ねえ@preliot
現在、この問題を直接解決する方法はありません。 私はlightSliderバージョン2.0に取り組んでいます。 v2.0に修正を含めようとします。

現在使用している場合は、設定からenableDragとenableTouchを無効にできます。
http://sachinchoolur.github.io/lightslider/settings.html

一時的な修正:

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

ギャラリーはすでに開いていると想定しているため、機能します。 これはハックですが、マウスドラッグを続けます!

おそらくlightsliderを使用する方が良い考えですが、切り替えるには遅すぎるので、 tiny-slider機能するものを次に示します。

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

      slider.events.on('dragEnd', function () {
        $('body').removeClass('lg-on');
      });
このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

sourav54321 picture sourav54321  ·  6コメント

dreamzsiva picture dreamzsiva  ·  3コメント

andrew--r picture andrew--r  ·  3コメント

KomalDivate picture KomalDivate  ·  4コメント

shamw4r picture shamw4r  ·  5コメント