Edwin Rodriguez Edwin Rodriguez - 2 months ago 14
jQuery Question

Jquery gallery empty/append

Creating a picture gallery with a preview. When I click on one picture it empty's the div, but it does not append the new picture. Am I missing something?

<div class="thumbnails">
<img onmouseover="preview.src=classone.jpg" id="img1" class='pic' src="classone.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=danceshoes.jpg" id="img2" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=lakemonroe.jpg" id="img3" class='pic' src="lakemonroe.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=danceshoes.jpg" id="img4" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=danceshoes.jpg" id="img5" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=dance.jpg" id="img6" class='pic' src="dance.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
<img id="preview" src="classone.jpg" alt="N Image Loaded"/>
</div><br/>





$(document).ready(function(){

$('.pic').click(function(){
$(".preview").remove();

$(".preview").append(this);
});


});

Answer

You need to set the new src instead of removing the preview image element:

 $('.pic').click(function(){
    $("#preview").attr("src",$(this).attr("src")); 
 });