简单的HTML / CSS / JS页面在Codepen.io上不起作用？
[英]Simple Html/CSS/JS page doesn't work on Codepen.io?
问题描述
好的，我为客户制作了一个基于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>
1 个解决方案
解决方案1
1 已采纳 2016-01-27 06:11:30
您的脚本包含的次序是错的，你包括jQuery的前庄重 。 单击“ JS”面板中的齿轮图标以查看脚本以及它们的加载顺序，以下是相同的屏幕截图。
我已经按照正确的顺序对其进行了测试，并且工作正常。
为什么JavaScript代码无法在codepen.io中工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.