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选择器初始化featherlite。随意将其更改为您想要的。此函数会构建您的下一个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);

Lightbox Jquery点击下一张图片

1 个答案: