Okay, I made a tumblr powered gallery for a client, and I was so happy with it I decided I'd make a little demo on codepen.io of it so other folks could see it. But mysteriously it doesn't work at all? I added a code snippet here and as you can see it works fine, why not on codepen? Here's a link. http://codepen.io/StuffieStephie/pen/eJMXov It's the same code as below, what gives!?
$(document).ready( function() {
// If tumblr is down or something, show this message
if (typeof tumblr_api_read === 'undefined') {
$('#artHolder').html('<h2>Whoops!</h2><p class="center">We seem to be having some technical difficulty with our gallery. <br/> Sorry for the inconvenience. In the meantime, please visit our <a target="_blank" href="https://www.facebook.com/">Facebook</a> or our <a target="_blank" href="http://tumblr.com/">Tumblr</a> to see our latest works. </p><h4> If the problem persists, please let us know at <a href="mailto:[email protected]">[email protected]</a></h4>');
}
// Otherwise show the gallery
else {
for (var i=0;i<tumblr_api_read.posts.length;i++) {
var thisPost = tumblr_api_read.posts[i];
$('#artHolder').append("<a class='gallery' href='" + thisPost["photo-url-1280"] + "' title='" + thisPost["photo-caption"] + "'><img src='" + thisPost["photo-url-250"] + "' longdesc='" + thisPost["photo-url-1280"] + "'></a>");
}
$('#artHolder').imagesLoaded( function() {
$('#artHolder').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
$("#artHolder").masonry();
}); //END LOADED
} //END ELSE STATMENT
}); //END ON DOC READYbody {
font-family: 'Open Sans';
}
#artHolder{
width: 80%;
margin: 0 auto;
}
a{
text-decoration: none!important;
}
h1{
text-align: center;
font-family:'Quicksand';
}
.gallery {
padding: 0 !important;
line-height: 0;
font-size: 0;
box-sizing: border-box;
display: inline;
float: left;
background: #FFF;
transition: all .1s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
transform: scale(.9);
width: 250px;
}
.gallery img{
padding: 0;
margin: 0;
border-radius: 10px;
}
figcaption a {
color:#00ADDC;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
figcaption a:hover {
color:#FEE4FD;
}
figcaption blockquote {
display: inline;
padding: 0;
margin: 0;
}
figcaption p {
display: inline;
padding: 0;
margin: 5px;
}
.gallery:hover {
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
}
.gallery:hover img{
border-radius: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Tumblr Powered Gallery</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link href='https://s3.amazonaws.com/dimsemenov-static/dist/magnific-popup.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Tumblr Powered Gallery with Magnific Pop-up and Masonry</h1>
<div id="artHolder" class="clearfix"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://original-photographers.tumblr.com/api/read/json"></script>
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.js"></script>
<script src="https://s3.amazonaws.com/dimsemenov-static/dist/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
</body>
magnificPopup is not a functionbut what is failing?