灯箱没有调出放大的img，只是白色的盒子

Question

我正在做一个学校项目，我需要创建一个灯箱。以下内容设置为显示包含 href 标记内容的警报。我试图制作一个脚本，该脚本采用 href 属性并将其放入 src 标签中的 lightbox-imgdiv 中，但每次它都会显示为未定义或只是链接到另一个页面。如果需要任何其他信息，请告诉我我真的很想找出我出错的地方。谢谢大家！(我正在测试的是带有可编辑文本项目的第二个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()，并且需要使用将在灯箱中使用的全分辨率图像源填充链接的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>