Question

我有一个页面，我在下面的代码：

<div id="img-wrap">
<a href="images/BIGGEST.JPG" class="MYCLASS" title="MYTITLE">  
    <img src="images/SMALL.JPG" title="IMAGE TITLE">  
</a>
</div>

（比如图片为SMALL.jpg为001-t.jpg，BIGGER.jpg为001.jpg，BIGGEST.jpg为001-b.jpg）

在同一页面上我有一个模态窗口，它有一个相同图像的BIGGER.jpg版本。

<div id="mainImage">
    <img src="images/BIGGER.JPG" /> 
</div>

现在关闭模态窗口我希望实现的是...如果模态窗口在关闭时有002.jpg

<a href="images/BIGGEST.JPG" />

应该是

<a href="images/002-b.JPG" />

和

<img src="images/SMALL.JPG" />

应该是

<img src="images/002.JPG" />

在模态窗口上说动态变化。任何帮助是极大的赞赏。谢谢！

我的尝试是：

$('.window .close, #mask').click(function (e) {
        //Cancel the link behavior
        e.preventDefault(); 
        $('#mask,.window').hide();
        var currentSelection = $("#mainImage").attr("src");
        $(".MYCLASS img").attr("src",currentSelection);
        //alert(currentSelection);
        //var newHref = "images/";
        $('a.MYCLASS').attr("href",currentSelection); 
    });

但哪些无效

Answer 1

在激活模态窗口的.click()函数上，您可以从<a href="" ...><img src="" ... /></a>标记中获取参数并修改模态窗口吗？

例如，您有一个这样的图像：

<a href="images/myimage-big.jpg" class="modal" title="My Image">
    <img src="images/myimage-small.jpg" title="My Image">
</a>

而且，.click()函数可以这样：

$(".modal").click(function(){
    var imageUrl = $(this).attr("href");
    $(".window img").attr("src", imageUrl);
    $('#mask,.window').fadeIn();
});

如何将图像源传递给<a> and <img/> on closing a modal window?</a>

1 个答案: