jQuery Galleria - Ошибка: $ ("ul.gallery_demo"). Галерея не является функцией - PullRequest
Новая
       10

jQuery Galleria - Ошибка: $ ("ul.gallery_demo"). Галерея не является функцией

2 голосов
/ 01 июня 2011

Я использовал несколько 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 вместо $, но безрезультатно.

Может ли кто-нибудь решить эту проблему.

С уважением,Рекх

Ответы [ 3 ]

1 голос
/ 01 июня 2011

Похоже, что вы закомментировали элемент <script>, который должен быть введен в jQuery, это: 

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

должно быть таким: 

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

Вам необходимо загрузить jQueryдо jquery.galleria.js или не будет работать.

Ваш второй пример включает jquery.js, но не jquery.galleria.js, поэтому попробуйте добавить это во второй: 

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

Вы будетенеобходимо отрегулировать путь src, чтобы он указывал на ваш jquery.galleria.js.

0 голосов
/ 01 июня 2011

вместо $('ul.gallery_demo').galleria, попробуйте использовать jQuery('ul.gallery_demo').galleria.
Если это работает, это означает, что переменная $ была переопределена кем-то другим. Попробуйте выяснить это или поместите свой document.ready в закрытое состояние: 

(function($){
  (document).ready(function(){
    // your code here
  });
})(jQuery)
0 голосов
/ 01 июня 2011

Вы включили плагин? Я думаю, что вы упускаете это ... Это не основная функциональность jQuery.

вот и я думаю:

http://galleria.aino.se/

...