Question

从缩略图中加载图像似乎已被掩盖了，但我无法将大脑包裹起来。这是我的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);         
    })
});

Answer 1

我认为，解决方案可以更简单地完成：

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

确保（普通实践） - 拇指具有相同的名称并且位于同一目录中。那么就不需要属性“完整”。

Answer 2

<强> Live example

无需.each()：

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

Answer 3

我会尝试这样的事情：

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

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

单击缩略图并将图像加载到空div中

3 个答案: