图像框和自动加载图像

Image lighbox and autoloading image

本文关键字：图像 加载      更新时间：2023-09-26

我正在寻找一种自动加载奥斯瓦尔达斯的图像灯箱插件的方法。

问题是：如何在页面上开始图像灯箱演示？现在，要开始图像查看，我必须单击图像缩略图。

这是我的JS代码：

var selectorG = 'a[data-imagelightbox="g"]';
    var instanceG = $(selectorG).imageLightbox({
    // show nav arrows
    onStart: function() {
    arrowsOn(instanceG, selectorG);
    closeButtonOn(instanceG);
    },
    // hide arrows
    onEnd: function() {
    arrowsOff();
    closeButtonOff();
    },
    // show loading image
    onLoadStart: function() {
    activityIndicatorOn();
    },
    // hide loading image
    onLoadEnd: function() {
    $('.imagelightbox-arrow').css('display', 'block');
    activityIndicatorOff();
    }
    });
/* This will autoload script, but with bug - events and images are cloned
$('a[data-imagelightbox="g"]').trigger('click');
*/

问题是您的代码在属性为 data-imagelightbox="g" 的每个项目上触发一个单击事件。在触发点击事件之前，您必须找到第一个（"a[data-imagelightbox="g"].first（）"https://api.jquery.com/first/）元素。

请尝试以下代码：

$(document).ready(function(){
    $('a[data-imagelightbox="g"]').first().trigger('click');
});
相关文章：