Lightbox virker pludselig ikke

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
trinehuda
Begynder
Indlæg:2
Tilmeldt:6. nov 2013, 10:55
Lightbox virker pludselig ikke

Indlæg af trinehuda » 6. nov 2013, 10:57

Hej derude.

Hvordan HULEN fejlfinder jeg bedst? Jeg kan simpelthen ikke få mit lightbox galleri til at virke efter jeg har implementeret det i selve sitet.

Stierne til billederne er ok og tjekket

Kode: Vælg alt

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Oakley Airwave 1.5</title>
		
		<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
		<link href="css/grids.css" rel="stylesheet" type="text/css" media="screen">
		<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen">
	<!-- Gallery Scripts -->
		<script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="js/lightbox.js" type="text/javascript"></script>
        <script src="js/effects.js" type="text/javascript"></script>
        <script src="js/builder.js" type="text/javascript"></script>
		
		<!-- Hover in features -->
		<script src="js/hover.js" type="text/javascript"></script>
		
		<!-- Page Scroller -->
		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<script src="js/animatescroll.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="wrapper">		
			<div id="filler"></div>
			<nav class="grid_12">
				<ul>
					<li><a href="index.html#video" onclick="$('#video').animatescroll({scrollSpeed:1000,easing:'swing'});">VIDEO</a></li>
					<li><a href="index.html#overview" onclick="$('#overview').animatescroll({scrollSpeed:1000,easing:'swing'});">OVERVIEW</a></li>
					<li><a href="index.html#features" onclick="$('#features').animatescroll({scrollSpeed:1000,easing:'swing'});">FEATURES</a></li>
					<li id="logo"><a href="http://www.oakley.com"><img src="img/logo.png" alt="Logo"></a></li>
					<li><a href="index.html#gallery" onclick="$('#gallery').animatescroll({scrollSpeed:1000,easing:'swing'});">GALLERY</a></li>
					<li><a href="index.html#application" onclick="$('#application').animatescroll({scrollSpeed:1000,easing:'swing'});">APPLICATION</a></li>
					<li><a href="index.html#contact" onclick="$('#contact').animatescroll({scrollSpeed:1000,easing:'swing'});">CONTACT</a></li>
				</ul>
			</nav>
			
			<!-- Slide 1 - Front -->
			<div id="front">
			</div>
			
			<!-- Slide 2 - Video -->
			<div id="videobackground">
				<div id="video" class="contentarea">
					<h1>TAKE THE TOUR</h1>
					<video controls>
						<source src="movies/demo.mp4" type="video/mp4">
						<source src="movies/demo.ogg" type="video/ogg">
						You're browser does not support the video tag - Sorry!
					</video>
				</div>
			</div>
			
			<!-- Slide 3 - Overview -->
			<div id="overviewbackground">
				<div id="overview" class="contentarea">
					<div class="grid_6">
						<img src="img/goggles.png" alt="Oakley Airwave 1.5">
					</div>
					
					<div class="grid_5">
						<h1>OVERVIEW</h1>
						<p>Oakley Airwave 1.5 goggles combine world-class performance, protection, and comfort with a heads-up display that lets you view incoming calls and texts from your iPhone via Bluetooth wireless and the Oakley Airwave Snow app.
