1

データベース内のすべての画像をループしてサムネイルとして表示するコミック Web サイトがあります。ユーザーはこれらの画像の 1 つをクリックして、viewComic.php テンプレートで通常のサイズで表示できます。

ユーザーが左右の矢印を押して画像を移動できるようにしたいと思います。

だから、私の考えは：

  1. pagination.php は、データベースの結果配列をループすることにより、(オフセットによって) 正しいページでの画像表示を処理します。ユーザーは結果 (下) をクリックして、viewcomic.php テンプレートの特定の画像に移動できます。

    '<br />IMG: <a href="./templates/viewcomic.php?id=' . $row['imgid'] . '&image=' . $imgpath.$row['imgname'] . '">

  2. これで、viewcomic.php で id と画像を取得し、画像を表示します

    $imgid = $_GET['id']; 
$imgpath = $_GET['image']; 
<center><img src=".<?php echo  $imgpath  ?>" /></center>

ユーザーは左矢印と右矢印を押して画像をナビゲートできます...私の目標は、画像IDを何らかの形で増やして次の画像に移動することでしたが、それは機能していないようです...

    <script type="text/javascript">
        $(document).ready(function() { 
            $(document).keydown(function (e) {
                if (e.which == 39) { //get next image           
                <?php 
                    $count = 0;
                    $count++;
                    echo "<img src=" . $imageArray[$count] . "/>";
                ?> 
                }
            });
        });
    </script>

何か案は？

編集: pagination.php から渡された画像配列を調べます。

そのため、viewcomic.php ファイルで jquery スクリプトを更新しました (上記を参照)。ただし、すべてが php ファイルに含まれているにもかかわらず、jquery は埋め込まれた php を気に入らないようです。

ページ ソースとコードの図を次に示します。

ページのソース

4

3 に答える 3

1

これが私がすることです：

イメージパスが引用符で囲まれていると仮定します。

echo $imageArray[0]; // 'imagepath/image'

脚本：

<script type="text/javascript">
var imgArray = [<?php echo implode(',',$imageArray) ?>];
// now the image array have the list of all your images. 

$(document).ready(function() {
   var img = document.getElementById("theImage");
   imgIndex = 0;
   $(document).keydown(function (e) {
      if (e.which == 39) { //get next image           
         img.src = imgArray[imgIndex++]
      }

      ... /* Logic to check if at the end of imageArray */ ...
   });
});
</script>

HTML:

<center><img src="" id="theImage"/></center>
于 2012-10-11T20:48:18.650 に答える
1

どうですか：

$(document).ready(function() { 
 $(document).keydown(function (e) {
    if (e.which == 39) { 
       var nextId = $_GET['id'] + 1;
       window.location = "./templates/viewcomic.php?id=" + nextId;
    }
 });
});
于 2012-10-11T18:29:10.547 に答える
0

この場合、ページはリクエストごとに送信されます。これはクライアントサイトでも処理できます。

リンクをクリックして、JavaScriptを使用したリンクの回転に関するデモをご覧ください。：JavaScriptを使用したリンク回転

于 2012-10-11T18:52:33.427 に答える