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

从缩略图加载图像似乎已被覆盖，但我无法将我的大脑包裹在它周围。这里是我的html其中#sideWall持有大拇指，我想踩苏亚雷斯进入#photoHolder ...单击缩略图并将图像加载到空div中

<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>

这里是我的$。警报（）的返回正确的目录和淡入淡出的工作，像正好没有加载...

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

来源

2012-08-30 Layne

为什么你得到属性'全'而不是'src'？ – manish

完整图像不在同一目录？ –

@immanish'src'是最后一个带有“_t”的单独图像。完整的雷兹版没有“_t”。两者都在同一个目录中。 – Layne

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

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

（常见的实践中） - 拇指具有相同的名称并且位于相同的目录中。那么不需要属性“满”。

来源

2012-08-30 22:34:26

谢谢，这个修复了它。看了这个之后，我仍然不确定我的原始代码在哪里被破坏了？ – Layne

如果您的提醒显示目录，则只有'$ this.attr（'full'）'有问题。 –

是否可以缓存下载的图像？ –

Live example

无需为.each()：

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

来源

2012-08-30 22:34:57

我会尝试这样的事：

$('#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-30 22:36:26 Robyflc

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

回答

相关问题