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

Magnific-popup - How to prevent “image source” from being displayed when 'data-source' not defined
how to add bullets in Lightbox gallery of magnific pop up?
Magnific popup specific size
Magnific popup scroll issue
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

Categories

HOME
keras
tizen
session
octobercms
gis
ip
disassembler
ezpublish
in-app-purchase
swagger-ui
adobe-analytics
user-input
spring-kafka
volttron
midi
qt-creator
static-libraries
visual-studio-cordova
lombok
after-effects
pc
zapier
intentfilter
tapestry
extjs5
cultureinfo
crosstab
xpages-ssjs
info.plist
windowbuilder
c++-amp
quote
srcset
bpel
unboundid
instant-messaging
microsoft-chart-controls
react-chartjs
avcapturesession
uiswipegesturerecognizer
overlap
vxworks
dosbox
swisscomdev
x11-forwarding
libvpx
android-fingerprint-api
streamreader
leading-zero
lumberjack
trim
grid.mvc
core-plot
estimote
flashair
scorm
osx-mavericks
atomicity
rails-routing
logparser
paxos
jlink
domain-model
knockout-components
crosswalk-runtime
yt-project
word-vba-mac
xml-attribute
qpid
gridview-sorting
fputcsv
testng-dataprovider
make-install
associative-array
cloudbees
ora-00900
sframe
createprocessasuser
processmodel
websocket4net
preferences
html-helper
braille
balanced-payments
message-driven-bean
algebraic-data-types
mbr
centos5
mysqltuner
quantlib-swig
inbox
bulkloader
shellexecute
comaddin
smtp-auth
drools-planner
jelly
simba
path-separator
pysimplesoap
javaspaces
enter
ohm
nsdatecomponents
nsobject
psi
oncheckedchanged
fluent-interface
infrastructure
multi-tier
scripting-languages
wsdl.exe
ajax-forms
caching-application-block

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