html - Jquery 'gallery' interaction results in broken image links -

OK, so I have recently learned that jquery is used to change the image source of the target division, but as a result The image loads a broken link for a while, I did not even know how to do it. The fact is that the script actually changes the image source of the target diva which is what I do, but I Do not know why this is a broken image One of the images in the thumbnail bar is the original image, which is taken in the main content dish, but it appears to be broken properly. The code that works with the change, is that which came from the tutorial and it is almost a terminology

I have done a quick search for this problem and whatever I am getting is unrelated is; I have not learned any PHP, so that there is a problem.

HTML:

  & lt; Table id = "thumb_row" & gt; & Lt; Td> & Lt; Div class = "thumb" & gt; & Lt; Img src = "../../../ Documents / BlackTips-Reef-Shark .jpg" /> & Lt; / Div & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Div class = "thumb" & gt; & Lt; Img src = "../ about_clicked.png" /> & Lt; / Div & gt; & Lt; / Td> & Lt; Td> & Lt; Div square = "thumbs wide_thumb" & gt; & Lt; Img src = "..// Web_Teaser_images / Hyp_1.jpg" & gt; & Lt; / Div & gt; & Lt; / Td>   
  
  & lt; Div id = "content_bar" & gt; & Lt; Img src = "../web_shadow_image / hyp_1.jpg" /> & Lt; / Div & gt;   
 CSS:  
 . Thumb {status: relative; Clean both; Background color: # 747,474; Z-index: 201; Height: 120px; Width: 120px; Margin: 5px 5px 5px 5px; Opacity: 0; Hidden flurry; }. Thumb IMG {width: auto; Height: 120px; Margin: 0 px 0 px 0 px 0 px; } .wide_thumb img {width: auto; Height: 120px; Margin: 0 px 0 px 0 px-100px; } #thumb_row {Clear: Both; Margin: 665 px 0 px px 0 px; Status: Completed; Z-index: 100; Background color: none; Height: auto; Width: 100%; float right;   
 Jquery:  
  $ ("thumbs"). Click (function () {var image = $ (this) .attr ('rel') ($ '(' # content_bar ') .FadeOut ("sharp") / * This line is swap IMG SRC * / $ ( '# Content_bar') .HTML ('& lt; img src =' '+ image +' '/ /'; '); $ (' # content_bar '). Feedine ("sharp";}); tutorial relay attribute Because it is tied to the event handler used to .galImg.    
 
 < P>, which has an anchor element with a reel feature:  
  & lt; a href = "#" rel = "http://farm1.staticflickr.com/148/369304411_917e112a9d Jpg "class =" GalImg "& gt; & lt; img src =" http: // far M1.staticflickr.com/148/369304411_917e112a9d_s.jpg "square =" thumb "limit =" 0 "/>    
 divs with squares. You do not have rel attribute, so it ends up setting up an undefined image source. ThumbClick Event Handler You should know the source attribute of the nested image, such as in:  
  $ ("Thumbs"). Click (function () {var image = $ (This) .find ('img'). Attr ('src'); // hair element src $ ('# content_bar'). FeedOut ("sharp"); / * This is the line swap IMG SRC * / $ ('# Content_bar'). Html ('& lt; img src = "' + image + '" />;); $ (' # content_bar '). ("fast");});