1

大きな画像と多数のサムネイルが表示されているページがあります。サムネイルの上にマウスを置くと、メイン画像がマウスをロールオーバーしたばかりの画像に変わります。問題は、サムネイルが多いほど、コードが繰り返されることです。どうすればそれを減らすことができますか？

Jqueryコードは次のとおりです。

<script type="text/javascript">  
    $('#thumb1')
.mouseover(function(){  
$('#big_img').fadeOut('slow', function(){  
$('#big_img').attr('src', '0001.jpg');  
$('#big_img').fadeIn('slow');  
            });  
        });  
    $('#thumb2')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', 'p_0002.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb3')  
        .mouseover(function(){  
    $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '_img/p_0003.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb4')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '0004.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
</script>

#big_img=フルサイズの画像のID

#thumb1、、、 =サムネイル#thumb2のID#thumb3#thumb4

ページのメインコードは、それが役立つ場合はPHPです。

4

4 に答える 4

3

$(this)あなたの友達です。また、ファイル名と ID を一致させるために使用できる、ある種の命名法を開発する必要もあります。通常、PHP を使用して HTML を生成しますが、ファイル名を処理する特別な属性を追加します。

// PHP GeneratedContent

<?php

while(/* some range */) {
    $i = 1;
    $output .= '<element class="thumb" rel="p_' . $i . '.jpg">';
    $i++;
}

echo $output;
?>

次に、次のステップに進みます。

$('.thumb').mouseover( function() {
    var link = $(this).attr('rel');

    /* Now that you have the link, just put it into whatever function you need to */
});

Fehays の方法は確かに機能しますが、この方法では、不要な ID が大量に作成されることはなく、不要なパラメーターの転送を行う必要もありません。class を持つDOM内のすべてのインスタンスに自動的に伝播しますthumb。

于 2010-04-02T21:26:02.377 に答える
2

関数を書けばいいと思います。

applyImageFade('#thumb1','0001.jpg');
applyImageFade('#thumb2','p_0002.jpg');
//etc...

function applyImageFade(thumbId, image) {
    $(thumbId).mouseover(function(){
        $('#big_img').fadeOut('slow', function(){
            $('#big_img').attr('src', image);
            $('#big_img').fadeIn('slow');
        });
    });
}
于 2010-04-02T21:20:33.657 に答える
2

まず、各サムネイルが見つけやすい「クラス」を持つようにコードを変更する必要があります。

あなたが持っていると仮定して

<img id="thumb1" scr=""/>
<img id="thumb2" scr=""/>
..

あなたのhtmlは次のようになります

<img id="thumb1" class='thumb' scr=""/>
<img id="thumb2" class='thumb' scr=""/>
..

次に、すべてのサムネイルと対応する大き​​な画像の間に識別可能なパターンがあることを確認する必要があります。あなたのコードには

0001.jpg
p_0002.jpg
_img/p_0003.jpg
0004.jpg

あなたのファイルの組織は何ですか?

ここでは、サムネイルの src がバグの画像と同じであると想像してみましょう。

jQuery コードは次のように縮小されます。

$('.thumb').mouseover(function(){

    var thumb_src = $(this).attr('src');

    // ==> add code here to transform thumb_src into the big_img src

    $('#big_img').fadeOut('slow', function(){
        $('#big_img').attr('src', thumb_src);
        $('#big_img').fadeIn('slow');
    });
});

このコードは機能し、親指の src を大きな画像の src に変換するアルゴリズムを待つだけです。

これがジェローム・ワグナーの助けになることを願っています

于 2010-04-02T21:30:21.853 に答える
0

あなたができる最もクリーンなことは、jQueryを拡張して必要な機能を含めることだと思います：

//random images pulled off of Google Image Search
src1 = "http://www.o3mobi.com/jquery.jpg";
src2 = "http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg";

$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$("#image").click(function () {
    $(this).fadeToSrc(src2, 1000, 4000);
});

ここでテストできます！http://jsfiddle.net/jPYyZ/

======更新=======

マウスオーバー サムネイル/プレビュー システムを実行する場合は、次のようにします。

//HTML
<img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg">
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg">
<img id="fullsized">


//CSS
​.thumbnail {
    width: 5em;
    height: 5em;
}

#fullsized {
    width: 10em;
    height: 10em;
    border: 2px solid red;
}​


//JAVASCRIPT
$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$(".thumbnail").mouseover(function () {
    var newsrc = $(this).attr("src");
    $("#fullsized").fadeToSrc(newsrc, 1000, 1000);
});

ここでこれをテスト/いじることができます: http://jsfiddle.net/AhwH7/

于 2010-04-02T22:02:22.750 に答える