javascript - 如何让 crossSlide 和 lightbox2 在同一页面上协同工作

Question

(横向滑动)

(灯箱)

这是我的标题:

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

这是我的 body :

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

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

此外，如果我想在同一页面上与其他所有内容一起使用(ThickBox3.1)。这可能吗？具体如何做？

另外，很抱歉没有将它们作为链接发布，显然新用户不允许发布超过 1 个链接。

Answer 1

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

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' }
    ]);
 });

只要页面上没有其他冲突，这就可能有效。

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