Help with magnific popup plugin
Hi, everyone. I recently installed the magnific popup plugin, and I'm having an issue with the popup gallery. Why does it work perfectly fine on this
dummy page, but not on
this one? What changes do I need to make? The code is the same, though sketch.html is placed in a subdirectory called "art." The dummy/test page is located in the root folder. Any help would be appreciated, thank you.
Here is the code I'm using in the "sketch" page.
Here is the code I'm using in the "sketch" page.
- <html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<meta charset="UTF-8">
<title>Fight Fayre</title>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="js/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="js/jquery.magnific-popup.js"></script>
</head>
<div class="outer">
<center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<img src="/banner.png">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" rowspan="3"></td>
<td height="10"></td>
</tr>
<tr>
<td height="1" background=""></td>
</tr>
<tr>
<td width="341">
<span class="h2">sketches.</span><P>
<div class="popup-gallery">
<a href="/art/sie_smoke400.jpg" title="Siege, smoking"><img src="/images/sie01_50x100.jpg"></a>
<a href="/art/siege_street619.jpg" title="Day Off"><img src="/images/sie02_50x100.jpg"></a>
<a href="/art/sie_lean469.jpg" title="Conversation"><img src="/images/sie03_50x100.jpg"></a>
<a href="/art/sie_grin421.jpg" title="Grin(ing at Kaiser’s expense)"><img src="/images/sie04_50x100.jpg"></a>
<a href="/art/siege_shadows627.jpg" title="Grit Under Your Nails"><img src="/images/sie05_50x100.jpg"></a>
<a href="/art/sie_darkalley608.jpg" title="Siege, Alleyway"><img src="/images/sie06_50x100.jpg"></a>
<a href="/art/sie_laugh400.jpg" title="Sketch - Expression"><img src="/images/sie07_50x100.jpg"></a>
</div>
</td>
</tr>
</table>
</td>
<td width="30"></td>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" background=""></td>
</tr>
<tr>
<td>
<font class="x">
<b><a href="/about">ABOUT</a></b><br>
Clueless? I should have known.<P>
<b><a href="/synopsis">SYNOPSIS</a></b><br>
Spoiler-free.<P>
<b><a href="/char">CHARACTERS</a></b><br>
Bios, fun facts, attack stats.<P>
<b><a href="/arts">CONCEPT ART</a></b><br>
Sketchy works.<P>
<b><a href="/playlist">PLAYLIST</a></b><br>
Listen on Spotify.<P>
<b><a href="/write">EXCERPT</a></b><br>
Read.<P>
<b><a class="popup-vimeo" href="http://vimeo.com/65044182">VIDEO</a></b><br>
The unofficial book trailer.<P>
<b><a href="/quotes">QUOTES</a></b><br>
Snarky quotes! I mean, words of wisdom.<P>
<b><a href="/exit">LINKS OUT</a></b><br>
Flee while you still can!<P>
<b><a href="http://visualheresy.tumblr.com">MY TUMBLR</a></b><br>
<div class='ji-tumblr-photos'><a id='ji-tumblr-url-tumblwidget-1' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-1' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-2' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-2' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-3' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-3' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-4' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-4' src='' alt='' /></a>
</div>
<script type='text/javascript' src='http://visualheresy.tumblr.com/api/read/json?number=4&type=photo'></script>
<script type='text/javascript'>
document.getElementById('ji-tumblr-photo-tumblwidget-1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-1').setAttribute('href', tumblr_api_read.posts[0]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-2').setAttribute('src', tumblr_api_read.posts[1]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-2').setAttribute('href', tumblr_api_read.posts[1]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-3').setAttribute('src', tumblr_api_read.posts[2]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-3').setAttribute('href', tumblr_api_read.posts[2]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-4').setAttribute('src', tumblr_api_read.posts[3]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-4').setAttribute('href', tumblr_api_read.posts[3]['url-with-slug']);
</script>
</table>
</td>
</tr>
</table>
</center></div>
<div id="footer">
<div id="short">
<ul class="go">
<li><strong>Go.</strong></li>
<li><a href="javascript:history.go(-1)">backward</a></li>
<li><a href="http://fightfayre.net">home</a></li>
<li><a href="#">top</a></li>
<li><a href="javascript:history.go(+1)">forward</a></li>
<li><a href="/exits">exits</a></li>
<li><a href="http://fightfayre.net/contact">contact</a></li>
</ul>
<ul class="nu">
<li><strong>Characters.</strong></li>
<li><a href="/chars/fang">runner</a> - Mai Suiko</li>
<li><a href="/chars/siege">ruin</a> - Vaine Fayre</li>
<li><a href="/chars/pierce">catalyst</a> - Pierce Gaultier</li>
<li><a href="/chars/kaiser">emissary</a> - Rikt Stein</li>
<li><a href="/chars/saber">director</a> - Yukio Kuhn</li>
</ul>
<ul class="sc">
<li><strong>Contents.</strong></li>
<li><a href="/about">about</a></li>
<li><a href="/synopsis">synopsis</a></li>
<li><a href="/arts">concept art</a></li>
<li><a href="/playlist">playlist</a></li>
<li><a href="/write">excerpt</a></li>
<li><a class="popup-vimeo" href="http://vimeo.com/65044182">video</a></li>
<li><a href="/quotes">quotes</a></li>
</ul>
<ul class="dc">
<li><strong>Disclaimer.</strong></li>
<li><b>Fight Fayre</b> is created and maintained by<a
href="http://fightfayre.net/contact">Jessy</a>. <i>Moth</i> and its charcters © 2013 Jessica Cavero. All rights reserved.</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});</script>
<script>
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Jessica Cavero</small>';
}
}
});
});</script>
</body>
</html>