CODEWITHSUNDEEP
javascriptjquerypopupmagnific-popup
user3911868
user3911868

Reputation: 1

Nothing I've been trying seems to get the Magnific Popup to work properly

I've spent a lot of time trying to get this Magnific Popup thing to work locally on my website, and it keeps linking me to a separate image page, instead of getting the popup viewer I wanted.

Does anyone know where my errors are and how I can get it to work?

I'm kind of new to jQuery, so I'm kinda clueless as to why this code is not working.

Edit: Is there something I need to download to get it to work?

All three source codes are in my folder, and I did check to see if they are at the right links, and I'm still not getting any of the Magnific popups.

This is what I have in my document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="website.css" rel="stylesheet" type="text/css">
<script src="my_jquery.js"></script>
<title> Name </title>



        <link href="magnific-popup.css" rel="stylesheet" type="text/css">
        <link href="singleimage.css" rel="stylesheet" type="text/css">







 </head>
  <body>

<div id="navigation">
    <div id="header_left"><span id="header_text1">Name</span> </div>

    <div id="header_right"> <span id="header_text2">
    <a href="#home">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a> 
     </span> </div>

</div>






<a name="graphicdesign">
<div class="bg-image2">

    <div class="test1">
        <div class="test2"> <h1>Page Title</h1>


<a class="image-popup-vertical-fit" href="cat_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
<img src="cat_s.jpg " width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>


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






    $(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

$('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
        verticalFit: false
    }
});

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    } }); });
    </script>



    <script src="jquery.magnific-popup.min.js"></script> 
    <script src="jquery.magnific-popup.js"></script>
    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->



        </div>
    </div>
</div> </a>

I've been getting three errors from the code I pasted from Magnific Popup. I didn't change the code in any way, and I still ended up with errors. I'm not sure if I'm supposed to change it somehow or not. I'm puzzled on what to do.

Uncaught ReferenceError: $ is not defined index_01.html:73

Here are some of the codes around lines 75 on that page:

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

Uncaught TypeError: undefined is not a function jquery.magnific-popup.min.js:4

    (function(e){var t,n,i,o,r,a,s,l="Close",c="BeforeClose",d="AfterClose",u="BeforeAppend",p=

Uncaught TypeError: undefined is not a function jquery.magnific-popup.js:38

     _window = $(window),

Upvotes: 0

Views: 5033

Answers (1)

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

Well, as I pointed out in comments, you should add link to magnific-popup.js after jQuery, since this is a plugin:

<script src="jquery.min.js"></script>
<script src="magnific-popup.js"></script>

I've created this jsfiddle, is this what you wanted (looks kind of creepy)? I also combined all your script in one block like this:

$(document).ready(function () {        
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        delegate: 'a',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
    $('.parent-container').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image'
        // other options
    });
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }

    });

    $('.image-popup-fit-width').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        image: {
            verticalFit: false
        }
    });

    $('.image-popup-no-margins').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from                left and right side
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300 // don't foget to change the duration also in CSS
        }
    });    
});

Upvotes: 2

Related Questions