Question

我有一个页面，其中有几个链接（<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'
            }
        }
    });
} );

});

Answer 1

最后，还有一些错误。首先，它不是id =“thumbnailTitleLink”它的class =“thumbnailTitleLink”。

然后我做了一些改变，可以在我的回答here

中看到

使用FancyBox单击链接时更改弹出窗口的图像

1 个答案: