Lightbox in Css werkt niet, alles al geprobeerd!!

Status
Niet open voor verdere reacties.

lientjuh95

Nieuwe gebruiker
Lid geworden
8 sep 2014
Berichten
1
Ik ben al een hele dag bezig om het voor elkaar te krijgen dat lightbox gaat werken. Ik krijg het niet gevonden. Ik zal mijn html code kopiëren en dan hoop ik dat er iemand is die mij kan helpen.:):)
Overigens gaat het over de afbeeldingen in de class eenVierdekolom, tweeVierdeKolom enz...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio Eline</title>
<link href="style1.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../Ajs/prototype.js"></script>
<script type="text/javascript"
src="../Ajs/scriptaculous.js?load=effects,builder"></script>
<script type="text/javacript" src="../Ajs/lightbox.js"></script>
<link href="Acss/lightbox.css" rel="stylesheet" type="text/css" media="screen" />




</head>

<body>
<div id="container">

<div id="koptekst">

<h2>

</h2>

</div>





<div class="reset"></div>


<div id="hoofdNavigatie">
<ul>
<li><a href="portfolio.html" class="actief">portfolio &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="about.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; about me</a></li>
<li><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;home</a></li>
<li><a href="skills.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skills</a></li>
<li><a href="contact.html" class="laatsteLink">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contact</a></li>
</ul>

</div>

<div id="bigtext">

“I <span class="groen">create</span> digital experiences, visual <span class="groen">identities</span> and emotional connection
<br>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;between <span class="groen">brands</span> and people.”
</div>

<div id="hoofdkopjes">
<h1>photography&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphic design&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;digital art &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;product&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </h1>
</div>


<div class="reset"></div>

<div class="eenVierdeKolom eenVierdeKolomLaatste">
<h3>Sustainable Counter</h3>
<h4>I was asked to make a sustainable counter for Restaurant '08</h4>
<a href="img/balie22.png" rel="lightbox"><img src="Aimg/balie2.jpg" alt="balie2" width="160" height="160" border=0 /></a> </div>


<div class="eenVierdeKolom">
<h3>Jean Paul Gaultier Icon</h3>
<h4>I was asked to make icon for the app of Jean Paul Gaultier</h4>
<a href="img/App icoon template kopie.png" rel="lightbox"><img src="Aimg/jeanpaulgaultierappicoon.png" width="160" height="160" /></a>
</div>

<div class="eenVierdeKolom">
<h3>Festival Mundial</h3>
<h4>This is the ticket I designed for Festival Mundial</h4>
<a href="img/Voor en achterkant entreekaart.jpg" rel="lightbox"><img src="Aimg/entreeticketmundial.png" width="160" height="160" /></a> </div>



<div class="eenVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="Aimg/anyck 5.jpg" rel="lightbox"><img src="Aimg/anyckklein2.png" width="160" height="160" alt="foto1" /></a>
</div>




<div class="reset"></div>

<div class="tweeVierdeKolom tweeVierdeKolomLaatste">
<h3>Sustainable Counter</h3>
<h4>I was asked to make a sustainable counter for Restaurant '08</h4>
<a href="img/balie11.png" rel="lightbox"><img src="Aimg/balie.png" width="160" height="160" alt="balie" /></a> </div>

<div class="tweeVierdeKolom">
<h3>App Jean Paul Gaultier</h3>
<h4>The app I designed for the perfume of Jean Paul Gaultier</h4>
<a href="img/Iphonetjes met schermen.png" rel="lightbox"><img src="Aimg/appjeanpaul.png" width="160" height="160" alt="appjeanpaultel" /></a>
</div>

<div class="tweeVierdeKolom">
<h3>Festival Mundial</h3>
<h4>I designed a poster for Festival Mundial</h4>
<a href="img/Poster week 4.png" rel="lightbox"><img src="Aimg/mundialfoto.png" width="160" height="160" alt="mundial" /></a> </div>

<div class="tweeVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/anyck 6kopie.png" rel="lightbox"><img src="Aimg/anyckklein3.png" width="160" height="160" alt="foto2" /></a> </div>

