In het forum zie ik wel van deze dingen voorbij komen, maar allemaal te moeilijk voor een beginner of iemand die het gewoon makkelijk wil plaatsen.
Hier een schermafdruk:
In de template common/home.tpl kan je deze code plakken:
Code: Select all
<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
;
</script>
<style type="text/css">
#slideshow {
position:relative;
height:300px;
width:540px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
<div id="content">
<div class="center">
<div id="slideshow">
<img src="image/data/welkom/hotwheels-002.jpg" class="active" />
<img src="image/data/welkom/italian_police.jpg" alt="" />
<img src="image/data/welkom/Nash_new.jpg" alt="" />
<img src="image/data/welkom/hotwheels-001.jpg" alt="" />
</div>
</div>
<?php if ($welcome) { ?>
Deze moet je zelf aanpassen naar je eigen wens.
Ik heb zelf images van 540x300 gemaakt.
Deze maat vindt je ook terug in de stylesheet.
Code: Select all
<style type="text/css">
#slideshow {
position:relative;
height:300px;
width:540px;
}
Bijvoorbeeld iets waarmee je dit in de backoffice kan regelen.
Ik heb dit zelf op mijn webwinkel draaien en het ziet er goed uit.
