1

jQueryで前と次のナビゲーションオプションを使用してフォトビューアーをコーディングしようとしています。前のナビゲーション ボタンを除いて、完全に機能します。「次へ」ボタンを先に押すと「前へ」ボタンが実際に機能するのに、「前へ」ボタンを先に押すと何も起こらないだけでなく、「次へ」ボタンも壊れてしまうので、かなり困惑しています。アイデア??? おそらく初期化の問題だと思います...

jQuery は次のとおりです。

$(function() {
$("a:has(img.gallery_photo)").click(function(event) {
    var showPath = $(this).attr("href");
    var caption = $(this).attr("title");
    var curPhoto = this;
    var nextPhoto = $(this).next();

    if(nextPhoto.length == 0){
        nextPhoto = $("#gallery a:first");
    }

    event.preventDefault();

    // Previous Button
    $("#photo_show a#back").click(function(event) {
        var placeHolder2 = curPhoto;
        event.preventDefault();
        nextPhoto = curPhoto;
        curPhoto = placeHolder2.prev(); 
        if(curPhoto.length == 0){
            curPhoto = $("#gallery a:last");
        }
        $("span#display_photo").html("<img src=\"" + curPhoto.attr("href") + "\" width=\"500\" height=\"350\"/>");
        $("p#caption").html("<p id=\"caption\"><em>" + curPhoto.attr("title") + "</em> </p>");
    });

    // Next Button
    $("#photo_show a#next").click(function(event) {
    var placeHolder = nextPhoto;
        event.preventDefault();
        curPhoto = nextPhoto;
        nextPhoto = placeHolder.next();
        if(nextPhoto.length == 0){
            nextPhoto = $("#gallery a:first");
        }           
        $("span#display_photo").html("<img src=\"" + curPhoto.attr("href") + "\" width=\"500\" height=\"350\"/>");
        $("p#caption").html("<p id=\"caption\"><em>" + curPhoto.attr("title") + "</em></p>");
    });

    $("span#display_photo").html("<img src=\"" + showPath + "\" width=\"500\" height=\"350\"/>");
    $("p#caption").html("<p id=\"caption\"><em>" + caption + "</em></p>");
    $("#photo_show").fadeIn(500);
});
});

HTMLは次のとおりです。

<body>  
<div id="photo_show">
    <table id="photo_nav">
        <tr>
            <td width="10%" align="left"><a id="back" href=""><img src="prev.png" alt="Click for Previous Photo"/></a></td>
            <td width="80%" align="center"><span id="display_photo"><img src="Sample Pictures/Koala.jpg" width="500" height="350"/></span></td>
            <td width="10%" align="right"><a id="next" href=""><img src="next.png" alt="Click for Next Photo"/></a></td>
        </tr>
    </table>
</div>  
<div id="gallery">
    <a href="Sample Pictures/Desert.jpg" title="Desert"><img class="gallery_photo" src="Sample Pictures/Desert.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
    <a href="Sample Pictures/Jellyfish.jpg" title="Jellyfish"><img class="gallery_photo" src="Sample Pictures/Jellyfish.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
    <a href="Sample Pictures/Koala.jpg" title="Koala"><img class="gallery_photo" src="Sample Pictures/Koala.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
</div>      
</body>
4

0 に答える 0