个人中心
gpt4 book ai didi

javascript - jQuery Galleria - 错误 : $ ("ul.gallery_demo"). galleria 不是函数

转载 作者：行者123 更新时间：2023-11-30 06:04:07 25 4
gpt4 key购买 nike

我在我的页面中使用了多个 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 而不是 $ 但没有用。

谁能解决这个问题

问候，雷卡

最佳答案

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

<!--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 的路径当然。

关于javascript - jQuery Galleria - 错误 : $ ("ul.gallery_demo"). galleria 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6196787/

25 4 0
文章推荐： java - 将图标按钮添加到 ControlsFX TableFilter 的列标题
文章推荐： java - 使用 Spring Boot 从 http 链接获取值
文章推荐： java - 使用 Jython 将参数从 Java 传递到 Python
文章推荐： javascript - Google Chrome window.open with name 打开新窗口
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com