Question

我正在尝试创建一个图库。大多数都按预期工作，但是，我想在这个库中更改的是当我点击下一张图片或上一张图片时，我希望缩略图显示下面的8张图片。目前它正在显示下一张图片

PHP代码：

<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
    rsort($pics);
    foreach($pics as $pictures) {
        echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
    }
    echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">&#10094;</div></a>';
    echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">&#10095;</div></a>';
    echo '</div>';
    echo '<div class="thumbs_container">';
    foreach(array_slice($pics, 1) as $thumbs)
        if ($thumb++ < 8){
            echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
        }
    } else {
        echo "Sorry, no images to display!";
    }
    ?>

代码显示1个正确更新的缩略图，但我至少要8个缩略图..

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("Gallery");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 

var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);

function plusThumbs(t){
showThumbs(thumbIndex += t);
}

function showThumbs(t){
    var g;
    var getThumb = document.getElementsByClassName("thumbs");
    if (t > getThumb.length) {thumbIndex = 1}
    if (t < 1) {thumbIndex = getThumb.length};
    for (g = 0; g < getThumb.length; g++){
        getThumb[g].style.display = "none";
    }
getThumb[thumbIndex-1].style.display = "block";
}
}

关于如何实现这一目标的任何想法？

Answer 1

我希望，我理解你的想法以及你想做什么。无论如何，这是我的建议。首先，我想说，使用html构建php标记甚至不是一个好主意。它总是一种更好的方式来分离代码，而不是进行某种混合。因此，我建议您仅使用php脚本查找所有图像并将src数组发送到客户端（采用JSON格式）。获得src数组后，只能使用javascript或jQuery制作图库。使用jQuery，您可以创建一个简单的GET Ajax请求，以获取img的src数组。然后你可以初始化你的画廊。

您可以通过这种方式制作的图库：

通过点击prev或next按钮，您可以更改ID。单击后重新生成当前图像和拇指容器。

以下是工作示例（jQuery）：

<!DOCTYPE html>
<html>
<head>
	<title>Test App</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<div class="galery">
		<div class="image_wrapper">
			<button class="prev">Prev</button>
			<img src="" alt="curr_image" class="curr_image" />
			<button class="next">Next</button>
		</div>
		<div class="thumbs_wrapper"></div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			var fakeSrc = 
			['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11'];

			var cId = 0;

			var thumbs_wrapper = $('.thumbs_wrapper');
			var curr_image = $('.curr_image');
			var prev = $('.prev');
			var next = $('.next');
			var updateThumbs = function() {
				var max = ( (cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9;
				thumbs_wrapper.html('');

				for (var i = cId+1; i < max; ++i) {
					var img = document.createElement('img');
					img.className = 'thumb_image';
					var src = fakeSrc[i];
					img.alt = src;
					img.src = src;

					thumbs_wrapper.append(img);
				}
			}

			var setCurrImg = function() {
				curr_image.src = fakeSrc[cId];
				curr_image.prop('src', fakeSrc[cId]);
				curr_image.prop('alt', fakeSrc[cId]);
			}

			var updateGalery = function() {
				setCurrImg();
				updateThumbs();
			}

			prev.click(function() {
				--cId;
				if (cId < 0) cId = 0;
				updateGalery();
			});

			next.click(function() {
				++cId;
				if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1;
				updateGalery();
			});

			updateGalery();
		});
	</script>
</body>
</html>

希望，我已帮助您找到解决方案。

需要使用js / php gallery

1 个答案: