javascript - 灯箱未加载 RoyalSlider

Question

我在这个元素中使用 RoyalSlider 和 Lightbox.js。由于某种原因，它不起作用 - 您可以单击图像，它会在灯箱中弹出，但图像不会加载。

网站的工作演示是 http://bobbyomari.com/clients/opa -- 只需滚动到页面底部，就会有一个水平 slider 。正如您所看到的，当您单击图像时，它不是图像。

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-- 替换为您的 slider 。例如#homeGallerySlider

干杯，西普里安