简单的Html / CSS / JS页面不适用于Codepen.io？(Simple Html/CSS/JS page doesn't work on Codepen.io?)
好吧，我为一个客户制作了一个tumblr power gallery，我很高兴它，我决定在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>
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: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>
最满意答案
您的脚本包含顺序错误，您在jQuery之前包含了大量的内容。 单击JS面板中的齿轮图标以查看脚本以及它们的加载顺序，下面是相同的屏幕截图。
我用正确的顺序对它进行了测试，它运行正常。
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.
I've tested it with correct order and it's working fine.
更多推荐
发布评论