<div class="drieVierdeKolom drieVierdeKolomLaatste">
<h3>Communication</h3>
<h4>I had to make something I could give to people</h4>
<a href="img/communicatiemiddel.jng.jpg" rel="lightbox"><img src="Aimg/communicatiemiddel.png" width="160" height="160" alt="communicatiemiddel" /></a>
</div>

<div class="drieVierdeKolom">
<h3>Website</h3>
<h4>I designed a website for a new sustainable restaurant</h4>
<a href="img/website restaurant 08.png" rel="lightbox"><img src="Aimg/website.png" width="160" height="160" alt="website" /></a>
</div>

<div class="drieVierdeKolom">
<h3>Flyer Festival Mundial</h3>
<h4>I designed this flyer for Festival Mundial, you can rub with your finger so the line-up appeared</h4>
<a href="img/Flyer voorkant, achterkant, rubbingkopie.png" rel="lightbox"><img src="Aimg/flyermnd.png" width="160" height="160" />
</a> </div>

<div class="drieVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/anyck 8.png" rel="lightbox"><img src="Aimg/anyckklein4.png" width="160" height="160" alt="foto4" />
</a></div>

<div class="vierVierdeKolom vierVierdeKolomLaatste">
<h3>Perfume Display</h3>
<h4>I had to make a perfume packaging what is at the same time a display</h4>
<a href="img/Verpakking 2.png" rel="lightbox"><img src="Aimg/parfum1.png" width="160" height="160" alt="parfum1" /></a> </div>

<div class="vierVierdeKolom">
<h3>Logo Restaurant '08</h3>
<h4>I designed a logo for a new sustainable restaurant</h4>
<a href="img/logo restaurant 08.png" rel="lightbox"><img src="Aimg/logorestaurant.png" width="160" height="160" alt="logorestaurant" /></a> </div>

<div class="vierVierdeKolom">
<h3>Sticker Mundial</h3>
<h4>I designed a sticker for Festival Mundial</h4>
<a href="img/vlinder mayakopie.png" rel="lightbox"><img src="Aimg/stickermundial.png" width="160" height="160" alt="stickermundial" /></a> </div>

<div class="vierVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/anyck 3.png" rel="lightbox"><img src="Aimg/anyckklein5.png" width="160" height="160" alt="foto3" />
</a></div>


<div class="vijfVierdeKolom vijfVierdeKolomLaatste">
<h3>Perfume Display</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/Verpakking 4.png" rel="lightbox"><img src="Aimg/parfum2.png" width="160" height="160" alt="parfum2" /> </a></div>

<div class="vijfVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/entree mundialkopie.png"><img src="Aimg/mayatempelmundial1.png" width="160" height="160" /></a> </div>

<div class="vijfVierdeKolom">
</div>

<div class="vijfVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/anyck 4.png" rel="lightbox"><img src="Aimg/anyckklein6.png" width="160" height="160" alt="anyck5" /></a> </div>


<div class="zesVierdeKolom zesVierdeKolomLaatste">
<h3>Sustainable plant</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/Plantje in blik.png" rel="lightbox"><img src="Aimg/plantjeblik.png" width="160" height="160" alt="plantjeblik" /></a> </div>

<div class="zesVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/entree mundial 2kopie.png" rel="lightbox"><img src="Aimg/mayatempelmundial3.png" width="160" height="160" />
</a></div>

<div class="zesVierdeKolom">
</div>

<div class="zesVierdeKolom">
<h3>Jean Paul Gaultier</h3>
<h4>I was asked to make an advertisement in the style of Jean Paul Gaultier</h4>
<a href="img/anyck 2.png" rel="lightbox"><img src="Aimg/anyckklein7.png" width="160" height="160" alt="anyck6" /></a>
</div>

</div>
</body>
</html>
 
Doe je op een online server het resultaat bekijken? Of gebruik je XAMPP of een andere server (simulatie) software? De kans is namelijk aanwezig dat de paths naar de javascriptfiles niet goed werken (dit zie je vooral als je voor XAMPP geen virtual server (met eigen lokaal domein) hebt gedefinieerd). Dus probeer eens src="http://jouwsite.nl/jouwmap/Ajs/scriptaculous.js?load=effects,builder"> of als je xampp gebruikt src="http://localhost/jouwmap/Ajs/scriptaculous.js?load=effects,builder">.

Misschien werkt dat?
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan