个人中心
gpt4 book ai didi

javascript - 为什么我的灯箱画廊会在单独的页面中加载 img？

转载 作者：行者123 更新时间：2023-11-28 04:54:48 26 4
gpt4 key购买 nike

我正在学习网页设计并且对它很陌生。所以请原谅任何无知的问题。我努力创建一个可以与我的 MagnificPopUp 灯箱画廊和我的自定义 css img 悬停效果一起使用的 img。这样做之后，当单击 img 时，它不再创建灯箱画廊，而是在单独的页面中加载图像。我不明白为什么要这样做，我尝试过许多不同的类，例如“图像链接”，但它做同样的事情。

这是我的文档:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">

        <!-- Magnific Popup core CSS file -->
        <link rel="stylesheet" href="./dist/jquery.magnific-popup.js">

        <!-- Magnific Popup core CSS file -->
        <link rel="stylesheet" href="./dist/magnific-popup.css"> 

        <!-- Magnific Popup core JS file -->
        <script src="./dist/jquery.magnific-popup.js"></script>



    </head>


    <body>
        <!-- HEADER -->
        <section id="header">

            <h1 class="name">Jessica Shae</h1>


            <div class="container heading">
                <div class="row">

                    <div class="col-md-4 animated rotateInDownLeft">
                        <img src="img/7.jpg" class="display">
                    </div>
                    <div class="col-md-4">
                        <img src="img/2.jpg" class="display">
                    </div>
                    <div class="col-md-4 animated rotateInDownRight">
                        <img src="img/9.jpg" class="display">
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-xs-center">
                            <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

                </div>
            </div>


        </section>

        <!-- Gallery -->

        <section id="gallery">

            <h2 class="title">The Dark Room</h2>

            <div class="container photo-collection wow animated fadeInUpBig">
                <div class="row">

                    <div class="col-md-4 affect">
                        <a class="gallery-item" href="img/3.jpg" title="Title"><img src="img/3.jpg" class="work"></a>
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/10.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/4.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/18.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/6.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/17.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/5.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/11.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/14.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/20.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/13.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/16.jpg" class="work">
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4 affect">
                        <img src="img/1.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/15.jpg" class="work">
                    </div>
                    <div class="col-md-4 affect">
                        <img src="img/12.jpg" class="work">
                    </div>
                </div>

            </div>




        </section>




        <section class="contact-me">
            <div class="contact">
                <h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
            </div>


            <form method="post" action="#" class="contact-form">
                <div class="row">
                    <div class="col span-1-of-3">
                        <label for="name">Name:</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="text" name="name" id="name" placeholder="Your name" required>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label for="email">Email:</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="email" name="email" id="email" placeholder="Your email" required>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label>Drop me a line:</label>
                    </div>
                    <div class="col span-2-of-3">
                        <textarea name="message" placeholder="Your message"></textarea>
                    </div>     
                </div>
                <div class="row">
                    <div class="col span-1-of-3">
                        <label>&nbsp;</label>
                    </div>
                    <div class="col span-2-of-3">
                        <input type="submit" value="Send it!">
                    </div>     
                </div>



                </div>
            </form>
        </section>

    <section class="copywrite">
        <h6>Copywrite &copy; 2016 built by Temple Cerulean Naylor</h6>
    </section>

    <script>
        $(document).ready(function() {

            $('.gallery-item').magnificPopup({
                type: 'image'});

        });
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/wow.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    </body>
</html>

最佳答案

我在 Magnific 弹出框画廊的图像前添加了一个标签一些标签没有结束标签和错误链接的js文件

