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

发布于 2024-07-27 19:56:11 字数 1612 浏览 9 评论 0原文

(CrossSlide)

(LightBox)

这是我的标题:

<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 个链接。

(CrossSlide)

(LightBox)

This is my header:

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

This is my 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>

I don't have anything using the lightbox script on this page. But I want the keep the script in the header so in PHP I only have to call up 1 header.
The LightBox "manual" said to add "initLightbox(); to the onload attribute on the body tag, so I did that and nothing changed. Now I also read somewhere else about a (jQuery.no-conflict), im wondering if this would be the way to proceed. Or if there is another way to fix this problems.

Also, if I want to use (ThickBox3.1) on the same page with everything else. Would it be possible, and how to do so exactly?

Also, sorry guys about not posting them up as links, apparently new users are not allowed to post up more than 1 link.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

送舟行 2024-08-03 19:56:11

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

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 上的这篇文章,了解如何将 jQuery 与其他库(例如prototype 和 scriptaculous)一起使用,您在示例中使用了这两者。

Try changing your code snippet to the following:

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 might work as long as there are no other conflicts on the page.

See this article on docs.jquery.com for how to use jQuery with other libraries such as prototype and scriptaculous, both of which you're making use of in your example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文