http://jspears8.mydevryportfolio.com/gallery1.html
我上传到我的学校作品集，希望能真实地了解正在发生的事情。您打开的第一个 fancybox 元素不起作用。我正在使用预构建的 fancybox css。我试过其他几个。在我的实际页面中，它加载了一个空的 fancybox 并将加载循环通过的任何内容，但是当您漫步到页面时第一次点击每次都是空白的。
我做错了什么？这是下面的画廊。
<div id="gallery">
<a href="images/AlatheusEberwolf.jpg" rel="Gallery" title="Alatheus Eberwolf"><img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf"></a>
<a href="images/Quentin_II.jpg" rel="Gallery" title="Quentin II"><img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II"></a>
<a href="images/RolithAlinaEngaged.jpg" rel="Gallery" title="Rolith and Alina Get Engaged"><img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!"></a>
<a href="images/RolithAlinaMarried.jpg" rel="Gallery" title="Rolith and Alina Get Married"><img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married"></a>
<a href="images/Spear-of-the-Ancients.jpg" rel="Gallery" title="Spear of the Ancients"> <img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients"></a>
<a href="images/Tep_Itaki.jpg" rel="Gallery" title="Tep Itaki"><img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki"></a>
</div>
Javascript
$(document).ready(function() { $('#gallery a').fancybox({ overlayColor: '#0CF', overlayOpacity: .3, transitionIn: 'elastic', transitionOut: 'elastic', easingIn: 'easeInSine', easingOut: 'easeOutSine', titlePosition: 'outside' ,
cyclic: true }); }); // end ready
最佳答案
在快速查看您的页面时，我可以看到以下内容:
- 你调用了两次 jQuery(_js/jquery-1.7.2.min.js 和 _js/jquery.js)
- 您对 jQuery 的调用必须在 fancybox 调用之前
看看 <head> HTML 中的标记:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
如果您只有以下条件，您的 fancybox 示例就可以正常工作:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
所以我相信一些 javascript 方法是重载的。
希望对你有帮助
关于javascript - 我的 fancybox 没有加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17333333/