Page 1 of 1

Meerdere jQuery scripts initialiseren [opgelost]

Posted: Mon Apr 18, 2011 3:31 pm
by 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
 	});
});

Re: Meerdere jQuery scripts tegelijkertijd initialiseren

Posted: Mon Apr 18, 2011 4:46 pm
by deactivated010521
----------

Re: Meerdere jQuery scripts tegelijkertijd initialiseren

Posted: Mon Apr 18, 2011 5:25 pm
by 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();
});

Re: Meerdere jQuery scripts tegelijkertijd initialiseren

Posted: Tue Apr 19, 2011 8:32 am
by deactivated010521
----------

Re: Meerdere jQuery scripts initialiseren [opgelost]

Posted: Tue Apr 19, 2011 8:47 am
by 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();
});