Hulp nodig met jQuery inbouwen

**Edgar van de Oudeweetering** · 15-01-2011, 14:32

Beste SD-ers,

Ik ben nu al een aantal dagen bezig met het inbouwen van verschillende jQuery elementen in een layout, maar ik kom nu echt niet meer verder. Ik probeer 'Smoothgallery 2.0' in te bouwen, maar zodra ik de gallery 'call' gebeurd er niets. In de browser worden de plaatjes domweg onder elkaar geplaatst.
Ik heb alle bestanden dubbel gecheckt, en ze staan allemaal op de juiste plek.

Ik dank jullie alvast zeer voor jullie hulp, hopelijk kunnen jullie mij de goede richting in sturen,

Link naar website: http://bit.ly/f7QezM
Hieronder de HTML code waar het om gaat:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>	
<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true
			});
		});	
	</script>
    <script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script>
</head>

<body>

<div id="container">
	
	<div id="header">
	
		<h1 class="logo"><a href="#">GPS Adventure</a></h1>
		
		<div class="menu">
			<ul class="dropdown">
				<li class="current"><a href="#"><span>Home</span></a></li>
				<li><a href="#"><span>Activiteiten</span></a>
					<ul class="sub_menu">
						 <li><a href="#">Raften</a></li>
						 <li><a href="#">Mountainbike</a></li>
						 <li><a href="#">Zeilen</a></li>
						 <li><a href="#">Ski&euml;n</a></li>
						 <li><a href="#">Langlaufen</a></li>
						 <li><a href="#">Bergbeklimmen</a></li>
						 <li><a href="#">Parasailen</a></li>
					</ul>
				</li>
				<li><a href="#"><span>Maatwerk</span></a></li>
				<li><a href="#"><span>Verhuur</span></a></li>
				<li><a href="#"><span>Nieuwsbrief</span></a></li>
				<li><a href="#"><span>Gastenboek</span></a></li>
				<li><a href="#"><span>Video's</span></a></li>
				<li><a href="#"><span>Contact</span></a></li>
			</ul>
		</div>
	
	</div>
	<!-- /header -->
	
	<div id="body">
		<div class="inner clearfix">
	
			<div class="ervaringen">
			
				<div class="slide" id="slider">
				<ul>
                <li>Heey</li>
				<li>Alles goed?</li>
				<li>Met mij wel.</li>
				<li>Dat is mooi.</li>
				<li>Zeker.</li>			
			</ul>
				</div>
				
				<a href="#" class="vorige">&lt; Vorige ervaring</a>
				
			</div>
			<!-- /ervaringen -->
			
						<div class="links">
			
				<div class="fotoslider">
				<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: false,
					defaultTransition: "continuoushorizontal"
				});
			}
			window.addEvent('domready', startGallery);
		</script>
					<div class="slide" id="myGallery">
						<div class="imageElement">
					<h3>Item 1 Title</h3>
					<p>Item 1 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="https://www.sitedeals.nl/images/fotogallerij/img_01.jpg" class="full" />
				</div>
				<div class="imageElement">
					<h3>Item 2 Title</h3>
					<p>Item 2 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="https://www.sitedeals.nl/images/fotogallerij/img_01.jpg" class="full" />
				</div>
                        
					</div>
					
					<a href="#" class="prev"></a>
					<a href="#" class="next"></a>
					
				</div>
				<!-- /fotoslider -->
			
				<div class="content">
					<h1>Welkom bij GPS-Adventures Veluwe,</h1>
					<div class="tekst">
				
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id auctor lectus.Morbi accumsan pharetra odio, ut faucibus velit fermentum quis. Quisque auctor neque id sem fringilla in pulvinar velit sodales. Nam interdum tristique tortor, sed varius nisl fermentum non. Donec id quam metus. Maecenas sem quam, facilisis a mollis 
	ut, commodo a libero. Integer pharetra justo eget leo gravida sit amet imperdiet magna eleifend. Duis eget lacus eget justo viverra placerat. Vestibulum turpis at urna molestie cursus non quis urna.  Aliquam id arcu nibh, et auctor sapien. Duis sit amet libero sed velit suscipit egestas sed in lectus. Duis convallis, libero sed blandit dapibus, odio velit gravida quam, id sagittis  felis odio nec risus. Etiam nulla nisi, laoreet et volutpat vel, ullamcorper quis tortor. Pellentesque convallis vehicula mauris, nec eleifend nunc porttitor at. Vivamus eleifend convallis vulputate.</p>
						<p>Etiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan anteEtiam tristique, lectus a sodales sollicitudin, augue sapien consequat purus, nec gravida eros  urna get quam.Integer id turpis quis ligula blandit ullamcorper. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque ipsum ut augue mattis vehicula. Maecenas bibendum quam et arcu vestibulum sit amet  ullamcorper augue laoreet. Duis interdum, eros vel tincidunt ornare, turpis erat elementum justo, eget tristique turpis metus quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris magna. Sed nec orci lorem. Nullam dictum, erat vitae rutrum condimentum, metus libero consequat sapien, in aliquet elit nibh eget ligula.msan ante.</p>
				
					</div>
				</div>
				<!-- /content -->
				
			</div>
			<!-- /links -->

			<div class="sidebar">
			
				<div class="bellen">
					
					<h3>- Gratis teruggebeld worden ?</h3>
					<form action="#" class="belform">
						<p>Wilt u gratis teruggebeld worden door ons? Dat kan! Vul hieronder uw naam + telefoonnummer in.</p>
						<b>Naam:</b>
						<label><input type="text" /></label>
						<b>Telefoonnummer:</b>
						<label><input type="text" /></label>
						<input type="submit" class="button" value="- Bel mij terug" />
					</form>
					
				</div>
				<!-- /bellen -->
				
				<div class="eigen_ad">
					<img src="https://www.sitedeals.nl/images/afbeeldingen/img_01.jpg" alt="" />
					<a href="#" class="huur_nu">Huur nu</a>
				</div>
				<!-- /eigen_ad -->
				
				<div class="twitter">
					<!-- hier twitter integreren -->
				</div>
				<!-- /twitter -->
			
			</div>
			<!-- /sidebar -->
			
			<div id="footer">

				<div class="right">
					<p>Gecreëerd door<br />
					<a href="#">Site-Made.nl</a></p>
				</div>
			
				<div class="left">
					<p><a href="#">Algemene voorwaarden</a><br />
					<a href="#">Contact</a></li>
				</div>
			
			</div>
			<!-- /footer -->

		</div>	
	</div>
	<!-- /body -->
	
