1

从缩略图加载图像似乎已经令人作呕，但我就是无法将我的大脑包裹在它周围。这是我的html，其中#sideWall 握着拇指，我希望高分辨率进入#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);         
})

确定以防万一（常见实践）-拇指具有相同的名称并且位于同一目录中。那么就不需要属性“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);         
});

不必测试它，但它应该可以工作。请注意，我将 attr 'full' 更改为 'data-full' 以使其 HTML5 有效。

于 2012-08-30T22:36:26.523 回答