Question

我正在学习网页设计，我对它很陌生。所以请原谅任何无知的问题。我努力创建一个可以与我的MagnificPopUp灯箱库和我的自定义css img悬停效果一起使用的img。执行此操作后，单击img时，它不再创建灯箱库，而是将图像加载到单独的页面中。我无法理解为什么要这样做，我尝试了许多不同的课程，例如＆＃34; image-link＆＃34;但它做同样的事情。

继承我的文件：

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

Answer 1

我在Magnific弹出框库的图片之前添加了一个标签一些标签没有关闭标签和错误链接的js文件

PC：[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>

为什么我的Lightbox图库会在单独的页面中加载imgs？

1 个答案: