如何解决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>
解决方法
看来您已经注释掉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.js
jquery.galleria.js
<script type=\"text/javascript\" src=\"js/jquery.galleria.js\"></script>
src
jquery.galleria.js
jQuery(\'ul.gallery_demo\').galleria
$(\'ul.gallery_demo\').galleria
$
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。