あなたは大きな画像にトリガー3枚の異なる画像があるかわかります</p> <p>....私は以下のコードを簡素化し、私の一番しようとしているjQueryの

の簡素化、私はあなたがクリック可能なスライドショーとしてそれを呼び出すことができますね。ユーザーが画像をクリックすると、プリロードされた画像を追加したいと思います。あなたは大きな画像にトリガー3枚の異なる画像があるかわかります</p> <p>....私は以下のコードを簡素化し、私の一番しようとしているjQueryの

また、このような2,3,4バッチがあります。私はこれをできるだけ清潔で軽くしたいと思います。

どのような考えですか？

<html> 
<head> 
<style type="text/css" media="screen"> 
#loader.loading { 
    background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center center; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("#ml-games-collection .game1-btn").click(function() { 
     $("#ml-display li.game").removeClass("hide").css("display", "none"); 
     $("#ml-display .game1").show(); 
    }); 

    $("#ml-display .game1-ss1 img").bind("click", function() { 
     $("#ml-display .game1-large-display").attr({ 
      "alt": "img alt 1 - screenshot 1", 
      "src": "image 1" 
     }); 
    }); 
    $("#ml-display .game1-ss2 img").bind("click", function() { 
     $("#ml-display .game1-large-display").attr({ 
      "alt": "img alt 2 - screenshot 1", 
      "src": "image 2" 
     }); 
    }); 
    $("#ml-display .game1-ss3 img").bind("click", function() { 
     $("#ml-display .game1-large-display").attr({ 
      "alt": "img alt 3 - screenshot 1", 
      "src": "image 3" 
     }); 
    }); 



</script> 
</head> 

<body> 
<div class="column span-20 last game" id="ml-display"> 
    <ul style="padding-bottom:0;" class="game-list no-list-style"> 
    <li class="game1 game" style=""> 
    <div id="loader" class="loading"> 
    <img width="500" height="313" alt="img alt 2 - screenshot 1" src="" class="game1-large-display right"> 
     <ul class="screen-shots no-list-style"> 
     <li><a title="" class="game1-ss1 click"><img alt=" Tiny Screen Shot" src=""></a></li> 
     <li><a title="" class="game1-ss2 click"><img alt=" Tiny Screen Shot" src=""></a></li> 
     <li><a title="" class="game1-ss3 click"><img alt=" Tiny Screen Shot" src=""></a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body> 
</html>

出典

2011-11-10 Davis

ので、あなたのjQueryのコードをクリーンアップしたい、それがすべてですか？ –

はい、プリローダーイメージを追加します。 – Davis

別の質問では、プリローダはコードのクリーンアップとは大きく異なり、別の質問には絶対に合うと尋ねるべきです。誰かにコードを書いてもらうと、最高の応答が得られないかもしれませんが、それに取り組んだり質問をしたりすると良いでしょう。プリローダー。 –

ラップあなたのJSになる各画像

<a href="url-of-bigger-picture.jpg" title="text to use for alt"> 
    <img ...> 
</a>

は次に：

$("#ml-games-collection .game1-btn").click(function() { 
    $("#ml-display li.game").removeClass("hide").css("display", "none"); 
    $("#ml-display .game1").show(); 
}); 

$("#ml-display .game1-ss1 .clickable").bind("click", function (event) { 
    var target = $(event.target); 

    $("#ml-display .game1-large-display").attr({ 
     "alt": target.attr("title"), 
     "title": target.attr("title"), 
     "src": target.attr("href") 
    }); 
});

出典

2011-11-10 16:43:56 N3dst4

あなたは大きな画像にトリガー3枚の異なる画像があるかわかります</p> <p>....私は以下のコードを簡素化し、私の一番しようとしているjQueryの

答えて

関連する問題