5

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:

<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

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

<body>
<div class="popupgallery">
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/></a>
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a>
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a>
</div>
<script type="text/javascript"> 
$(document).ready(function() {

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

});

</script>
</body>
</html>

Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.

I hope someone out there would be kind enough to help me with this query.

Relevant queries:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup

Thanks again! I would really appreciate your thoughts!

Community
  • 1
  • 1
chest_nut
  • 195
  • 1
  • 2
  • 11
  • do you get any error in the javascript console? – Saturnix Jun 29 '13 at 01:10
  • are the linked files (css and js) in the right directory? Is the path correct? – Saturnix Jun 29 '13 at 01:11
  • 3rd comment: according to the documentation you posted, you just need to use `a href`. No need to put an `img` tag inside of the href. Remove the img tag and make sure the path of href is correct (I've noticed it's different from the path in img: why is this? I assume this is an error). I'll post as an answer if it works. – Saturnix Jun 29 '13 at 01:15
  • hmm.. your 2nd query, it's what's written from the documentation. i actually tried the github css and js (raw) files but it still doesn't work. with your 3rd comment, yes, the links are correct. – chest_nut Jun 29 '13 at 01:19
  • check the code you posted: inside of the href tag you have another img tag. Remove that: it's not needed. In regards to the `magnific-popup` folder (containing both the js and css files), if you didn't downloaded and placed it in the same directory of the html file obviously it is not going to get included. Pasting code from the specs will not work if the file is not included as well. – Saturnix Jun 29 '13 at 01:20
  • i removed the img tag and the page is blank. there is no image, nothing. :( i don't know what i'm doing wrong... – chest_nut Jun 29 '13 at 01:23
  • then the path in the href is wrong and the path in the img was the correct one. Did you noticed they were different? – Saturnix Jun 29 '13 at 01:24
  • i checked on my original file (in the HTML) and the href and img tag links are the same. i think it's the script/s that has messed with the links. will update the new HTML code in the query – chest_nut Jun 29 '13 at 01:29

2 Answers2

4

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 
    } 
});
Saturnix
  • 10,130
  • 17
  • 64
  • 120
0

Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
drake
  • 1