如何让crossSlide和lightbox2在同一页面上一起工作

时间:2009-07-22 00:30:21

标签: javascript jquery thickbox lightbox2

(拖板)

(灯箱)

这是我的标题:

<script type="text/javascript" src="<?php echo ROOT.'sources/js/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/contentSlider/jquery.cross-slide.js'; ?>"></script>
<link rel="stylesheet" href="<?php echo ROOT.'sources/css/lightbox.css'; ?>" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/prototype.js'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/scriptaculous.js?load=effects,builder'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/lightbox.js'; ?>"></script>

这是我的身体:

 <script type="text/javascript">
 $(function() {
    $('#imgHold').crossSlide({
      sleep: 3,
      fade: .5
    }, [
      { src: 'images/featured/ftcont_img1.png' },
      { src: 'images/featured/ftcont_img2.png' },
      { src: 'images/featured/ftcont_img3.png' },
      { src: 'images/featured/ftcont_img4.png' }
    ]);
 });
 </script>
 <div id="ftIMG"><div id="imgHold">Loading...</div></div>

我在此页面上没有使用灯箱脚本的任何内容。但是我希望将脚本保留在头文件中,所以在PHP中我只需要调用1个头文件。 LightBox“手册”说要将“initLightbox();添加到body标签的onload属性上,所以我这样做了,没有任何改变。现在我还在其他地方读了一个(jQuery.no-conflict),我想知道这是不是将是继续前进的方式。或者,如果有另一种方法来解决这个问题。

另外,如果我想在同一页面上使用(ThickBox3.1)和其他所有内容。是否有可能,以及如何准确地这样做?

另外,对不起家伙没有将它们作为链接发布,显然新用户不允许发布超过1个链接。

1 个答案:

答案 0 :(得分:0)

尝试将您的代码段更改为以下内容:

jQuery(function() {
    jQuery('#imgHold').crossSlide({
      sleep: 3,
      fade: .5
    }, [
      { src: 'images/featured/ftcont_img1.png' },
      { src: 'images/featured/ftcont_img2.png' },
      { src: 'images/featured/ftcont_img3.png' },
      { src: 'images/featured/ftcont_img4.png' }
    ]);
 });

只要页面上没有其他冲突,这可能会起作用。

请参阅docs.jquery.com上的this article,了解如何将jQuery与其他库(如prototype和scriptaculous)一起使用,这两个库都是您在示例中使用的。