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.
When I tried to integrate it in a page it is not working which also consists of the following 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>
I have tried using noconflict() function and used jQuery instead of $ but no use.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>
Could anyone be able to solve this pls.
Regards,
Rekha
Reply With Quote
Originally Posted by rekha_shp
Bookmarks