jQuery Galleria-错误：$“ ul.gallery_demo”gallery不是函数

问题描述

| 我在页面中使用了多个jQuery。其中两个工作正常。当我尝试集成Galleria脚本时，它说，错误：$（\“ ul.gallery_demo \”）。galleria不是函数该代码分别为我工作。这是代码。码：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>Untitled Document</title>
<link href=\"css/galleria.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\">
    <!--script type=\"text/javascript\" src=\"js/jquery.min.js\"></script-->
    <script type=\"text/javascript\" src=\"js/jquery.galleria.js\"></script>
    <script type=\"text/javascript\">

    $(document).ready(function(){

        $(\'.gallery_demo_unstyled\').addClass(\'gallery_demo\'); 

        $(\'ul.gallery_demo\').galleria({
            history   : true,clickNext : true,insert    : \'#main_image\',onImage   : function(image,caption,thumb) { 


                image.css(\'display\',\'none\').fadeIn(1000);
                caption.css(\'display\',\'none\').fadeIn(1000);


                var _li = thumb.parents(\'li\');


                _li.siblings().children(\'img.selected\').fadeTo(500,0.3);


                thumb.fadeTo(\'fast\',1).addClass(\'selected\');


            },onThumb : function(thumb) { 

                var _li = thumb.parents(\'li\');


                var _fadeTo = _li.is(\'.active\') ? \'1\' : \'0.3\';


                thumb.css({display:\'none\',opacity:_fadeTo}).fadeIn(1500);


                thumb.hover(
                    function() { thumb.fadeTo(\'fast\',1); },function() { _li.not(\'.active\').children(\'img\').fadeTo(\'fast\',0.3); } 
                )
            }
        });
    });

    </script>
    <style type=\"text/css\">

    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0; }
    h1,h2{font:bold 80% \'helvetica neue\',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    /*a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}*/
    a{color:#FFFFFF;text-decoration:none;outline:none;}
    a:hover{color:#CCCCCC;}
    .caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
    .demo{margin-top:2em; }
    .gallery_demo{width:720px; float:left; padding-left:5px; }
    /*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
    .gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
    .gallery_demo li div{left:0px;}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }

    #main_image{height:480px;width:700px; float:left;  }
    #main_image img{ border:5px solid #666666; width:700px; height:438px; }

    /*#nav{padding-top:15px;clear:both;font:80% \'helvetica neue\',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
    #nav{padding-top:15px;clear:both;font:80% \'helvetica neue\',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}

    .info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
    .info p{margin-top:1.6em;}

    </style>

</head>

<body>
<br>

    <div style=\"float: left; padding-left: 40px; width: 720px;\">
    <div>
    <p id=\"nav\" align=\"center\"><a href=\"#\" onclick=\"$.galleria.prev(); return false;\">« previous</a> | <a href=\"#\" onclick=\"$.galleria.next(); return false;\">next »</a></p>

    </div>
        <div class=\"demo\">
                <div id=\"main_image\" align=\"center\"></div>


                <div style=\"width: 700px; float: left;\">
                    <ul class=\"gallery_demo_unstyled gallery_demo galleria\">                    
                        <li class=\"active\"><img rel=\"images/image1.jpg\" class=\"thumb selected\" style=\"width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;\" src=\"images/image1.jpg\" alt=\"SEAT COMFORTS\" title=\"SEAT COMFORTS\"></li>
                        <li class=\"\"><img rel=\"images/image2.jpg\" class=\"thumb\" style=\"width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;\" src=\"images/image2.jpg\" alt=\"BUS INNER VIEW\" title=\"BUS INNER VIEW\"></li>
                        <li class=\"\"><img rel=\"gallery/image3.jpg\" class=\"thumb\" style=\"width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;\" src=\"images/image3.jpg\" alt=\"Bus full View\" title=\"Bus full View\"></li>
                        <li class=\"\"><img rel=\"images/image4.jpg\" class=\"thumb\" style=\"width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;\" src=\"images/image4.jpg\" alt=\"BEGINNING\" title=\"BEGINNING OF TIME\"></li>
                        <li class=\"\"><img rel=\"gallery/image5.jpg\" class=\"thumb\" style=\"width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;\" src=\"images/image5.jpg\" alt=\"ECO\" title=\"ECO AWARENESS\"></li>

                    </ul>

                </div>

        </div>  
        <br><br>


    </div>
        <!--content_inner div ends here-->




                <!--- body -->




</body>
</html>

当我尝试将其集成到页面中时，它不起作用，该页面还包含以下代码。码：

<script type=\"text/javascript\" src=\"gallery/jquery.js\"></script>
<script type=\"text/javascript\" src=\"gallery/jquery-easing-1.3.pack.js\"></script>
<script type=\"text/javascript\" src=\"gallery/jquery-easing-compatibility.1.2.pack.js\"></script>
<script type=\"text/javascript\" src=\"gallery/jquery.kwicks-1.5.1.pack.js\"></script>


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

<!--[if IE]>
<script type=\"text/javascript\">
$().ready(function() {
$(\".jimgMenu ul\").kwicks({max: 400,duration: 700,easing: \"easeOutQuad\"});
});
</script> 
<![endif]-->
<script type=\"text/javascript\">
$().ready(function() {
$(\'.jimgMenu ul\').kwicks({max: 475,duration: 600,easing: \'easeOutQuad\'});
});
</script>

我试过使用noconflict（）函数，并使用jQuery代替$，但没有用。任何人都可以解决这个问题。问候，雷卡

解决方法

看来您已经注释掉jQuery中应带的<script>元素，这是：

<!--script type=\"text/javascript\" src=\"js/jquery.min.js\"></script-->

应该是这样的：

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

您需要在jquery.galleria.js之前加载jQuery，否则它将无法正常工作。您的第二个示例包含jquery.js，但不包含jquery.galleria.js，因此请尝试将其添加到第二个示例中：

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

当然，您必须调整src路径以指向jquery.galleria.js。 , 您是否包含了插件？我认为您正在丢失……这不是jQuery的核心功能。我认为是这样的： http://galleria.aino.se/ , 尝试使用jQuery(\'ul.gallery_demo\').galleria代替$(\'ul.gallery_demo\').galleria。如果这样做有效，则表示$变量已被其他人覆盖。尝试找出答案或将document.ready函数关闭：

(function($){
  (document).ready(function(){
    // your code here
  });
})(jQuery)

demo demo galleria-ul.gallery 不是函数函数错误错误错误

jQuery Galleria-错误：$“ ul.gallery_demo”gallery不是函数

问题描述

解决方法

相关问答