0

私は、データベース内のすべての画像をループしてサムネイルとして表示する漫画の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で、画像を取得して表示します

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

ユーザーは左右の矢印を押して画像間を移動できます...

質問1：Javascriptを使用すると、配列のインデックス位置を手動で設定できますか？

ユーザーが次の画像と最後の画像を取得できるようにしたいので、画像配列の最初からではなく、現在表示されている画像（pagination.phpでクリックした画像）から開始するようにします。URLで$imgidを渡すので、javascript img array index == $ imgidを設定しました。これにより、ユーザーは中断したところから画像をスクロールし続けることができます。

質問2：配列の現在のインデックスを保持するにはどうすればよいですか？

ある方向に行きたいときはうまくいきます。しかし、方向を変えたい場合は、キーを2回押す必要があります。これは、（imgIndex ++）キーを押した後にインデックスがインクリメントされるためであることがわかりました。つまり、逆方向に進み始めたら、最初にデクリメントして現在の画像にインデックスを戻し、次にもう一度キーを押して最後に次の画像を表示する必要があります。これを修正する方法がわかりません。++ imgIndexを使用すると、画像がスキップされるため、問題もあります。

<?php
 getImages() {
//DB connection code omitted
   $img = array();
   while($row = $catResult->fetch_assoc()) {
       $img[] = "'../images/all_comics/" . $row['imgname'] . "'";
}
return $img;
?>

var imgArray = [<?php echo implode(',', getImages()) ?>];
$(document).ready(function() {
    var img = document.getElementById("theImage");
    img.src = imgArray[0];
    var imgIndex = 0;

    $(document).keydown(function (e) 
    {
        //next image
        if (e.which == 39) 
        {
            if (imgIndex == imgArray.length) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex++];
                    //now the index is ahead by 1, which is bad if you want to press <-- to get the last image because the index is ahead by 1.
        }

        //last image
        if (e.which == 37) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }
            img.src = imgArray[--imgIndex];
        }
    });
});

何か案は？

とても有難い！

4

1 に答える 1

1

操作の順序を変更します。

if (e.which == 39) {
    imgIndex++;            
    if (imgIndex>imgArray.length)  {
        imgIndex = 0;
    }
    img.src = imgArray[imgIndex];                
}
于 2012-10-15T20:26:13.293 に答える