<br><br>
Airwave 1.5 integrates GPS, Wi-Fi, Bluetooth,
and more with a host of onboard sensors to give you instant access to a world of information. The latest edition offers a broader range of connectivity, new integration with social media, enhanced display graphics and improved battery life.</p>
					</div>
				</div>
			</div>
			
			<!-- Slide 4 - Features -->
			<div id="featuresbackground">
				<div id="features" class="contentarea">
					<h1>MANY FEATURES - ONE DISPLAY</h1>
					<div class="grid_1"></div>
					
					<div id="navigation" onmouseout="mouseOut()" onmouseover="navigation()">
						<div class="grid_1">
							<img src="img/nav_icon.png" alt="Navigation Icon">
						</div>
						<div class="grid_4" >
							<h2>NAVIGATION</h2>
							<p>Pinpoint your location on a resort map, find the run or point-of-interest you’re looking for.</p>
						</div>
					</div>
					
					<div id="speed" onmouseout="mouseOut()" onmouseover="speed()">
						<div class="grid_1">
							<img src="img/speed_icon.png" alt="Speed Icon">
						</div>
						<div class="grid_4">
							<h2>SPEED</h2>
							<p>The GPS integration can accurately measure how fast you are moving down the slope.</p>
						</div>
					</div>
					
					<div class="grid_12"></div>
					<div class="grid_1"></div>
					
					<div id="jump" onmouseout="mouseOut()" onmouseover="jump()">
						<div class="grid_1">
							<img src="img/jump_icon.png" alt="Jump Analytics Icon">
						</div>
						<div class="grid_4">
							<h2>JUMP ANALYTICS</h2>
							<p>Measure and track the number of jumps and airtime.</p>
						</div>
					</div>
					
					<div id="tracking" onmouseout="mouseOut()" onmouseover="tracking()">
						<div class="grid_1">
							<img src="img/tracking_icon.png" alt="Buddy Tracking Icon">
						</div>
						<div class="grid_4">
							<h2>BUDDY TRACKING</h2>
							<p>Locate and track friends that have the Oakley Airwave goggle or App on their smartphone.</p>
						</div>
					</div>
					
					<div class="grid_12"></div>
					<div class="grid_1"></div>
					
					<div id="smartphone" onmouseout="mouseOut()" onmouseover="phone()">
						<div class="grid_1">
							<img src="img/phone_icon.png" alt="Smartphone Icon">
						</div>
						<div class="grid_4">
							<h2>SMARTPHONE</h2>
							<p>View incoming calls and text messages with your smartphone connected.</p>
						</div>
					</div>
					
					<div id="music" onmouseout="mouseOut()" onmouseover="music()">
						<div class="grid_1">
							<img src="img/music_icon.png" alt="Music Icon">
						</div>
						<div class="grid_4">
							<h2>MUSIC</h2>
							<p>Music control gives full control of what you hear as you ski or board.</p>
						</div>
					</div>
					
					<img id="displays" src="img/displays/music.jpg" alt="Music Display">
					
				</div>
			</div>
			
		<!-- Slide 5 - Gallery -->
			<div id="gallerybackground">
				<div id="gallerybackground2">
					<div id="gallery" class="contentarea">
						<h1>GALLERY</h1>
						 <a href="images/gallery/oak_1.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"><img src="images/gallery/oak_1.jpg" alt="Oakley Airwave 1.5" /> </a>
                        <a href="images/gallery/oak_2.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"></a>
                        <a href="images/gallery/oak_3.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"></a>
                        <a href="images/gallery/oak_4.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"></a>
                        <a href="images/gallery/oak_5.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"></a>
                        <a href="images/gallery/oak_6.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5"></a>
                        <a href="images/gallery/oak_7.jpg" rel="lightbox[roadtrip]" title="Oakley Airwave 1.5 - Wireless Wrist Remote"></a>

					</div>
				</div>
			</div>

			<!-- Slide 6 - Application -->
			<div id="applicationbackground">
				<div id="application" class="contentarea">
					<div id="app_text" class="grid_6">
						<h1>APPLICATION</h1>
						<p>Oakley Airwave 1.5 goggles combine world-class performance, protection, and comfort with a heads-up display that lets you view incoming calls and texts from your iPhone via Bluetooth and the Oakley Airwave Snow app. 
Airwave 1.5 integrates GPS, Wi-Fi, Bluetooth, and more with a host of onboard sensors to give you instant access to a world of information. 
						</p><br>
						<ul>
							<li> • Snow Goggle with Heads-Up Display with integrated GPS, </li>
							<li> • Bluetooth, more </li>
							<li> • iPhone Connectivity via Oakley Airwave Snow app </li>
							<li> • View and control music, text messages, caller ID </li>
							<li> • Record and view speed, jump analytics, vertical, and altitude</li>
						</ul>
						
					</div>
				</div>
			</div>
			
			<!-- Slide 7 - Contact -->
			<div id="contactbackground">
				<div id="contact" class="contentarea">
					<div class="grid_4">
						<h1>GET IN TOUCH</h1>
						<p>We’re here for you! Contact us between 9.00 to 17.00 GTM Monday to Friday at: <br><br>
						E-mail: <a href="mailto:customercare-europe@oakley.com">customercare-europe@oakley.com</a><br>
						Phone: 00800 6255 3985</p>
					</div>
					<div id="social">
						<h1>WE ARE SOCIAL</h1>
						<a href="https://www.facebook.com/Oakley" target="_blank"><img class="grid_1" src="img/facebook.gif" alt="Twitter logo" ></a>
						<a href="https://twitter.com/oakley" target="_blank"><img class="grid_1" src="img/twitter.gif" alt="Twitter logo"></a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

MrLundholm
Rutineret
Rutineret
Indlæg:50
Tilmeldt:20. sep 2013, 15:33
Kontakt:

Re: Lightbox virker pludselig ikke

Indlæg af MrLundholm » 6. nov 2013, 15:40

Har du tjekket alle dine javascript henvisninger?

Ellers så prøv at bruge Chromes Dev. Tools til at se om du får nogle fejl!

trinehuda
Begynder
Indlæg:2
Tilmeldt:6. nov 2013, 10:55

Re: Lightbox virker pludselig ikke

Indlæg af trinehuda » 7. nov 2013, 08:57

Tak for svaret.
Umiddelbart har jeg fundet ud af, at JQuery og Lightbox ikke er glade for hinanden. På sitet er der en JQuery "animated scroller" og hvis jeg slettet den, virker lightbox helt fint. Er den slags javascript (som fx lightbox) bare YT og forældet???

MrLundholm
Rutineret
Rutineret
Indlæg:50
Tilmeldt:20. sep 2013, 15:33
Kontakt:

Re: Lightbox virker pludselig ikke

Indlæg af MrLundholm » 7. nov 2013, 13:32

Lightbox er stadig moderne og lægger selv stor vægt på det.
En mulighed kunne være at bruge fancybox som er jQuery baseret :)

Besvar