灯箱不会调出放大的图像，只是白色的盒子

Question

我正在学校项目，我需要创建一个灯箱。设置以下内容以显示带有href标签内容的警报。我试图制作一个脚本，它采用href属性并将其放入src标记中的lightbox-img div中，但每次都会以未定义或仅链接到另一页的方式呈现。如果有任何其他信息需要让我知道我真的想找出我错在哪里。多谢你们！ （一个我一直在测试是与可编辑的文本项目第二TD）

HTML

<div id="gallerySection" > 

    <table align="center" class="thumbs"> 

      <tr> 
       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/Kohli_characterRecreation1.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

       <td> 
        <a href="image/gallery/kohli_editableText3.jpg"> 
         <img src="image/galleryThumbnails/Kohli_editableText3.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/Kohli_frankSinatra.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

      </tr> 

      <tr> 

       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/Kohli_splatter.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/Kohli_valentinesDayCard2.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/Kohli_valentinesDayCard.jpg" width="200px" height="200px" alt=""> 
        </a> 
       </td> 


       <td> 
        <a href=""> 
         <img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt=""> 
        </a> 
       </td> 

      </tr> 

    </table> 

    <div class="lightbox" data-state="hidden"> 

      <div class="lightbox-container"> 
       <div class="lightbox-content"> 
        <img class="lightbox-img" alt=""> 
       </div> 
      </div> 

    </div> 

CSS

table{ 
    margin: 0 auto; 
    margin-top: .5%; 
    width: 60%; 
} 

td{ 
    padding: 2%; 
} 

td img:hover{ 
    transform: rotate(4deg) ; 
    background-color: white; 
    opacity: .7; 
} 

td img{ 
    border: 1px solid #770BE0; 
} 


.lightbox { 
    position:fixed; 
    z-index: 10; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.5); 
    display: none; 
} 

.lightbox-container{ 
    position: absolute; 
    z-index: 10; 
    left: 15%; 
    right: 15%; 
    bottom: 15%; 
    top: 15%; 
    background-color: #FFFFFF; 
    border-radius: 6px; 
    box-shadow: 1px 1 px 4px #000; 
} 
.lightbox-content{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    transform: translate(-50%, -50%); 

} 

.lightbox-img{ 
    display: block; 
    width: 100%; 
} 

.lightbox[data-state="visible"] { 
     display: block; 
} 

jQuery的

<script> 

$(document).ready(function(){ 

    var $thumbs = $('.thumbs'); 
    var $lbImg = $('.lightbox-img'); 
    var $lb = $('.lightbox'); 

    $(".thumbs td").click(function(event) { 

     event.preventDefault(); 
     event.stopPropagation(); 
     alert($(this).filter("[href]").attr('href')); 
     $lbImg.attr("src",content); 
     $lb.attr('data-state', 'visible'); 

    }); 
}); 

</script> 

Answer 1

你想使用$.find()而不是$.filter()，您需要使用您在Lightbox中使用的全幅图像源链接填充链接的href属性。

$(document).ready(function() { 
 

 
    var $thumbs = $('.thumbs'); 
 
    var $lbImg = $('.lightbox-img'); 
 
    var $lb = $('.lightbox'); 
 

 
    $(".thumbs td").click(function(event) { 
 

 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    var content = $(this).find("[href]").attr('href'); 
 
    $lbImg.attr("src", content); 
 
    $lb.attr('data-state', 'visible'); 
 

 
    }); 
 
});

table { 
 
    margin: 0 auto; 
 
    margin-top: .5%; 
 
    width: 60%; 
 
} 
 

 
td { 
 
    padding: 2%; 
 
} 
 

 
td img:hover { 
 
    transform: rotate(4deg); 
 
    background-color: white; 
 
    opacity: .7; 
 
} 
 

 
td img { 
 
    border: 1px solid #770BE0; 
 
} 
 

 
.lightbox { 
 
    position: fixed; 
 
    z-index: 10; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
} 
 

 
.lightbox-container { 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 15%; 
 
    right: 15%; 
 
    bottom: 15%; 
 
    top: 15%; 
 
    background-color: #FFFFFF; 
 
    border-radius: 6px; 
 
    box-shadow: 1px 1 px 4px #000; 
 
} 
 

 
.lightbox-content { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.lightbox-img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.lightbox[data-state="visible"] { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallerySection"> 
 

 
    <table align="center" class="thumbs"> 
 

 
    <tr> 
 
     <td> 
 
     <a href="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
     <td> 
 
     <a href="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg"> 
 
      <img src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/Kohli_frankSinatra.jpg" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
    </tr> 
 

 
    <tr> 
 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/Kohli_splatter.jpg" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/Kohli_valentinesDayCard2.jpg" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/Kohli_valentinesDayCard.jpg" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 

 
     <td> 
 
     <a href=""> 
 
      <img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt=""> 
 
     </a> 
 
     </td> 
 

 
    </tr> 
 

 
    </table> 
 

 
    <div class="lightbox" data-state="hidden"> 
 

 
    <div class="lightbox-container"> 
 
     <div class="lightbox-content"> 
 
     <img class="lightbox-img" alt=""> 
 
     </div> 
 
    </div> 
 

 
    </div>