CODEWITHSUNDEEP
javascriptjqueryhtmlcss
StephanieQ
StephanieQ

Reputation: 882

Simple Html/CSS/JS page doesn't work on Codepen.io?

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 READY
body {
  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>

Upvotes: 0

Views: 932

Answers (1)

abhishekkannojia
abhishekkannojia

Reputation: 2856

Your order of script inclusion is in wrong, you are including magnific before jQuery. Click on gear icon in JS panel to see the scripts and in which order they are being loaded, below is the screenshot of the same.

enter image description here

I've tested it with correct order and it's working fine.

Upvotes: 1

Related Questions