0

我有一个页面，其中包含几个链接 ( <a>)，页面中包含 ( ) 内的图像<img>。我希望在单击图像时出现两列弹出窗口，显示单击的图像。我的问题是，下面的代码只显示了第一张图片，点击第二张图片时它什么也没做。任何想法如何解决它？提前致谢！吉列尔莫。

链接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>

然后，当单击超链接时，我想显示一个两列弹出窗口，左侧是项目符号，右侧是图像，如下所示：

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

两列的 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 回答