js/php galleryで正しい方向にプッシュする必要があります

イメージギャラリーを作成しようとしています。そのほとんどは意図したとおりに動作していますが、このギャラリーで変更したいものは、次の画像または前の画像をクリックすると、サムネイルに次の8枚の画像が表示されます。現時点では、次の写真を見せてjs/php galleryで正しい方向にプッシュする必要があります

PHPコード：コードが正しく更新1つのサムネイルを示しているが、

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

私は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を使用すると、imgのsrcの配列を取得するために、簡単なGET Ajaxリクエストを作成できます。その後、ギャラリーを初期化することができます。あなたはこの方法で行うことができます

ギャラリー：

は、だから、ID prevまたはnextボタンをクリックして変更、それを持っています。クリックすると、現在の画像と親コンテナが再生成されます。

<!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>

希望、私はあなたを助けたことが解決策を見つけるために：ここで

は、実施例（jQuery）です。

出典

2016-10-11 22:17:13 Neckster

うわー！このため、ありがとう、唯一の問題は、実際にはすべてのコードが何を得るかわからないが、私は病気が最終的にそれを理解すると思う:)とにかく、努力のためにもう一度感謝し、 :) –

問題ありません！私はあなたに何か質問があるとき、あなたを助ける準備ができています。 :) – Neckster

心配しないでm8しかし感謝alot :)私はちょうど誰かがそれを理解せずに書いた何かを使用したくない:)私はjqueryのいくつかのオンラインクラッシュコースを取るつもりだと思う...それはあまりにも長い時間をドラッグしている：P –

js/php galleryで正しい方向にプッシュする必要があります

答えて

関連する問題