jQuery Galleria - Error: $("ul.gallery_demo").galleria is not a function

JavaScript
1

Hi,

I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,

Error: $(“ul.gallery_demo”).galleria is not a function

The code is working for me separately. Here’s the code.

<!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>

When I tried to integrate it in a page it is not working which also consists of the following code.

<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>

I have tried using noconflict() function and used jQuery instead of $ but no use.

Could anyone be able to solve this pls.

Regards,
Rekha

2

What have you done?

That is, your attempts to integrate them has failed. You haven’t shown us how you have attempted to integrate them, so we cannot tell you what changes you need to make to get things going.

3

Hi,

I myself solved the issue. The issue is in the specification of the path of the galleria.js file.