0

私はjavascript、jQueryプールに身を投じようとしており、いくつかの代替ソリューションを見つけましたが、使用している既存のjavascriptでfadeIn/fadeOutを達成できる方法があるかどうかを確認したかった.

現在、次のスクリプトを使用して、メイン エリアの onclick (実際のサイトは onmouseover) で画像を切り替えるのはサムネイルです。

    function switch_product_img(divName, totalImgs) {
        for (var i=1; i<=totalImgs; i++) {
            var showDivName = 'photo_' + i;
            var showObj = document.getElementById(showDivName);
            if (showDivName == divName)
                showObj.style.display = 'block';
            else
                showObj.style.display = 'none';             
            }
        }
    </script>

ここで確認できる基本的なテストがあります: http://www.souldesigngroup.com/client/miguel/editorial/

私はそれを達成するために複数の異なる方法を試し、いくつかの提案を与えられましたが、これまでのところ、それらのどれもどの症状でも機能していません. ですから、どんな考え、提案、解決策も大歓迎です。

代替手段があることはわかっており、そのうちの1つで再構築することに頼るかもしれませんが、これはセットアップされており、フェード以外は完全に機能しています.

助けてくれてありがとう！-ソレン

4

1 に答える 1

1

jQuery を使用して HTML に変更を加えたい場合は、解決策があります。

HTML

<div class="photo" id="photo_1">...</div>
<div class="photo" id="photo_2">...</div>
<div class="photo" id="photo_3">...</div>

<ul class="thumbs">
    <li><a href="#" rel="photo_1"><img src="..." /></a></li>
    <li><a href="#" rel="photo_2"><img src="..." /></a></li>
    <li><a href="#" rel="photo_3"><img src="..." /></a></li>
</ul>

jQuery

$(function() {
    $('ul.thumbs a').click(function() {
        var rel = $(this).attr('rel');
        $('div.photo').fadeOut(500, function() {
            $('div#'+rel).fadeIn(500);
        });
        return false;
    });
});
于 2009-12-08T23:04:39.097 に答える