Question

我需要在每个页面上使用少量插件。一个在左侧div，中间和右侧div.But其中一个没有工作，只要添加另一个插件。在我的情况下，“Mac”风格的弹跳菜单不起作用。我已经尝试过使用jquery noConflict（）了。我想知道我是否正确放置它或任何其他问题。任何帮助将非常感激，因为我浪费了2天对此感到疑惑！

以下是我遇到此问题的完整页面代码。

        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
        <link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">

        <script src="menuv2.js" type="text/javascript"></script>     
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/interface.js"></script>

        <style>

  .left {
  height: 100%;

  //opacity: 0.5;
  background:rgba(0,0,0,0.3);
  //border-top: 3px solid #ccc;
  //border-bottom: 3px solid #ccc;
  //border-right:3px solid #ccc;
 position: relative;
 float: left;
  width: 16%;
  color: #fff;



            }
            .right {
  height: 100%;

 background:rgba(0,0,0,0.3);
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  border-left:3px solid #ccc;
 position: relative;
 float:right;
  width: 16%;
            }
             .middle{
  height: 100%;

background:rgba(0,0,0,0.3);
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  border-right:3px solid #ccc;
  border-left:3px solid #ccc;
 position: relative;
 float:left;
 margin-left: 3em;
 //margin-right: 1em;
// left:20%;
  width: 60%;


            }

            .ontop
            {
  position: relative;
  top: 2.7em;
 right: 1.6em;



}
.onmiddle {
  position: relative;
  top: 12.7em;
  right: 1.6em;
}
        </style>

    </head>
    <body style="background-image: url(bg/6.jpg);background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;" width="100%" height="100%">




        <div class="left">
            <aside>
                <img src="hooha_images/logo_small.png" class="expand">
            </aside>
            <aside style="padding-top: 20%;" class="ontop">
                <?php
                 include ('sidebar.php');

                ?>   
            </aside>


            <aside>

               <?php include('bottom_left.php');?>
            </aside>

        </div>
        <div class="middle">
           <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script>
jQuery.noConflict();
</script>

<div id="links">
    <a href="roses/1.jpg" title="Banana" data-gallery>
        <img src="roses/1.jpg" width='200' height="200" alt="Banana">
    </a>
    <a href="roses/2.jpg" title="Apple" data-gallery>
        <img src="roses/2.jpg" width='200' height="200"  alt="Apple">
    </a>
    <a href="roses/3.jpg" title="Orange" data-gallery>
        <img src="roses/3.jpg" width='200' height="200"  alt="Orange">
    </a>
    <a href="roses/4.jpg" title="Banana" data-gallery>
        <img src="roses/1.jpg" width='200' height="200" alt="Banana">
    </a>
    <a href="roses/5.jpg" title="Apple" data-gallery>
        <img src="roses/2.jpg" width='200' height="200"  alt="Apple">
    </a>
    <a href="roses/6.jpg" title="Orange" data-gallery>
        <img src="roses/3.jpg" width='200' height="200"  alt="Orange">
    </a>
</div>

        </div>
        <div class="right">

        </div>
        <script type="text/javascript">
    //var $a=jQuery.noConflict();
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            );
        }
    );

</script>
    </body>
</html>

Answer 1

您正在加载jquery两次

曾经这样

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

然后再来自其他地方

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

他们会发生冲突。通过删除一个来加载一个或另一个。由于你也有插件加载头，你需要删除第二个jQuery而不是第一个。

如果您将所有JS保留在页脚中，这可能会更加明显。如果您检查控制台（在Chrome中：f12然后单击控制台），您应该会看到错误。

多个jQuery插件不在同一页面上工作

1 个答案: