Tijden veranderen
Slideshow
jQuery werkt nu, inderdaad een aantal stomme fouten.
Ach ja. Nu heb ik dus het volgende:
Dit is de html, inclusief jQuery code (opgelsagen als .html)
Quote:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MoneyHoppers - Homepage</title>
<link href="style5.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/squey.scrollTo.js"></script>
<script src="js/jquery/localscroll.js">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("slideshow-nav a[href=#fotobar1]").addClass("active");
$("#slideshow-nav").localscroll({
target:'#slideshow-nav a").click(function(){
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
</script>
<div id="slideshow">
<ul>
<li id="anonce1"><a href="#"><img src="images/fotobar1.png" alt="Cool" /></a></li>
<li id="anonce2"><a href="#"><img src="images/fotobar2.png" alt="Groen" /></a></li>
<li id="anonce3"><a href="#"><img src="images/fotobar3.png" alt="Geel" /></a></li>
<li id="anonce4"><a href="#"><img src="images/header3.jpg" alt="Rood" /></a></li>
<li id="anonce5"><a href="#"><img src="images/Rand2.jpg" alt="Warm" /></a></li>
</ul>
</div>
<div id="slideshow-nav">
<ul>
<li><a href="#anonce1">Afbeelding 1</a></li>
<li><a href="#anonce2">Afb. 2</a></li>
<li><a href="#anonce3">Afb. 3</a></li>
<li><a href="#anonce4">Afb. 4</a></li>
<li><a href="#anonce5">Afb. 5</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>MoneyHoppers - Homepage</title>
<link href="style5.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/squey.scrollTo.js"></script>
<script src="js/jquery/localscroll.js">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("slideshow-nav a[href=#fotobar1]").addClass("active");
$("#slideshow-nav").localscroll({
target:'#slideshow-nav a").click(function(){
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
</script>
<div id="slideshow">
<ul>
<li id="anonce1"><a href="#"><img src="images/fotobar1.png" alt="Cool" /></a></li>
<li id="anonce2"><a href="#"><img src="images/fotobar2.png" alt="Groen" /></a></li>
<li id="anonce3"><a href="#"><img src="images/fotobar3.png" alt="Geel" /></a></li>
<li id="anonce4"><a href="#"><img src="images/header3.jpg" alt="Rood" /></a></li>
<li id="anonce5"><a href="#"><img src="images/Rand2.jpg" alt="Warm" /></a></li>
</ul>
</div>
<div id="slideshow-nav">
<ul>
<li><a href="#anonce1">Afbeelding 1</a></li>
<li><a href="#anonce2">Afb. 2</a></li>
<li><a href="#anonce3">Afb. 3</a></li>
<li><a href="#anonce4">Afb. 4</a></li>
<li><a href="#anonce5">Afb. 5</a></li>
</ul>
</div>
</body>
</html>
En de css code:
Quote:
#slideshow {
width: 918px; height: 546px;
overflow-x: scroll; overflow-y: hidden;
margin: 100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000
}
#slideshow ul {
width: 4590px; list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 250px; margin: 0 auto 200px auto; visbility: hidden;
}
#slideshow-nav ul {
float: left;
}
#slideshow-nav ul li a {
display: block; width: 30px; height: 30px;
float: left; margin: 0 10px;
background-color: #fff; text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89dBa;
}
width: 918px; height: 546px;
overflow-x: scroll; overflow-y: hidden;
margin: 100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000
}
#slideshow ul {
width: 4590px; list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 250px; margin: 0 auto 200px auto; visbility: hidden;
}
#slideshow-nav ul {
float: left;
}
#slideshow-nav ul li a {
display: block; width: 30px; height: 30px;
float: left; margin: 0 10px;
background-color: #fff; text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89dBa;
}
Mijn vragen:
1.Is er iets fout? Zo ja, wat?
2.Hoe krijg ik de knoppen om te wisselen van afbeelding naast elkaar en niet onder elkaar?
3.Hoe kan ik er voor zorgen dat hij automatisch na 5 seconden het volgend plaatje laat zien?
4.De afbeeldingen staan nu niet allemaal op een scroll pagina. Als ik op het eerste bolletje klik krijg ik afb. 1 en 2. Klik ik op het 2e, 3e, 4e en 5e bolletje krijg ik afb. 3,4 en 5. Hoe kan ik ze allemaal laten verschijnenen?
Zo ziet het er nu uit:
Klikje
Toevoeging op 03/04/2013 07:37:04:
Iemand?
Gewijzigd op 02/04/2013 21:14:14 door Jan Nada
Er zijn nog geen reacties op dit bericht.