Hoi motower,
Als je een link om de images zet, maak je daarvan een
parent element voor de images.
Dan moeten niet meer de images door jQuery bediend worden, maar de omvattende links; overal waar IMG in het opdrachtbonnetje staat, moet nu A komen:
[JS]function slideSwitch() {
var $active = $('#slideshow A.active');
if ( $active.length == 0 ) $active = $('#slideshow A:last');
// use this to pull the links in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow A:first');
// uncomment the 3 lines below to pull the links in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}[/JS]
Maar omdat alles één etage omhoog is geschoven, moeten ook de styles aangepast worden: de opacity enz. wordt nu door de link geregeld (= incl. de opacity voor het bijpassende image), de positie van de images is nu de positie van de link geworden, enz.; de images zitten verder binnen de links, en volgen automatisch:
HTML:
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:390px;
}
#slideshow a {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow a.active {
z-index:10;
opacity:1.0;
}
#slideshow a.last-active {
z-index:9;
}
#slideshow a img {
border: 0;
}
</style>
Toegevoegd: de images via de css ontdaan van hun border, dan kan de html mooi zonder het opmaak-attribuut border="0".
Tenslotte merkte ik dat het bij mij lokaal nodig was om de images hun absolute pad te geven (of dat op jouw server ook zo is weet ik niet):
HTML:
<div id="slideshow">
<a href="http://www.strongbeads.com/Powerful_Unique_Jewellery/strongbeads.html" title="beads">
<img src="http://www.strongbeads.com/imgs/photo/intro01.jpg" alt="Strongbeads Jewellery">
</a>
<a href="http://www.helpmij.nl/" title="helpie">
<img src="http://www.strongbeads.com/imgs/photo/intro02.jpg" alt="Strongbeads Jewellery">
</a>
<a href="http://bliksekaters.nl/" title="bliks">
<img src="http://www.strongbeads.com/imgs/photo/intro03.jpg" alt="Strongbeads Jewellery">
</a>
<a href="http://google.nl/" title="goog">
<img src="http://www.strongbeads.com/imgs/photo/intro04.jpg" alt="Strongbeads Jewellery">
</a>
</div>
Op deze manier schoven de links voorbij dat het een lieve lust was. En klikbaar ook.
Met vriendelijke groet,
CSShunter
