Question

好吧，我为一个客户制作了一个tumblr驱动的画廊，我很高兴它，我决定在codepen.io上做一个小演示，以便其他人可以看到它。但神秘的是它根本不起作用？我在这里添加了一个代码片段，你可以看到它工作正常，为什么不在codepen上呢？这是一个链接。 http://codepen.io/StuffieStephie/pen/eJMXov这与下面的代码相同，是什么给出的？？

	$(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:webmaster@example.com">webmaster@example.com</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/imagesloaded@4.1/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>

Answer 1

您的脚本包含顺序错误，您在 jQuery 之前包含 magnific 。单击JS面板中的齿轮图标以查看脚本以及它们的加载顺序，下面是相同的屏幕截图。

我已经按照正确的顺序对其进行了测试，并且工作正常。

简单的Html / CSS / JS页面不适用于Codepen.io？

1 个答案: