0

<a>ページ内の（）内に画像を含むリンク（）がいくつかあるページが<img>あります。画像がクリックされると、クリックされた画像を示す2列のポップアップが表示されるようにしたいと思います。私の問題は、以下のコードでは最初の画像のみが表示され、2番目の画像がクリックされても何も実行されないことです。それを解決する方法はありますか？前もって感謝します！ギレルモ。

リンクhtml

   <table class="tableHouse">
        <tr align="center" >
            <td>
                <span class="thumbnailTitle">Table</span>
            </td>
            <td>
                <span class="thumbnailTitle">Chair</span>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td>
                <div><a id="thumbnailTitleLink" href="#popup_wrapper" name="table"><img id="imgTable" alt="Table" src="images/house/table_thumb.png"/></a></div>
            </td>
            <td>
                <div><a id="thumbnailTitleLink" href="#popup_wrapper" name="chair"><img id="imgChair" alt="Chair" src="images/house/chair.png"/></a></div>
            </td>
        </tr>
    </table>

次に、ハイパーリンクをクリックすると、左側に箇条書き、右側に次のような画像が表示された2列のポップアップを表示します。

<div id="popup_wrapper" class="popup_wrapper">
    <div class="popup_left_box">
        <div id="tablePopupText" class="popupText">
            <span class="popupTitle">Table</span>
            <ul>
                <li>Description 1</li>
                <li>Description 2</li>
                <li>Description 3</li>
            </ul>
        </div>
        <div id="chairPopupText" class="popupText">
            <span class="popupTitle">Chair</span>
            <ul>
                <li>Description 1</li>
                <li>Description 2</li>
                <li>Description 3</li>
            </ul>
    </div>
</div>

2つの列のCSS

div.popup_wrapper{
    width: 670px;
}

div.popup_left_box{
    float: left;
    padding: 10px;
    width: 310px;
}

div.popup_right_box{
    float: right;
    padding: 10px;
    width: 310px;
}

最後に、魔法を起こさせるためのjsスクリプト

$(document).ready(function () {

    $(".popupText").each(function() {
        $(this).hide();
    });

$(".popupImage").hide();

$("#thumbnailTitleLink").each(function() {
    var name = $(this).attr("name");
    var srcImage = "";
    var altImage = "";

    var img = $(this).find("img"), 
    len = img.length; // check if they exist
    if( len > 0 ){
        // images found, get id
        altImage = img.first().attr("alt");
        srcImage = img.first().attr("src");
    }

    $(this).fancybox({
        hideOnContentClick : false,
        autoScale: false,
        transitionIn : "elastic",
        transitionOut: 'elastic',
        easingIn : 'easeOutCirc',
        overlayColor : "#1e72b1",
        overlayOpacity : .4,
        opacity: false,
        speedIn : 950,
        titleShow: false,
        scrolling: "no",
        orig: img,
        onComplete : function() {
            $(".popupText").each(function() {
                $(this).hide();
            });
            $(".popupImage").show();

            $('#popup_wrapper').show();

            $('#imgPopup').alt = altImage;
            $('#imgPopup').src = srcImage;
            $('#' + name + 'PopupText').show();
        },
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        helpers : {
            title : {
                type : 'inside'
            }
        }
    });
} );

});
4

1 に答える 1

0

最後に、いくつかのエラーがありました。まず、id="thumbnailTitleLink" ではなく、class="thumbnailTitleLink" です。

次に、ここでの回答に見られるいくつかの変更を行いました

于 2012-11-13T04:34:00.100 に答える