We help IT Professionals succeed at work.

Javascript working with multiple plugins in HTML

el_suavo
el_suavo asked
on
Medium Priority
319 Views
Last Modified: 2013-11-18
I am working with several javascript plugins.  

First, I am using JQuery Cycle

http://www.malsup.com/jquery/cycle/

And inside that I am trying to use noobSlide

http://www.efectorelativo.net/laboratory/noobSlide/

I get each one to work independently but not together.  Is it possible to get these to work together?  I am just learning javascript so this is all pretty new to me.  Thanks in advance.
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/_class.noobSlide.packed.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
 
$(function() { 
    $('#left')
	.cycle({
	fx: 'fade',
	timeout: 0,
	pager: '#navlist',
	pagerAnchorBuilder: function(idx, slide) {
		return '#navlist li:eq(' + idx + ') a';
	}
	});
	 $('#right')
	.cycle({
	fx: 'fade',
	timeout: 0,
	pager: '#navlist',
	pagerAnchorBuilder: function(idx, slide) {
		return '#navlist li:eq(' + idx + ') a';
	}
	});  
	
}); 
 
window.addEvent('domready',function(){
			
		//SAMPLE 7
		var startItem = 3; //or   0   or any
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
		var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
		var nS7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $$('#thumbs_handles7 span'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
			thumbsFx.start(currentItem*60-568);
		},
		startItem: startItem
		});
		//walk to first with fx
		nS7.walk(0);
	
	
	});
 
</script>

Open in new window

Comment
Watch Question

The problem is with same javascript variable/function names calling in different javascript. You can use <iframe> on your main index page, and call different plugin from iframe src page.

Thats all!!

Author

Commented:
Sorry but I am pretty new.  Could you spell that out in a little more detail?
Suppose your index page content is like this

<body>
<table><tr><td><iframe src="slideshow1.html"></iframe></td>
<td><iframe src="slideshow2.html"></iframe></td>
<td><iframe src="slideshow3.html"></iframe></td>
</tr></table>

</body>

now; inside each html, include different javascript you wish to see in main page. like;

slideshow1.html
==============
< script src = "firstscript.js"></script>

any functions ();

slideshow2.html
=============
< script src = "secondscript.js"></script>

any functions ();

Author

Commented:
Actually this is all being done on one page with <div> to separate the different sections.  I am not using tables at all.  Can it still work?
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.