我的幻想盒是't加载

My fancybox isn't loading

本文关键字:加载 幻想 我的      更新时间:2023-09-26

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({overlay颜色:"#0CF",overlayOpacity:.3,transitionIn:'弹性',transitionOut:"弹性",easingIn:"easeInSine",easingOut:'easeOutSine',title位置:"外部",
循环:true});});//结束准备

在快速查看您的页面时,我可以看到以下内容:

  1. 您调用了两次jQuery(_js/jQuery-1.7.2.min.js_6js/jQuery.js
  2. 对jQuery的调用必须在fancybox调用之前

查看HTML:中的<head>标记

<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方法有些过头了。

我希望这能帮助