title: jQuery Galleria - Error: $("ul.gallery_demo").galleria is not a function
body: <p>I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,</p>
  
  <p>Error: $("ul.gallery_demo").galleria is not a function</p>
  
  <p>The code is working for me separately. Here's the code.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen"&gt;
      &lt;!--script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script--&gt;
      &lt;script type="text/javascript" src="js/jquery.galleria.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      $(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); } 
                  )
              }
          });
      });
  
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
  
      /* 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;}
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;br&gt;
  
      &lt;div style="float: left; padding-left: 40px; width: 720px;"&gt;
      &lt;div&gt;
      &lt;p id="nav" align="center"&gt;&lt;a href="#" onclick="$.galleria.prev(); return false;"&gt;« previous&lt;/a&gt; | &lt;a href="#" onclick="$.galleria.next(); return false;"&gt;next »&lt;/a&gt;&lt;/p&gt;
  
      &lt;/div&gt;
          &lt;div class="demo"&gt;
                  &lt;div id="main_image" align="center"&gt;&lt;/div&gt;
  
  
                  &lt;div style="width: 700px; float: left;"&gt;
                      &lt;ul class="gallery_demo_unstyled gallery_demo galleria"&gt;                    
                          &lt;li class="active"&gt;&lt;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"&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;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"&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;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"&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;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"&gt;&lt;/li&gt;
                          &lt;li class=""&gt;&lt;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"&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
          &lt;/div&gt;  
          &lt;br&gt;&lt;br&gt;
  
  
      &lt;/div&gt;
          &lt;!--content_inner div ends here--&gt;
  
  
  
  
                  &lt;!--- body --&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I tried to integrate it in a page it is not working which also consists of the following code.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script type="text/javascript" src="gallery/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript" src="show.js"&gt;&lt;/script&gt;
  
  &lt;!--[if IE]&gt;
  &lt;script type="text/javascript"&gt;
  $().ready(function() {
  $(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
  });
  &lt;/script&gt; 
  &lt;![endif]--&gt;
  &lt;script type="text/javascript"&gt;
  $().ready(function() {
  $('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried using noconflict() function and used jQuery instead of $ but no use.</p>
  
  <p>Could anyone be able to solve this pls.</p>
  
  <p>Regards,
  Rekha</p>