需要一個正確的方向與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圖庫

回答

相關問題