Meerdere jQuery scripts initialiseren [opgelost]

[realrock]

Beste forumleden,

Ik ben een website aan het maken waarbij ik twee jquery scrips wil gebruiken, één voor het menu / de scroller en één voor een afbeeldingen tool op de pagina.

Beide scrips werken afzonderlijk, maar als ik ze tegelijkertijd inlaad werken ze geen van beiden...

Mijn vraag; Hoe kun je verkomen dat jquery scripts conflicteren?

Ik weet dat het meer met javascript te maken heeft dan met CMSMS, maar misschien dat iemand een idee heeft

Dank/groet,
Peter

Script 1:

Code: Select all

$(document).ready(function(){
	params = {
		mask:$('#images-mask'),
		elements:$('.item_content_slide'),
		prevbtn:$('#prev-button'),
		nextbtn:$('#next-button'),
		displaytype:'row',
		elementsByRow:1,
		topSeparator:1,
		leftSeparator:0,	
		rowsDisplayed:3
	};
	$('#images-container').magicScroller( params );
 });

Script 2:

Code: Select all

$(document).ready(function($){
	$('#scroller').tinyscrollbar({ sizethumb: 100 });
	$('#mega-1').dcVerticalMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade',
		direction: 'right'
	});
});

Mijn niet werkende probeersel :

Code: Select all

$(document).ready(function($){
	$('#scroller').tinyscrollbar({ sizethumb: 100 });
	$('#mega-1').dcVerticalMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade',
		direction: 'right'
	});
	$('#images-container').magicScroller({
		params = mask:$('#images-mask'),
		elements:$('.item_content_slide'),
		prevbtn:$('#prev-button'),
		nextbtn:$('#next-button'),
		displaytype:'row',
		elementsByRow:1,
		topSeparator:1,
		leftSeparator:0,	
		rowsDisplayed:3
 	});
});

[deactivated010521]

----------

[realrock]

Dank voor je reactie Arnoud! Ik heb het bijna werken denk ik

Ik heb na wat googelen een aantal var's aangemaakt voor de verschillende scripts, die ik dan weer aanroep.

Het probleem is nu dat nu steeds de laatste fuctie die aangeroepen wordt niet werkt ( bijvoorbeeld: scrollerFunction in het voorbeeld hieronder).

Heb je een idee wat ik hier mis?

Code: Select all

var menuFunction;
	$(document).ready(function() {
		 menuFunction = function() {
			$('#mega-1').dcVerticalMegaMenu({
			rowItems: '3',
			speed: 'fast',
			effect: 'fade',
			direction: 'right'
		});
     };
});

var scrollerFunction;
$(document).ready(function() {
     scrollerFunction = function() {
        $('#scroller').tinyscrollbar({ sizethumb: 100 });
     };
});

var itemscrollerFunction;
$(document).ready(function() {
     itemscrollerFunction = function() {
        $('#images-container').magicScroller({
		mask:$('#images-mask'),
		elements:$('.item_content_slide'),
		prevbtn:$('#prev-button'),
		nextbtn:$('#next-button'),
		displaytype:'row',
		elementsByRow:1,
		topSeparator:1,
		leftSeparator:0,	
		rowsDisplayed:3
	});
     };
});

$(document).ready(function() {
    menuFunction();
});

$(document).ready(function() {
    itemscrollerFunction();
});

$(document).ready(function() {
    scrollerFunction();
});

[deactivated010521]

----------

[realrock]

Ik heb het met wat proberen aan de gang gekregen

Wat ik heb gedaan is dat ik de scroller nu inlaad met "(window).load". Ik weet niet of dat de juiste manier is maar het werkt

Dank voor je hulp!

Code: Select all

var menuFunction;
	$(document).ready(function() {
		 menuFunction = function() {
			$('#mega-1').dcVerticalMegaMenu({
			rowItems: '3',
			speed: 'fast',
			effect: 'fade',
			direction: 'right'
		});
     };
});

var scrollerFunction;
$(document).ready(function() {
     scrollerFunction = function() {
        $('#scroller').tinyscrollbar({ sizethumb: 100 });
     };
});

var itemscrollerFunction;
$(document).ready(function() {
     itemscrollerFunction = function() {
        $('#images-container').magicScroller({
		mask:$('#images-mask'),
		elements:$('.item_content_slide'),
		prevbtn:$('#prev-button'),
		nextbtn:$('#next-button'),
		displaytype:'row',
		elementsByRow:1,
		topSeparator:1,
		leftSeparator:0,	
		rowsDisplayed:3
	});
     };
});

$(document).ready(function() {
    menuFunction();
    itemscrollerFunction();
});

$(window).load(function() {
    scrollerFunction();
});