0

fancybox を動作させることができません。画像のサムは新しいタブでのみ開きます。私はこれで信じられないほど新しいです。私はコードを複雑にしすぎたかもしれませんが、誰かが見てくれれば幸いです。ここにその全体があります:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Animation and Illustration Emporium</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/style2.css" media="screen" title="style (screen)" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>


   <!-- Add mousewheel plugin-->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>

<!-- Add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
 </head>
 <body>
  <div id="wrap"> <img class="topleft" src="images/wings.jpg" alt=""/>
  <div class="head">Nora Meek<span>animator and illustrator</span></div>
  <div id="nav">
    <div class="menu">
      <ul class="null">
        <li><a href="http://www.norameek.com/">HOME</a></li>
        <li><a href="/animation">ANIMATION</a></li>
        <li><a href="/illustration">ILLUSTRATION</a></li>
        <li><a href="/comics">COMIC ART</a></li>
        <li><a href="/about">ABOUT</a></li>
        <li><a href="/contact">CONTACT</a></li>
        <li><a href="http://www.misterslunchy.tumblr.com/">BLOG</a></li>
      </ul>
    </div>
  </div>
    <div id="main">
    <div class="subnav">
      <span class="title">ILLUSTRATED WORKS<img src="images/title_arrow.gif" alt="" /></span> </div>
    <h2>Illustrated Works</h2>

    <p class="main">Use the mouse wheel to scroll through the gallery.</p>
<link rel="stylesheet" type="text/css" href="styles/portfolio.css" media="screen" title="style (screen)" />
<br/>
<div id="portfolio" class="clear">

  <ul>
    <li><a class="fancybox" rel="group1" href="images/splash.jpg"><img src="images/splash2.jpg" alt="fancy yes" /></a></li>
  </ul>
</div>
  <script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
  </script>
</body>
</html>
4

2 に答える 2

1

良い...

3 つのバージョンの jQuery が含まれているため、競合が発生します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

解決

1つだけ選んでください！

Ps 使用している fancybox ライブラリと互換性のあるバージョンを確認してください。

于 2013-05-24T21:01:32.827 に答える
0

これの代わりに最新の jQuery を 1 つだけ含める 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
于 2013-05-24T21:02:54.887 に答える