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上。

<img>内的#photo位于绝对位置，由于#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>

图片库没有把图像放在div中

1 个答案: