1

シンプルな画像ギャラリーに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>

</ p>

デモ

Any ideas?
4

1 に答える 1

0

あなたはそのようなことをすることができます：

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（）を参照してください

于 2012-11-02T23:00:21.187 に答える