0

http://jspears8.mydevryportfolio.com/gallery1.html

何が起こっているのかについての本当のビジョンを与えることを期待して、私は学校のポートフォリオにアップロードしました. 最初に開いた fancybox 要素が機能しません。ビルド済みの fancybox css を使用しています。他にもいくつか試しました。私の実際のページでは、空のファンシーボックスが読み込まれ、循環するものはすべて読み込まれますが、ページに移動したときの最初のクリックは毎回空白です。

私は何を間違っていますか？下のギャラリーです。

<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 }); }); //準備完了

4

1 に答える 1

0

あなたのページを簡単に確認すると、次のことがわかります。

  1. jQuery を 2 回呼び出す ( _js/jquery-1.7.2.min.jsおよび_js/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">

ファンシーボックスの例は、次の場合のみ正常に機能します。

<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 メソッドがオーバーライドされていると思います。

これが役立つことを願っています

于 2013-06-27T02:21:44.460 に答える