Question

好的，我正在为朋友建立一个网站，我目前正在使用jquery-1.4.3.min.js，corners.js，equalcols.js和头部的预加载图像脚本。一切都很好。

问题是，我现在需要一个页面的FancyBox（LightBox替代品），它似乎不起作用！我知道这是因为有些东西与另一个有冲突，但我不知道是什么。它是头部的顺序吗？或者是其他东西？尝试了LightBox，但这也无效。

它要么不起作用，要么停止EqualCols.js的工作，要么其他所有工作除了FancyBox之外还需要迷你图像库。

头部代码如下:(没有FancyBox）

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

    <!-- PRELOAD MENU IMAGES BEGINNING -->
    <script>
        var myimages=new Array()
        function preloadimages(){
        for (i=0;i<preloadimages.arguments.length ;
        i + myimages [ i ] =new Image ( myimages [ i ]
        src=preloadimages.arguments[i] } Enter path of images to be preloaded
        inside parenthesis. Extend list as desired. preloadimages ( images /
        home-h.png " images / about-h.png " images / services-rates-h.png "
        images / past-work-h.png " images / contact-h.png " images /
        shop-specials-h.png " images / free-quote-h.png " images /
        book-now-h.png ")
</script>
    <!-- PRELOAD MENU IMAGES END -->

    <!-- stop curvery corners error in IE -->
    <script type="text/javascript" src="js/corners.js"></script>
    <script type="text/javascript">
        var curvyCornersVerbose = false;
    </script>
    <!-- stop curvery corners error in IE -->

    <!-- EQUAL COLS START -->
    <script src="js/equalcols.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#left-col,#right-col').equalCols();
        });
    </script>
    <!-- EQUAL COLS END -->

</head>

是否有人能告诉我在哪里需要将FancyBox编码用于所有工作？或者我还能做些什么让它发挥作用？规则是什么？我在Google上研究过，似乎无法找到我想要的答案。

我需要实现的FancyBox代码是：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

如果我已经使用它，我是否需要顶线？：

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

任何帮助都非常感激。

Answer 1

取代：

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

使用：

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Fancybox代码：

$(document).ready(function() {
    $('#single_image').fancybox();
});

Answer 2

下面的代码是工作示例 - fancybox iframe版本。确保在html / jsp中添加锚标记

      <!--  The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>

包含块如下

<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

/ ** jquery准备好的功能 * / $（文件）。就绪（函数（）{

// popup for showing 
$("a.iframe").fancybox({
    'autoDimensions':false,
    'width'                 : 770,
    'height'                : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
    'centerOnScroll'  : true,
    'scrolling':'auto',
   // 'autoScale': true,
    'hideOnOverlayClick' : false,
    'enableEscapeButton' :true,
    'hideOnContentClick': false, 
    'type':'iframe'
    ,'onStart' :function(){$.fancybox.showActivity();}

    ,'onClosed' :function(){ }
  });

}）; //结束准备

多个脚本标记在我的页面中不起作用

2 个答案: