How to implement or create a Magnific Popup?

Question

Intro: This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie. What I want to know: I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed. What I have done before I came to StackOverflow: Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image. Sources: This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html. This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - on the Lightbox Gallery section. HTML Structure I have tried, and failed: ```

Accepted Answer

Just add `delegate: 'a'` to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.

```
$('.popupgallery').magnificPopup({ 
    type: 'image', 
    delegate: 'a', 
    closeOnContentClick: true, 
    image: { 
        verticalFit: false 
    } 
}); 
```

How to implement or create a Magnific Popup?

Solution

Problem

Related problems