Download het volgende:
http://dl.dropbox.com/u/15324127/test.rar
Kopieer alles wat er in dat bestandje staat en plaats dit in je directory.
Pas je html bestand aan met het volgende:
Plaats deze code tussen je body tags (<body> </body>
voor 3 afbeeldingen:
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/1.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/2.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/3.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>
Deze ook tussen de body tags:
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"}];
</script>
</div></div>
Deze tussen de <head> </head> tags:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
Als je html bestand een andere naam heeft dan kun je dit makkelijk veranderen "_siteRoot='index.html',_root='index.html';</script>"
Ik heb nu 3 afbeeldingen als voorbeeld gedaan. Als je meer afbeeldingen wilt doe dan het volgende:
Kopieer:
,{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"}
Plak dit in de javascript code die ik je eerder gaf. Doe dat na deze regel:
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"}
Ga zo door met het plakken van deze code. Hoe meer foto je wilt hoe vaker je dit na de volgende code moet plakken.
Dus bijv. zo:
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-8","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-9","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-10","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-11","client":"nature beauty","desc":"add your description here"}];
</script>
</div></div>
Dit is dus bedoeld voor 11 foto's
Het volgende moet je ook aanpassen voor 11 fotos:
<a href=""><img id="slide-img-1" src="images/1.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/2.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/3.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
<a href=""><img id="slide-img-1" src="images/FOTO" class="slide" alt="" /></a>
etc.
etc.
etc.
snap je het een beetje?