Solved

Javascript working with multiple plugins in HTML

Posted on 2009-06-27
5
286 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

0
Comment
Question by:el_suavo
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:sajayj2009
ID: 24727404
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!!
0
 

Author Comment

by:el_suavo
ID: 24727454
Sorry but I am pretty new.  Could you spell that out in a little more detail?
0
 
LVL 12

Expert Comment

by:sajayj2009
ID: 24727518
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 ();

0
 

Author Comment

by:el_suavo
ID: 24728572
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?
0
 

Accepted Solution

by:
el_suavo earned 0 total points
ID: 24730698
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now