Question

我需要在简单的图库中发生3件事情，在悬停时更改主要大图片，点击（在大图片上），打开模态框。问题是我不知道如何将唯一链接附加到动态加载的图像，这是我到目前为止所拥有的：

jQuery的：

$('#thumbs ul li a').hover(

function() {
    var currentBigImage = $('#bigpic img').attr('src');
    var newBigImage = $(this).attr('href');
    var currentThumbSrc = $(this).attr('rel');
    switchImage(newBigImage, currentBigImage, currentThumbSrc);
}, function() {});

function switchImage(imageHref, currentBigImage, currentThumbSrc) {
    var theBigImage = $('#bigpic img');
    if (imageHref != currentBigImage) {
        theBigImage.fadeOut(250, function() {
            theBigImage.attr('src', imageHref).fadeIn(250);
            var newImageDesc = $("#thumbs ul li a img[src='" + currentThumbSrc + "']").attr('alt');
            $('p#desc').empty().html(newImageDesc);
        });
    }
}

$('#thumbs ul li a').click(function(e) {
    e.preventDefault();
});

HTML：

<div id="thumbs">
    <ul>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring01.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring01_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring01.jpg" alt="Ring 1"/></a></li>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring02.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring02_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring02.jpg" alt="Ring 2"/></a></li>
    </ul>
    <ul>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring07.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring07_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring07.jpg" alt="Ring 7"/></a></li>
        <li><a rel="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring08.jpg" href="http://www.test25.net/prestashop1-gallery/images/rings/large/ring08_L.jpg"><img src="http://www.test25.net/prestashop1-gallery/images/rings/thumbnails/ring08.jpg" alt="Ring 8"/></a></li>
    </ul>
</div>
<div id="bigpic">
    <img src="http://www.test25.net/prestashop1-gallery/images/rings/large/ring01_L.jpg" alt="First Main Image"/>
    <p id="desc">
        Move your mouse over the images on the left to view here...
    </p>
</div>

Demo

Any ideas?

Answer 1

你可以这样做：

function switchImage(imageHref, currentBigImage, currentThumbSrc) {
    var theBigImage = $('#bigpic img');
    if (imageHref != currentBigImage) {
        theBigImage.fadeOut(250, function() {
            theBigImage.attr('src', imageHref).fadeIn(250);
            var newImageDesc = $("#thumbs ul li a img[src='" + currentThumbSrc + "']").attr('alt');
            $('p#desc').empty().html(newImageDesc);
        });
        theBigImage.off('click').on('click', function() {
            alert('open modal box');
        });
    }

}

见.on（）。off（）

图像悬停库与链接

1 个答案: