mootools slideshow not working with JQuery. Need help !

Posted by Shantanu Gupta on Stack Overflow See other posts from Stack Overflow or by Shantanu Gupta
Published on 2010-03-26T11:33:27Z Indexed on 2010/03/26 19:23 UTC
Read the original article Hit count: 570

Filed under:
|
|
|
|

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>   

© Stack Overflow or respective owner

Related posts about mootools

Related posts about JavaScript