We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33636
    • 7 Posts
    Hi there -

    I’m developing a site, and am having trouble implementing the superfish jquery plugin on the same page as an instance of fancybox. I have the menu system working on any page that does not initialize the fancybox plugin however in order to do this I was referencing jquery-1.2.6.min.js. Even though it says it suports later version of jquery.

    The fancybox plug in is calling jquery.min.js v 1.4 from the CDN at googleapis.com and it works using this verion of jquery. I’m using this plug in on only two specific pages, but the problem that I am encountering is that on these pages my navagation bar is so longer using the superfish javascript to interact with the menu and is reverting to a pure css menu.

    If I try to run fancybox from the earlier version of jquery it doesn’t work at all.

    I’m a novice to web development and am primarily a graphic designer and so I’m sure I’m doing something wrong so if anyone can help me figure it out please let me know. I am pasting the code that I’m using to initialize the scripts as well, and if there is any other information someone would need to help with this issue, please let me know and I will post that as well. thanks

    Code that intializes the superfish and hoverIntent javascript:
    <link rel="stylesheet" href="[(site_url)]index.php?id=56" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="[(site_url)]index.php?id=58" type="text/css" media="screen" /> 
    
    <script type="text/javascript" src="assets/superfish/jquery-1.2.6.min.js"></script> 
    <script type="text/javascript" src="assets/superfish/hoverIntent.js"></script> 
    <script type="text/javascript" src="assets/superfish/superfish.js"></script> 
    
    <script type="text/javascript"> 
    
     $(document).ready(function(){ 
            $("ul.sf-menu").superfish({ 
               animation:   {opacity:'show',height:'show'},
                pathClass:  'active', 
                pathLevels: 1
            }); 
        }); 
     
    </script>



    Code that intializes the fancybox javascript:
    <link rel="stylesheet" href="assets/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
    
    
    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>-->
    <script type="text/javascript" src="assets/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    	$('a.lightbox').fancybox();
    });
    </script>


      • 23299
      • 1,161 Posts
      Getting these scripts to behave on a page can be a pain.

      IOne thing you can try is changing the order you present the two jQuery sets in the head of your document...
        • 33636
        • 7 Posts
        Hi there -

        Thanks for the response and I appologize for not responding sooner. This was exactly the problem and now it works. Thank you for the suggestion!
          • 23299
          • 1,161 Posts
          Wow, glad it worked for you...