灯箱未随RoyalSlider一起加载

Question

我正在为此项目使用RoyalSlider和Lightbox.js。 由于某种原因，它无法正常工作-您可以点击图片，该图片会在灯箱中弹出，但图片不会加载。

该网站的有效演示程序为http://bobbyomari.com/clients/opa-只需滚动至页面底部，即可找到一个水平滑块。 如您所见，当您单击图像时，它不是图像。

HTML：

<section id="homeGallery" class="hidden-xs">
    <div id="homeGallerySlider" class="rsDefault">
        <div class="image-set">
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-1.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-2.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-3.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-4.jpg"></a>
        </div>
        <div class="image-set">
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-5.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-6.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-7.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-1.jpg"></a>
        </div>
    </div>
</section>

JavaScript的：

// Home Page Gallery Slider
jQuery(document).ready(function($){
    $('#homeGallerySlider').royalSlider({
        keyboardNavEnabled: false,
        autoScaleSlider: false,
        imageAlignCenter: false,
        imageScalePadding: 0,
        arrowsNav: true,
        arrowsNavAutoHide: false,
        randomizeSlides: false,
        slidesOrientation: 'horizontal',
        usePreloader: false,
        navigateByClick: false,
        slidesSpacing: 0,
        controlNavigation: 'none',
        imageScaleMode: 'none',
        loop: true,
        slideDrag: false
    });
});

Answer 1

做这个：

var slider = $('--element--').data('royalSlider');
    slider.ev.on('rsSlideClick', function (event, originalEvent) {
    //console.log(this);
    $.fancybox( this.currSlide.bigImage );
});

并将--element--替换为滑块。 例如#homeGallerySlider

干杯，干杯