图片库未将图像放入 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显示在列表顶部。

在下面的代码片段中，我试图修复这两个问题，给出#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>