文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jQuery Galleria -错误：$("ul.gallery_demo").galleria不是函数

问jQuery Galleria -错误：$("ul.gallery_demo").galleria不是函数
EN

Stack Overflow用户
提问于 2011-06-01 13:42:44
回答 3查看 1.7K关注 0票数 2

我在我的页面中使用了多个jQuery。其中两个是工作的，我试图集成galleria脚本，它说，fine.When，

错误：$("ul.gallery_demo").galleria不是函数

代码是单独为我工作的。这是代码。

代码：

代码语言：javascript
复制
<!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>

当我试图将它集成到一个页面中时，它不能工作，它也由以下代码组成。

代码：

代码语言：javascript
复制
<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代替$，但是没有用。

有没有人能解决这个问题？

致敬，Rekha

javascript
jquery
jquery-plugins
gallery
EN

回答 3

Stack Overflow用户

发布于 2011-06-01 14:03:53

看起来您已经注释掉了应该引入jQuery的<script>元素，这是：

代码语言：javascript
复制
<!--script type="text/javascript" src="js/jquery.min.js"></script-->

应该是这样：

代码语言：javascript
复制
<script type="text/javascript" src="js/jquery.min.js"></script>

你需要在jquery.galleria.js之前加载jQuery，否则它将无法工作。

您的第二个示例包含jquery.js，但不包含jquery.galleria.js，因此尝试将此代码添加到第二个示例中：

代码语言：javascript
复制
<script type="text/javascript" src="js/jquery.galleria.js"></script>

当然，您必须调整src路径以指向您的jquery.galleria.js。

票数 1
EN

Stack Overflow用户

发布于 2011-06-01 13:49:36

你把插件包括进来了吗？我想你错过了..。它不是jQuery的核心功能。

这就是我认为的：

http://galleria.aino.se/

票数 0
EN

Stack Overflow用户

发布于 2011-06-01 14:24:14

尝试使用jQuery('ul.gallery_demo').galleria而不是$('ul.gallery_demo').galleria。

如果此操作有效，则意味着$变量已被其他人覆盖。试着找出答案，或者把你的document.ready函数放在一个闭包中：

代码语言：javascript
复制
(function($){
  (document).ready(function(){
    // your code here
  });
})(jQuery)
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/6196787

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档