javascript - 灯箱不调出放大的 img，只是白色框

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;
}

查询

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