Jquery'gallery'interactive results

Question

好吧，所以我刚刚学会了如何使用jquery切换目标div的图像源，但生成的图像加载了一个断开的链接。有一段时间，我甚至没有意识到如何尝试这样做。脚本实际上改变了目标div的图像源的事实是我所追求的，但我不知道它为什么会返回一个破碎的图像。缩略图栏中的一个图像是源内容div中的原始图像，但它也显示为中断。处理这些变化的代码是来自教程的内容，几乎是逐字的。

我已经完成了对这个问题的快速搜索，所有我能找到的似乎都是无关的;我还没有学习任何PHP，所以这可能是一个问题。

HTML：

<table id="thumb_row"> 
    <td><div class="thumb"><img src="../../../Documents/Blacktip-Reef-Shark.jpg" /></div>  </td> 
    <td><div class="thumb"><img src="../about_clicked.png"/></div></td> 
    <td><div class="thumb wide_thumb"><img src="../Web_Teaser_Images/Hyp_1.jpg"></div></td> 

 <div id= "content_bar"><img src="../Web_Teaser_Images/Hyp_1.jpg"/></div> 

CSS：

.thumb{ position: relative; 
    clear:both; 
    background-color:#747474; 
    z-index:201; 
    height: 120px; 
    width: 120px; 
    margin: 5px 5px 5px 5px; 
    opacity: 0; 
    overflow:hidden; 
} 

.thumb img{width: auto; 
     height: 120px; 
     margin: 0px 0px 0px 0px; 
} 

.wide_thumb img{width: auto; 
     height: 120px; 
     margin: 0px 0px 0px -100px; 
} 

#thumb_row {clear:both; 
     margin:665px 0px 0px 0px; 
     position: absolute; 
     z-index: 100; 
     background-color: none; 
     height: auto; 
     width: 100%; 
     float: right; 

的Jquery：

 $(".thumb").click(function(){ 
    var image = $(this).attr('rel'); 
    $('#content_bar').fadeOut("fast"); 
    /*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/ 
    $('#content_bar').html('<img src="'+image+'"/>'); 
    $('#content_bar').fadeIn("fast"); 

    }); 

Answer 1

教程使用rel属性，因为事件处理程序，它使用绑定到.galImg，这是一个相对属性的定位元素：

<a href="#" rel="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" class="galImg"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d_s.jpg" class="thumb" border="0"/></a> 

，你有没有用的类.thumb的div rel属性，所以它最终将图像src设置为undefined。你有.thumb单击事件处理程序应改为去找嵌套图像的src属性，如以下：

$(".thumb").click(function(){ 
    var image = $(this).find('img').attr('src'); // child element src 
    $('#content_bar').fadeOut("fast"); 
    /*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/ 
    $('#content_bar').html('<img src="'+image+'"/>'); 
    $('#content_bar').fadeIn("fast"); 
});