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

干杯，西普里安

Lightbox没有加载RoyalSlider

1 个答案: