Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Trouble getting 2 jquery plugins to work. (facebox and easySlider)

    I am having trouble getting a modal to work with facebox. I have the easySlider working. I've spent 3 hours a day on this for the past week. I feel like the problem is in the document.ready function but google tells me it should be ok. Thanks.

    Code:
    <link href="../styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    	background-image: url(../Images/pagebg3.png);
    }
    </style>
    <link href="../facebox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="../facebox.js" type="text/javascript"></script>
    <script src="../scripts/easySlider1.5.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    		$(document).ready(function(){	
    			$("#slider").easySlider({
    			});
    		});
    		
    </script>
      <script type="text/javascript">
        $(document).ready(function($) {
          $('a[rel*=facebox]').facebox({
            loadingImage : 'loading.gif',
            closeImage   : 'closelabel.png'
          })
        })
      </script>
    
    
    
    </head>
    
    <body>
    
    <div id="outerwrapper">
    
      <div id="slider">
        <ul>
          <li><img src="../Images/zslide1.png" width="920" height="244" align="left" /></li>
          <li><img src="../Images/slide2.png" width="920" height="245" /></li>
          <li><img src="../Images/Slide3.gif" width="920" height="245" /></li>
        </ul>
    </div>
    
    
      <!--Modal Window-->
     <div class="example">
              <h2>Divs</h2>
    
              <p> <a href="#emergencyhelprequest" rel="facebox">View the 'info' div in the Facebox</a> </p>
    
              <div class="code">
                <h3>The Code</h3>
                
              </div>
            </div>
    
      
        <div id="emergencyhelprequest" style="display:none;">
        <p> Hey, I'm the 'info' div! </p>
      
      </div>
    
        <!-- End of Modal Window-->
    </div>
    </body>
    </html>

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Code:
    $(document).ready(function($) {
    Lose the red $. If you put it there as function parameter without actually calling the function with any parameter, it will be null instead of the global jQuery object.

    Edit:
    Sorry, that's not it; I just remembered that .ready() automatically passes the global jQuery object to the function you provide. You can get rid of it, though, since it's confusing and you're not using .noConflict() anyway.

    It would be easier to see what the problem is if you showed this on a live site.
    Last edited by venegal; 01-25-2011 at 09:08 AM.

  • Users who have thanked venegal for this post:

    Swordfish60423 (01-27-2011)


  •  

    Posting Permissions

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