Question

我是所有这一切的新手，如果这是一个愚蠢的问题，那就很抱歉。

我以前为我的联系表单创建了一个灯箱效果，让它运行得很好。点击的联系人，灯箱弹出了联系表单，该表单保存在单独的html页面中。脚本引用如下：

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

然后，我通过一个教程添加了一个类似尾声的滑块框，并将所有工作添加到头部：

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

一旦我完成了，我发现我的初始灯箱功能停止工作，现在链接只是将我发送到html页面。没有灯箱。现在这是完整的头脑：

<title>index</title> 
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

这是我发送到灯箱的导航栏：

    <a href="index.html">Overview</a> |
    <a href="index.html">Client List</a> |
    <a href="index.html">Reviews</a> |
    <a href="index.html">News</a> |
    <a href='hiddenforms/candidateform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Candidates</a> | 
    <a href='hiddenforms/contactform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Contact</a> | 
    <a href="candidate.html">Share</a>

我希望有所帮助。你在网页上有太多的javascript吗？我该如何解决这个问题？

Answer 1

我有同样的问题。我安装了Wordpress插件“Lightbox 2”和“PressOK - 可折叠区域”。安装PressOK - 可折叠区域后，灯箱效果停止工作。

检查完代码后，我通过在pressok-collapsible-region / PressOK-collapsible-region.php中注释掉一行代码找到了解决方案，如下所示。现在两个插件都有效！我希望这会有所帮助。

function collapsible_region_javascript() {

/*   echo '<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>'; */

    $siteroot = get_bloginfo('wpurl');
    echo '<link rel="stylesheet" type="text/css" media="all" href="' . $siteroot . '/wp-content/plugins/pressok-collapsible-region/style.css" />';
    echo '<script language="javascript" type="text/javascript" src="' . $siteroot . '/wp-content/plugins/pressok-collapsible-region/collapsible-region.js"></script>';
}

Answer 2

查看错误控制台（Firebug，Web Inspector等）中的错误。如果一个脚本覆盖了另一个脚本期望的属性，它可能会破坏某些东西。您还可能要考虑至少部署所有脚本连接到单个文件，以减少网络延迟。

编辑：它可能也是jQuery和Prototype和/或Scriptaculous之间的冲突。 jQuery试图避免与其他库冲突，但只有这么多可以控制。确保在其他脚本之前加载jQuery，并将jQuery.noConflict();添加到结尾。

为什么我的一个效果在添加另一个效果后停止工作？

2 个答案: