圖片庫未將圖片放入div

Question

有一些jQuery的麻煩沒有做我想要的事情。 基本上，當我單擊鏈接時，它將打開一個全屏圖像，但我希望它預載一個圖像，然后在將圖像單擊到單獨的div時進行更新。

謝謝

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

您的js應該正常工作。 問題出在css。

#photo內部的<img>絕對定位，並且由於#photo沒有大小，因此其寬度和高度保持為0。

另外，您的#gallery向左浮動，因此#photo顯示在列表的頂部。

在以下代碼段中，我嘗試解決了這2個問題，將#photo寬度設置為200px，高度設置為150px，並刪除了#gallery ：

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