</div>
<!-- /container -->

</body>
</html>

**Marcel van Vrouwerf** · 15-01-2011, 15:19

Dikke kans dat je conflicten hebt door het gebruik van jQuery én MooTools tegelijkertijd; kijk eens of het lukt wanneer je geen gebruik maakt van mootools.

**Edgar van de Oudeweetering** · 15-01-2011, 15:22

Dankje voor je reactie Marcel, maar Mootools heb ik nodig om de gallery te laten werken, dat sowieso.. Het moet ergens anders inzitten. Heb ook al verschillende versies gebruikt van Mootools, maar daar heeft het volgens mij niet mee te maken..

**Rein Van Oyen** · 15-01-2011, 15:28

En toch is het alles behalve aan te raden deze samen te gebruiken. Waarom twee libraries, die min of meer hetzelfde doen, samen gebruiken?

**Edgar van de Oudeweetering** · 15-01-2011, 15:30

Origineel gepost door Rein Van Oyen

En toch is het alles behalve aan te raden deze samen te gebruiken. Waarom twee libraries, die min of meer hetzelfde doen, samen gebruiken?

Ja, maar hier ligt het niet aan. Ik gebruik dezelfde Smoothgallery in een ander design, waar het wèl werkt. Het zit hem ergens anders in, alleen ik heb het helaas niet kunnen vinden tot nu toe.

**Tjerk de Heer** · 15-01-2011, 16:06

Het eerste wat me opvalt is dat je tweemaal een functie "startGallery" erin hebt, eenmaal in de head en eenmaal in de body.

Kun je wellicht een (al dan niet gemaskeerde) link plaatsen naar de pagina zelf?

**Edgar van de Oudeweetering** · 15-01-2011, 16:13

Dit is de link naar de pagina: http://bit.ly/f7QezM
Dat de functie 'startGallery' er 2 keer instaat was een foutje, heb deze weggehaald.

**Tjerk de Heer** · 15-01-2011, 20:57

Het gaat bij mij weer goed als ik het volgende doe:

In de <head> sectie de boel zo rangschikken en jQuery.noConflict toepassen voor de zekerheid:

Code:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>    
<script type="text/javascript" src="js/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){    
        jQuery("#slider").easySlider({
            auto: true, 
            continuous: true
        });
    });    
</script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>

Voor het dropdown menu moet dan in js/jquery.dropdownPlain.js de $ ook nog veranderen naar jQuery als zo:

Code:

$(function(){
    jQuery("ul.dropdown li").hover(function(){
        jQuery(this).addClass("hover");
        jQuery('ul:first',this).css('visibility', 'visible');
    }, function(){
        jQuery(this).removeClass("hover");
        jQuery('ul:first',this).css('visibility', 'hidden');
    
    });
    jQuery("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
});

Samenvattend: volgens mij werkt het allemaal weer (Firefox en IE getest) door jQuery.noConflict toe te passen en de verandering in volgorde van het inladen van de setjes externe javascript bestanden.

Kun je hier wat mee?

**Edgar van de Oudeweetering** · 15-01-2011, 23:22

Ik ben je heel erg dankbaar Tjerk! Het werkt perfect. Dat ik daar nou zelf niet op gekomen ben..
Nogmaals hartelijk bedankt!

Hulp nodig met jQuery inbouwen