需要 js/php 画廊向正确的方向推动

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

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

您可以通过这种方式制作的画廊：

所以您有一个 ID，可以通过单击 prev 或 next 按钮来更改它。单击后重新生成当前图像和缩略图容器。

这是工作示例 (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 画廊向正确的方向推动

need a push in the right direction with js/php gallery

html

javascript

php

jquery

gallery