SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast rekha_shp's Avatar
    Join Date
    Jan 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

    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.

    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. #2
    SitePoint Enthusiast rekha_shp's Avatar
    Join Date
    Jan 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

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

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rekha_shp View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •