magnific-popup


Magnific Popup Plugin Not Showing when Previewed in Browser


The code works, but for some reason the effect does not work when I open site in browser window (firefox). I did try a different browser but same thing. I am using TextWrangler to write my website. I also have Dreamweaver and I tried that too, but for some reason the plugin won't work...so then I used CodePen to see if code works and it does! Is there any tips or hints to why the plugin does not show when previewed in browser?
Here is Magnific Popup Documentation
I linked and downloaded the Magnific Popup css and js files.
I tried it in CodePen and it works I just changed on the image
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery Test</title>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/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="dist/jquery.magnific-popup.js"></script>
</head>
<body>
<h1>Gallery Test</h1>
<a class="image-popup-vertical-fit" href="images/yellow-cactus.jpg" title="Yellow Cactus">
<img src="images/yellow-cactus-small.jpg">
</a>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
</body>
</html>
Finally I figured what I did wrong, it was a typo in my jquery library link. It didn't start off with "http:"
Simple is always the easiest things overlooked!

Related Links

Does it only work on wordpress?
Magnific Popup scroll issues with iframe and iOS
How to apply magnific pop to image preview after revoke the object url
How to override magnific popup inline markup
Magnific pop-up only links to you tube
Magnific Popup close button placed in invalid html?
Magnific Popup - Google Maps Embed API must be used in an iframe
Magnific Popup Plugin Not Showing when Previewed in Browser
Magnific Popup Wordpress
Magnific vs PhotoSwipe
How to adjust video size magnific popup
$.magnificPopup.open() callbacks is not working
How do i setup magnific-popup
magnific-popup - re-initiate on ajax content
Magnific-popup cancels all requests on open
Magnific Popup fails to work with multiple galleries on a page

Categories

HOME
asp.net-core
debugging
at-command
callback
podio
gitpitch
python-unittest
numeral.js
event-handling
progressive-web-apps
transformation
windows-7-x64
google-static-maps
database-replication
sms-gateway
openedx
xlsxwriter
orleans
semantic-analysis
react-css-modules
virtualdub
jaxb2
gsmcomm
delicious-api
socialengine
siesta-swift
winrt-xaml-toolkit
webtest
repo
rotational-matrices
y86
bytecode-manipulation
simplexml
qwerty
espeak
event-driven
dynamics-crm-2013
withings
objectlistview
hilbert-curve
user-controls
awt
reportingservices-2005
android-mediaprojection
wptoolkit
jlink
alphabet
git-diff
r-forge
knpmenubundle
pearson
lync-client-sdk
redundancy
gnome-shell-extensions
objective-c-swift-bridge
jquery-filter
ado.net-entity-data-model
contact-list
multiple-regression
blackberry-10
hsv
cannon.js
django-unittest
responsive-images
processmodel
proj4js
device-orientation
lustre
clicktag
dd
fpml
xojo
valuechangelistener
rtmfp
mcts
bulkloader
sabredav
factory-method
free-variable
mt
manchester-syntax
propertyeditor
dsn
onsubmit
appconkit
qtkit
bubble-chart
buildr
hgsubversion
fireworks
self-extracting
web-application-design
xsdobjectgen
dbal
castle-monorail
swing-app-framework
yagni
anti-piracy
ugc

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App