电脑:[ http://www.jqueryscript.net/demo/Powerful-Multi-Functional-jQuery-Lightbox-Plugin-Magnific-Popup/ 

 $(document).ready(function() {
   $('.popup-gallery').magnificPopup({
     delegate: 'a',
     type: 'image',
     tLoading: 'Loading image #%curr%...',
     mainClass: 'mfp-img-mobile',
     gallery: {
       enabled: true,
       navigateByImgClick: true,
       preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
     },
     image: {
       tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
       titleSrc: function(item) {
         return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
       }
     }
   });
 });
body {
  /*background-color: rgb(0, 0, 0);*/
  background: #070606;
}
/* HEADER */

.display {
  height: auto;
  width: 500px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100%;
  border: 4px solid white;
  border-radius: 6%;
}
.heading {
  max-width: 100%;
}
.name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 500%;
  font-weight: 100;
  text-align: center;
  color: whitesmoke;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 15px;
}
h1:after {
  display: block;
  height: 2px;
  background-color: #e62222;
  /*Great way to give single line color */
  content: " ";
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.fa {
  margin-top: 18px;
}
.fa:link,
/*Prevents color change when clicked */

.fa:visited {
  text-decoration: none;
  color: #bdc3c7;
}
.fa:hover,
.fa:active {
  color: #ebedee;
}
/* GALLERY */

.work {
  width: 300px;
  height: 100%;
  margin-top: 60px;
  margin-bottom: 60px;
  border: 3px solid white;
}
.title {
  font-family: 'Prociono', serif;
  font-size: 350%;
  color: whitesmoke;
  text-align: center;
  padding-top: 40px;
}
.affect img {
  opacity: 0.2;
  background-color: #070606;
  transition: opacity .35s, transform .35s;
  transform: scale(1.0);
}
.affect:hover img {
  opacity: 1;
  transform: scale(1.15);
}
/* CONTACT */

.contact-me {
  background: linear-gradient(to right, black 50%, white 50%);
  overflow-x: hidden;
}
h3 {
  color: white;
  text-align: center;
}
.white {
  color: white;
  font-family: 'Oswald', sans-serif;
  font-size: 240%;
}
.black {
  color: black;
  font-family: 'Oswald', sans-serif;
  font-size: 240%;
}
.contact-form {
  width: 40%;
  margin: 0 auto;
  float: left;
  padding-left: 8%;
  padding-top: 4%;
  padding-bottom: 4%;
}
input[type=text],
input[type=email],
select,
textarea {
  width: 100%;
  padding: 7px;
  border-radius: 3px;
  border: 1px solid #e62222;
}
textarea {
  height: 100px;
}
input[type=submit] {
  background-color: #e62222;
  border: 1px solid #e62222;
  color: #fff;
  margin-right: 15px;
  border-radius: 5px;
}
input[type=submit]:hover,
input[type=submit]:active {
  background-color: #e94141;
}
/* *:focus {outline: none;} */

/* ------Copywrite----- */

.copywrite {
  margin-top: 25px;
  margin-bottom: 25px;
}
.copywrite h6 {
  text-align: center;
  font-size: 150%;
}
.contact-me label {
  padding-bottom: 4px;
  padding-top: 6px;
  color: white;
}
/* -----ANIMATIONS-----*/

.wow {
  visibility: visible;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/demo/Powerful-Multi-Functional-jQuery-Lightbox-Plugin-Magnific-Popup/dist/magnific-popup.css" rel="stylesheet" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Multi-Functional-jQuery-Lightbox-Plugin-Magnific-Popup/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<section id="header">

  <h1 class="name">Jessica Shae</h1>


  <div class="container heading">
    <div class="row">

      <div class="col-md-4 animated rotateInDownLeft">
        <img src="http://www.life.org.uk/dump/media/animal-adaptation-animal-adaptation-800-360.jpg" class="display">
      </div>
      <div class="col-md-4">
        <img src="https://a2ua.com/animal/animal-028.jpg" class="display">
      </div>
      <div class="col-md-4 animated rotateInDownRight">
        <img src="https://a2ua.com/animal/animal-021.jpg" class="display">
      </div>

      <div class="row">
        <div class="col-md-12 text-xs-center">
          <a href="#gallery"><i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

        </div>
      </div>
    </div>
  </div>

</section>

<!-- Gallery -->

<section>

  <h2 class="title">The Dark Room</h2>

  <div class="popup-gallery">

    <div class="row">

      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-021.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-021.jpg" class="work" />
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-020.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-020.jpg" class="work" />
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-019.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-019.jpg" class="work" />
        </a>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-018.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-018.jpg" class="work" />
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-016.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-016.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-017.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-017.jpg" class="work">
        </a>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-015.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-015.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-011.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-011.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-014.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-014.jpg" class="work">
        </a>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-012.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-012.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-013.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-013.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-016.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-016.jpg" class="work">
        </a>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-011.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-011.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-015.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-015.jpg" class="work">
        </a>
      </div>
      <div class="col-md-4 affect">
        <a class="aitem" href="https://a2ua.com/animal/animal-012.jpg" title="Title">
          <img width="75" height="75" src="https://a2ua.com/animal/animal-012.jpg" class="work">
        </a>
      </div>
    </div>

  </div>




</section>




<section class="contact-me">
  <div class="contact">
    <h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
  </div>


  <form method="post" action="#" class="contact-form">
    <div class="row">
      <div class="col span-1-of-3">
        <label for="name">Name:</label>
      </div>
      <div class="col span-2-of-3">
        <input type="text" name="name" id="name" placeholder="Your name" required>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <label for="email">Email:</label>
      </div>
      <div class="col span-2-of-3">
        <input type="email" name="email" id="email" placeholder="Your email" required>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <label>Drop me a line:</label>
      </div>
      <div class="col span-2-of-3">
        <textarea name="message" placeholder="Your message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col span-1-of-3">
        <label>&nbsp;</label>
      </div>
      <div class="col span-2-of-3">
        <input type="submit" value="Send it!">
      </div>
    </div>


  </form>
</section>

<section class="copywrite">
  <h6>Copywrite &copy; 2016 built by Temple Cerulean Naylor</h6>
</section>

关于javascript - 为什么我的灯箱画廊会在单独的页面中加载 img？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40477508/

26 4 0
文章推荐： c++ - 第二次调用函数时出现段错误？
文章推荐： c++ - OpenCV C++ VS2010 : FindContours throws exception
文章推荐： c++ - 通过 Modbus TCP 与 CMMO-ST-C5-1-LKP Festo Controller 进行 Qt/C++ 通信
文章推荐： javascript - jQuery 可以操作不在 DOM 上的 HTML 吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com