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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    getting 2 jquery plugins to work

    Hi
    I am currently working on a website and I'm trying to use a jquery content slider with a jquery lightbox. Unfortunately, both won't work at the same time. When i take out one, the other would work and vice versa. I'm pretty new to javascripts so when I tried to use noConflict, it somehow made the lightbox work but not the slider, and I have no idea how to use it properly..

    The first half is for the lightbox and the last big after the noConflict is for the content slider.

    Code:
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    	<script>
    		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    	</script>
    	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     	<link rel="stylesheet" href="style.css" />
    	
    	
    <script type="text/javascript">
      $.noConflict();
      jQuery(document).ready(function($) {
        	$(document).ready(function() {
    			/*
    			*   Examples - images
    			*/
    
    			$("a#example1").fancybox();
    
    			$("a#example2").fancybox({
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
    
    			$("a#example3").fancybox({
    				'transitionIn'	: 'none',
    				'transitionOut'	: 'none'	
    			});
    
    			$("a#example4").fancybox({
    				'opacity'		: true,
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'none'
    			});
    
    			$("a#example5").fancybox();
    
    			$("a#example6").fancybox({
    				'titlePosition'		: 'outside',
    				'overlayColor'		: '#000',
    				'overlayOpacity'	: 0.9
    			});
    
    			$("a#example7").fancybox({
    				'titlePosition'	: 'inside'
    			});
    
    			$("a#example8").fancybox({
    				'titlePosition'	: 'over'
    			});
    
    			$("a[rel=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
    
    			/*
    			*   Examples - various
    			*/
    
    			$("#various1").fancybox({
    				'titlePosition'		: 'inside',
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    
    			$("#various2").fancybox();
    
    			$("#various3").fancybox({
    				'width'				: '75%',
    				'height'			: '75%',
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'type'				: 'iframe'
    			});
    
    			$("#various4").fancybox({
    				'padding'			: 0,
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    		});
      });
     jQuery(document).ready(function(){
    		$j("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	});
    </script>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/jquery-ui.min.js" ></script>
    Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    First, you're loading jQuery at least twice on this page, then you're calling the .tabs() method before loading jQuery UI. Also, I don't think you should need to use .noConflict() unless you're using another framework on the page that's clashing with jQuery - and I guess you're not. Finally, you can remove the nested document ready functions. Try:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js" ></script>
    	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     	<link rel="stylesheet" href="style.css" />
    	
    	
    <script type="text/javascript">
     $(document).ready(function() {
    
    	$("a#example1").fancybox();
    
    	$("a#example2").fancybox({
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
    
    	$("a#example3").fancybox({
    				'transitionIn'	: 'none',
    				'transitionOut'	: 'none'	
    			});
    
    	$("a#example4").fancybox({
    				'opacity'		: true,
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'none'
    			});
    
    	$("a#example5").fancybox();
    
    	$("a#example6").fancybox({
    				'titlePosition'		: 'outside',
    				'overlayColor'		: '#000',
    				'overlayOpacity'	: 0.9
    			});
    
    	$("a#example7").fancybox({
    				'titlePosition'	: 'inside'
    			});
    
    	$("a#example8").fancybox({
    				'titlePosition'	: 'over'
    			});
    
    	$("a[rel=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
    
    			/*
    			*   Examples - various
    			*/
    
    	$("#various1").fancybox({
    				'titlePosition'		: 'inside',
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    
    	$("#various2").fancybox();
    
    	$("#various3").fancybox({
    				'width'				: '75%',
    				'height'			: '75%',
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'type'				: 'iframe'
    			});
    
    	$("#various4").fancybox({
    				'padding'			: 0,
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    
    	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	
    });
    </script>
    Last edited by SB65; 12-12-2010 at 01:09 PM.

  • Users who have thanked SB65 for this post:

    atlanteay (12-12-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much. It works perfectly now!


  •  

    Posting Permissions

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