Image gallery not putting image in div

Question

Having trouble with some jquery not doing what i want it to do. Basically when i click the link it opens a full screen image but i want it to preload one and then update when am image is clicked into a separate div .

thanks

HTML:

<div>
    <ul id = "gallery">
        <li> <a href = "images/gallery/wedding/wedding.jpg" width="400" height="300" ><img src="images/gallery/wedding/wedding.jpg" width="200" height="150" /></a> </li>
        <li> <a href = "images/gallery/wedding/wedding1.jpg"width="200" height="150"><img src="images/gallery/wedding/wedding1.jpg" width="200" height="150" /></a> </li>
        <li> <a href = "images/gallery/wedding/wedding2.jpg"width="200" height="150"><img src="images/gallery/wedding/wedding2.jpg" width="200" height="150" /></a> </li>
        <li> <a href = "images/gallery/wedding/wedding3.jpg"width="200" height="150"><img src="images/gallery/wedding/wedding3.jpg" width="200" height="150" /></a> </li>
        <li> <a href = "images/gallery/wedding/wedding4.jpg"width="200" height="150"><img src="images/gallery/wedding/wedding4.jpg" width="200" height="150" /></a> </li>
    </ul>
</div>

<div id = "photo" class = "middle">

</div>

jquery:

<script>
$(document).ready(function() {

$('#gallery img').each(function(i) {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');

$(this).hover(
    function() {
        $(this).attr('src', preloadImage.src);
    },
    function () {
    var currentSource=$(this).attr('src');
        $(this).attr('src', imgFile);
}); // end hover
}); // end each

$('#gallery a').click(function(evt) 
{
    //don't follow link
    evt.preventDefault();
     //get path to new image
    var imgPath = $(this).attr('href');
     //get reference to old image
    var oldImage = $('#photo img');

    //create HTML for new image
    var newImage = $('<img src="' + imgPath +'">');
    //make new image invisible
    newImage.hide();
    //add to the #photo div
    $('#photo').prepend(newImage);
    //fade in new image
    newImage.fadeIn(1000);

    //fade out old image and remove from DOM
    oldImage.fadeOut(1000,function(){
    $(this).remove();
});


}); // end click

    $('#gallery a:first').click();
</script>

CSS:

#photo 
{
margin-left: 150px; 
position: relative;
}
#photo img 
{
position: absolute; 
}

#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted; 
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}

Answer 1

Your js should be working correctly. The problem is with css.

The <img> inside #photo are absolutely positioned, and since #photo doesn't have a size it stays at 0 width and height.

Also your #gallery is floating left so #photo is shown at the top of the list.

In the following snippet I tried to fixed those 2 problems, giving #photo 200px width and 150px height, and removed #gallery floating:

 $(document).ready(function() { $('#gallery img').each(function(i) { var imgFile = $(this).attr('src'); var preloadImage = new Image(); var imgExt = /(\\.\\w{3,4}$)/; preloadImage.src = imgFile.replace(imgExt, '_h$1'); $(this).hover( function() { $(this).attr('src', preloadImage.src); }, function() { var currentSource = $(this).attr('src'); $(this).attr('src', imgFile); }); // end hover }); // end each $('#gallery a').click(function(evt) { //don't follow link evt.preventDefault(); //get path to new image var imgPath = $(this).attr('href'); //get reference to old image var oldImage = $('#photo img'); //create HTML for new image var newImage = $('<img src="' + imgPath + '">'); //make new image invisible newImage.hide(); //add to the #photo div $('#photo').prepend(newImage); //fade in new image newImage.fadeIn(1000); //fade out old image and remove from DOM oldImage.fadeOut(1000, function() { $(this).remove(); }); }); // end click $('#gallery a:first').click(); }); 

 #photo { margin-left: 150px; position: relative; width: 200px; height: 150px; } #photo img { position: absolute; } #gallery { width: 90px; margin-right: 30px; margin-left: 10px; border-right: white 1px dotted; } #gallery img { display: inline-block; margin: 0 0 10px 0; border: 1px solid rgb(0, 0, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul id="gallery"> <li> <a href="images/gallery/wedding/wedding.jpg" target="_blank"> <img src="images/gallery/wedding/wedding.jpg" width="200" height="150" /> </a> </li> <li> <a href="images/gallery/wedding/wedding1.jpg" target="_blank"> <img src="images/gallery/wedding/wedding1.jpg" width="200" height="150" /> </a> </li> <li> <a href="images/gallery/wedding/wedding2.jpg" target="_blank"> <img src="images/gallery/wedding/wedding2.jpg" width="200" height="150" /> </a> </li> <li> <a href="images/gallery/wedding/wedding3.jpg" target="_blank"> <img src="images/gallery/wedding/wedding3.jpg" width="200" height="150" /> </a> </li> <li> <a href="images/gallery/wedding/wedding4.jpg" target="_blank"> <img src="images/gallery/wedding/wedding4.jpg" width="200" height="150" /> </a> </li> </ul> </div> <div id="photo" class="middle"> </div>