$.noConflict() not working with mootools slide show. Need help !
- by Shantanu Gupta
I am working on a site http://tapasya.co.in where i just impemented mootools slideshow.
But I noticed that menubar that i was using stopped working, it was supposed to drop horizontaly but it is not being displayed now. I have used jquery for it. Please see the source of the web page. What can be the problem ? Mootools conflicting with javascript or some other problem.
If I tries to use $.noConflict() it throws me an error in script
Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict'
I tried the given solution below. But it is not working.
<script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script>
<script type="text/javascript">
// <![CDATA[
$.noConflict();
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddmenu_open(){
ddmenu_canceltimer();
ddmenu_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}
function ddmenu_close(){
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function ddmenu_timer(){
closetimer = window.setTimeout(ddmenu_close, timeout);
}
function ddmenu_canceltimer(){
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
}}
$(document).ready(function(){
$('#ddmenu > li').bind('mouseover', ddmenu_open)
$('#ddmenu > li').bind('mouseout', ddmenu_timer)
});
document.onclick = ddmenu_close;
// ]]>
</script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' },
'2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' },
'3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' },
'4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }
};
// Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
//http://code.google.com/p/slideshow/wiki/Slideshow#Options:
var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002});
// Here we create the Lightbox instance.
// In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
var box = new Lightbox({
'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow),
'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow)
});
});
//]]>
</script>
