需要一个正确的方向与js/php图库

我试图创建一个图片库。它大部分是按照预期工作的，但是，我想在这个画廊上改变的事情是，当我点击下一张图片或之前的图片时，我想让缩略图显示下面的8张图片。目前，它显示的下一个画面需要一个正确的方向与js/php图库

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"; 
} 
}

任何想法我如何实现这一目标？

来源

2016-10-11 per källström

我希望我理解你的想法和你想做的事情。无论如何，这是我的建议。起初我想说，建设html标签使用php甚至不是一个好主意。分离代码总是一种更好的方式，而不是进行某种混合。因此，我会建议您仅使用php脚本查找所有图像，并将src数组发送到客户端（格式为JSON）。当你得到一组src时，你可以使用javascript或jQuery来创建一个图库。使用jQuery，您可以创建一个简单的GET Ajax请求，以获取img的src数组。然后你可以启动你的画廊。

你可以通过这种方式使画廊：

所以，你有一个id通过点击prev或next按钮的变化吧。点击重新生成当前图像和大拇指容器后。

这里是工作示例（jQuery）：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Test App</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <div class="galery"> 
 
\t \t <div class="image_wrapper"> 
 
\t \t \t <button class="prev">Prev</button> 
 
\t \t \t <img src="" alt="curr_image" class="curr_image" /> 
 
\t \t \t <button class="next">Next</button> 
 
\t \t </div> 
 
\t \t <div class="thumbs_wrapper"></div> 
 
\t </div> 
 

 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t var fakeSrc = 
 
\t \t \t ['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11']; 
 

 
\t \t \t var cId = 0; 
 

 
\t \t \t var thumbs_wrapper = $('.thumbs_wrapper'); 
 
\t \t \t var curr_image = $('.curr_image'); 
 
\t \t \t var prev = $('.prev'); 
 
\t \t \t var next = $('.next'); 
 
\t \t \t var updateThumbs = function() { 
 
\t \t \t \t var max = ((cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9; 
 
\t \t \t \t thumbs_wrapper.html(''); 
 

 
\t \t \t \t for (var i = cId+1; i < max; ++i) { 
 
\t \t \t \t \t var img = document.createElement('img'); 
 
\t \t \t \t \t img.className = 'thumb_image'; 
 
\t \t \t \t \t var src = fakeSrc[i]; 
 
\t \t \t \t \t img.alt = src; 
 
\t \t \t \t \t img.src = src; 
 

 
\t \t \t \t \t thumbs_wrapper.append(img); 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t var setCurrImg = function() { 
 
\t \t \t \t curr_image.src = fakeSrc[cId]; 
 
\t \t \t \t curr_image.prop('src', fakeSrc[cId]); 
 
\t \t \t \t curr_image.prop('alt', fakeSrc[cId]); 
 
\t \t \t } 
 

 
\t \t \t var updateGalery = function() { 
 
\t \t \t \t setCurrImg(); 
 
\t \t \t \t updateThumbs(); 
 
\t \t \t } 
 

 
\t \t \t prev.click(function() { 
 
\t \t \t \t --cId; 
 
\t \t \t \t if (cId < 0) cId = 0; 
 
\t \t \t \t updateGalery(); 
 
\t \t \t }); 
 

 
\t \t \t next.click(function() { 
 
\t \t \t \t ++cId; 
 
\t \t \t \t if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1; 
 
\t \t \t \t updateGalery(); 
 
\t \t \t }); 
 

 
\t \t \t updateGalery(); 
 
\t \t }); 
 
\t </script> 
 
</body> 
 
</html>

希望，我已经帮你想办法了。

来源

2016-10-11 22:17:13 Neckster

哇！感谢这一点，唯一的问题是我真的不知道所有的代码做什么，但我想最终不知道该怎么办:)无论如何，再次感谢努力，生病尝试捣乱它，以什么一切都做了，等等:) –

没问题！如果您有任何问题，我随时准备为您提供帮助。 :) – Neckster

不用担心m8，但非常感谢:)我只是不想使用别人写的东西而不理解它:)猜我会采取一些在线jquery的在线速成课程...一直拖到现在太久了：P –

需要一个正确的方向与js/php图库

回答

相关问题