1

サムネイルからの画像の読み込みは、うんざりするほどカバーされているようですが、脳を包み込むことができません。これが私のhtmlで、＃sideWallが親指を保持し、hi-rezを#photoHolderに入れたいです...

<div id="graphicContainer">
<div id="sideWall">
    <span class="sideHead">EXHIBITS</span><br/>
    <span class="sideChatter">Click an image to learn more.</span><br/>
    <img src="images/frisco4501_t.jpg" full="frisco4501.jpg" />
    <img src="images/centennial_t.jpg" full="centennial.jpg" />
    <!--     etc...     -->
</div> <!--End of sidewall-->
<div id="photoHolder"></div>

これが私の$です。alert（）が正しいディレクトリを返し、フェードが機能していますが、画像が読み込まれていません...

$('#sideWall img').each(function(){
    $this = $(this);
    $image = "../images/"+$this.attr('full');
    $this.click(function(){
        alert($image);
        $("#photoHolder").html('<img src="'+$image +'" />');
        $("#photoHolder").fadeIn(2000);         
    })
});
4

3 に答える 3

3

私は、解決策はもっと簡単にできると思います：

$('#sideWall img').click(function(){
  var c = $(this).attr("src").replace('_t.','.');
  $("#photoHolder").html('<img src="'+ c +'" />');
  $("#photoHolder").fadeIn(2000);         
})

（一般的な実践の）場合に備えて-thumbは同じ名前で、同じディレクトリにあります。その場合、属性「full」は必要ありません。

于 2012-08-30T22:34:26.683 に答える
1

の必要はありません.each()。jQueryはすぐにコレクションを処理します。
また、HTML5data-*属性を使用して、より大きな画像のsrc文字列を保存します。

$('#sideWall').on('click', '[data-src2x]', function() {
  const src2x = $(this).data('src2x');
  $("#photoHolder").hide().html(`<img src="${src2x}">`).fadeIn();         
});
<div id="graphicContainer">

  <div id="sideWall">
      <h4 class="sideHead">EXHIBITS</h4>
      <p class="sideChatter">Click an image to learn more.</p>
      <img src="http://placehold.it/100x50/cf5" data-src2x="http://placehold.it/200x100/cf5" />
      <img src="http://placehold.it/100x50/f0f" data-src2x="http://placehold.it/200x100/f0f" />
  </div>
  
  <div id="photoHolder"></div>
  
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

于 2012-08-30T22:34:57.070 に答える
0

私はこのようなことを試みます：

$('#sideWall img').click(function(){
    $image = "../images/"+$(this).attr('data-full');
    alert($image);
    $("#photoHolder").html('<img src="'+$image +'" />').fadeIn(2000);         
});

テストする必要はありませんでしたが、動作するはずです。HTML5を有効にするために、attr'full'を'data-full'に変更したことに注意してください。

于 2012-08-30T22:36:26.523 に答える