2

lightSlider のドキュメントの「Integrate with lightGallery」という見出しの下にある例で示されている機能を再現するのに苦労しています (残念ながらパーマリンクはありません): http://sachinchoolur.github.io/lightslider/examples.html

この例で示されている機能は、まさに私のプロジェクトで必要なものです。部分的にしか機能しないコードの私のバージョンは次のとおりです。これらは問題です。

  • 右矢印がありません
  • ゾーンは右方向に制限されていないようで、可視画像を超えて広がっています

  • 画像をクリックして lightGallery を表示した後、右上の X ボタンで閉じることができません。

    <body>
    <ul id="imageGallery">
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
    </ul>
    <script>
        $(document).ready(function() {
            $('#imageGallery').lightSlider({
                gallery:true,
                item:1,
                loop:true,
                thumbItem:9,
                slideMargin:0,
                enableDrag: false,
                currentPagerPosition:'left',
                onSliderLoad: function(el) {
                    el.lightGallery({
                        selector: '#imageGallery .lslide'
                    });
                }   
            });  
        });
    </script>
</body>

4

0 に答える 0