Lightbox Jquery 点击下一张图片

Question

我正在使用 freewall 和 featherlight 插件的混合物来生成一个打开到灯箱的响应式画廊，但是，我在尝试让灯箱切换到下一个图像 (i + 1) 时遇到以下问题点击。 灯箱图片代码enter image description here。我想要做的是将 img src 更改为 i + 1 以便在点击时转到下一个图像。

我在 Github 上也有这个项目，可能有助于理解：https://github.com/adamianniello/adamianniello.com/blob/master/B%C3%A6b%C3%A6l%C9%99n_Pasadena.html

		<script type="text/javascript">

			var temp = "<div class='brick' style='width:{width}px;'><a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>";
			var w = 1, h = 1, html = '', limitItem = 54;
			for (var i = 0; i < limitItem; ++i) {
				w = 1 + 3 * Math.random() << 0;
				html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1).replace("{link}",i + 1);

			}
			$("#freewall").html(html);

			var wall = new Freewall("#freewall");
			wall.reset({
				selector: '.brick',
				animate: true,
				cellW: 150,
				cellH: 'auto',
				onResize: function() {
					wall.fitWidth();
				}
			});

			var images = wall.container.find('.brick');
			images.find('img').load(function() {
				wall.fitWidth();
			});

<div id="freewall" class="free-wall"></div>

Answer 1

您必须在点击图像时手动触发下一个元素。只需执行以下操作即可

触发羽化显示下一张图像的功能。我假设您使用 .brick a css 选择器初始化了羽毛。随意将其更改为您想要的。这个函数构建你的下一个a标签data-featherlight并在它上面调用featherlight。

function showNextImage(i) {
  $('.brick a').featherlight('i/jpl/' + (((i +1) % (limitItem + 1))) + '.jpg');
}

在您的 div 中添加 onclick 以使用当前 i 调用函数。

var temp = "<div class='brick' style='width:{width}px;' onclick='showNextImage({index})'> <a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>";
        var w = 1, h = 1, html = '', limitItem = 54;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("/\{index\}/g", i + 1).replace("{link}",i + 1);

        }
        $("#freewall").html(html);