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

时间：2016-11-08 01:26:44

标签： javascript jquery html css image

我正在学习网页设计，我对它很陌生。所以请原谅任何无知的问题。我努力创建一个可以与我的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>

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题