CODEWITHSUNDEEP
htmlcssmagnific-popup
user3155730
user3155730

Reputation:

magnific popup gallery not popping up

I am trying to make a gallery on my webpage using magnific popup but I can't get the image to show up in a popup it only shows up in a separate tab. How can I get it to show up in gallery view and enabled cycling through all the images in the web page's gallery? In addition, how can I change the size of the lightbox being displayed and the size of the thumbnail.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="magnific-popup/magnific-popup.css">

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

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="css/style.css">

  <style type="text/css">

    .modal-dialog {}
.thumbnail {margin-bottom:6px; height: 280px;}

.carousel-control.left,.carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}

#open-popup {padding:20px}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

  </style>

  <script type="text/javascript">

    $(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});

  $('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

});




  </script>
    </head>

    <body>
                <div id="main" role="main">
            <br />
                    <br />
        <br />

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>


                    </body>
</html>

Upvotes: 1

Views: 1965

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

The problem is with your HTML mark up !!

<a href="path-to-image-1.jpg">Open popup 1</a> This won't work.

<a class="test-popup-link" href="path-to-image-1.jpg">Open popup 2</a>

But this will work.

Check Codepen

Upvotes: 1

Related Questions