CODEWITHSUNDEEP
jqueryhtmlmagnific-popup
Emilian Cebuc
Emilian Cebuc

Reputation: 351

Magnific Popup Gallery not working

I'm trying to create a gallery with the Magnific Popup Lightbox Gallery plugin. I have checked the documentation by Dmitry Semenov and copied the code blocks exactly as he stated. This is my <head> section where I have all the files included:

<head>
 <title>Gallery</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="styles/core_styles_gallery2.css">
  <link rel="stylesheet" type="text/css" href="styles/magnific-popup.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="scripts/jquery.magnific-popup.js"></script>
  <script src="scripts/jQuery_gallery.js"></script>
</head>

As you can see there's simply the bootstrap files and my css sheets, the jQuery library file, plus the 2 .css and .js files for the magnific popup that the developer says to include. Here is my HTML gallery block of code (the class "hoverZoomLink" was used by the dev in his example):

<div class="article-content">
    <div class="container-fluid">
        <div class="container">
            <div class="popup-gallery">
                <a href="styles/images/gallery/image.jpg" class="hoverZoomLink"><img src="styles/images/gallery/image.jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(1).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(1).jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(2).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(2).jpg" width="75" height="75"></a>
                <a href="styles/images/gallery/image(3).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(3).jpg" width="75" height="75"></a>
            </div>  
        </div>
    </div>
</div>

Finally, this is the jQuery code (located in the external jQuery_gallery.js file I included in the <head> ) that is supposed to initialise the 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>';
        }
    }
});});

Well, nothing is working. When I click on the images, they simply open in another tab. I am new to programming and web development, I have tried to understand the errors but I have no idea what am I doing wrong. Please help me!

Upvotes: 0

Views: 4521

Answers (1)

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

Try it like this to start with the basic like the example from the developers page (change the href and src ofcourse): 

<a href="image.jpg" class="image-link">
   <img src="thumbnails.jpg" />
</a> 

// Initialize popup as usual
$('.image-link').magnificPopup({
  type: 'image',
  mainClass: 'mfp-with-zoom', // this class is for CSS animation below

  zoom: {
    enabled: true, // By default it's false, so don't forget to enable it

    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function


    opener: function(openerElement) {
      return openerElement.is('img') ? openerElement : openerElement.find('img');
    }
  }

});

See if this works, if this doesn't work either it's not the code that's wrong.

Edit: Searched for an fully working example, try the following code:

<a href="http://dummyimage.com/600x400/eee/000.jpg" data-group="1" class="galleryItem test">group 1 image 1</a> – 
<a href="http://dummyimage.com/600x400/000/fff.jpg" data-group="1" class="galleryItem test123">group 1 image 2</a>

<br/><br/>

<a href="http://dummyimage.com/600x200/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 1</a> – 
<a href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 2</a>

and in the JS:

var groups = {};
$('.galleryItem').each(function() {
  var id = parseInt($(this).attr('data-group'), 10);

  if(!groups[id]) {
    groups[id] = [];
  } 

  groups[id].push( this );
});


$.each(groups, function() {

  $(this).magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: false,
      gallery: { enabled:true }
  })

});

Upvotes: 2

Related Questions