HTML:
<!DOCTYPE HTML>
<html>
<head>
<title><?php the_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow img:gt(0)').hide();
});
setInterval(function(){
$('#slideshow .image:first')
.fadeOut()
.next('.image').fadeIn()
.end()
.appendTo('#slideshow');
}, 1000);
$(document).ready(function(){
$('#slideshow .image').click(function(){
$(this)
.fadeOut()
.next('.image').fadeIn()
.end('.image:last').appendTo('.image:first');
clearInterval();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<?php get_header(); ?>
</div>
<div id="body">
<?php if (is_page('Home')){
get_sidebar('2');
}
if (is_home()){
get_sidebar('2');
}
?>
<div id="blankline">
</div>
<div id="why">
<?php if (is_page('Home')){
get_sidebar('3');
}
if (is_home()){
get_sidebar('3');
}
?>
</div>
<div id="information">
<?php if (is_page('Home')){
get_sidebar('4');
}
if (is_home()){
get_sidebar('4');
}
?>
</div>
</div>
<div id="footer">
<?php get_footer(); ?>
</div>
</div>
HTML:
<div id="around-slideshow">
<div id="slideshow">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide1.jpg" class="image" height="360px" width="100%" />.
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide2.jpg" class="image" height="360px" width="100%" />
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/slide3.jpg" class="image" height="360px" width="100%" />
</div>
</div>
HTML:
#body {
width: 100%;
}
#around-slideshow {
margin: 0;
width: 100%;
background: #E0E0E0;
float: left;
}
#slideshow {
margin: 40px auto;
margin-bottom: 40px;
width: 85%;
height: 360px;
overflow: hidden;
}Ik heb hier eerst een index.php, daarna een sidebar-2.php en uiteindelijk een style.css (hieruit heb ik best veel geknipt en alleen de styles gepakt die er nu toe doen).
Ik heb hier een slideshow gemaakt met jQuery, maar er is wel een probleempje....
Er staat boven elke afbeelding een ' . ' waardoor de afbeelding naar onderen schuift, weet iemand waardoor dat komt?
Check de bijlage
