Question

我无法让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>

Answer 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>

<强>解决方案

只选一个！

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

Answer 2

只包含一个最新的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>

无法让fancybox工作 - jquery问题？

2 个答案: