el_suavo
asked on
Javascript working with multiple plugins in HTML
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.
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>
ASKER
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"></if rame></td>
<td><iframe src="slideshow2.html"></if rame></td>
<td><iframe src="slideshow3.html"></if rame></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 ();
<body>
<table><tr><td><iframe src="slideshow1.html"></if
<td><iframe src="slideshow2.html"></if
<td><iframe src="slideshow3.html"></if
</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 ();
ASKER
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Thats all!!