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>

解决方案

只选一个！

Ps 检查哪个版本与您正在使用的 fancybox 库兼容。

于 2013-05-24T21:01:32.827 回答
0

只包含一个最新的 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>
于 2013-05-24T21:02:54.887 回答