1 reply to this topic

[Hevelson]

Achei o codigo de um banner jquery com fade, ele funciona normalmente mas quando eu tento colocar link nas imagens ele não troca as imagens.

Se alguem puder me ajudar, desde já agradeço.

segue o codigo do banner:

<script type="text/javascript" src="http://todamulher.comercial.ws/wordpress/wp-content/themes/blass2/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it <img src='http://forum.wmonline.com.br/public/style_emoticons/<#EMO_DIR#>/smile.gif' class='bbc_emoticon' alt=':)' />
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images 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');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
<script language="javascript">
document.getElementById("s").value="";
</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:236px;
	clear: both;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}
img { behavior: url(iepngfix.htc) }
</style>

		<div id="slideshow">
			<img src="image1.jpg" class="active" />
			<img src="image2.jpg" />
			<img src="image3.jpg"  />
		</div>

se eu coloco assim:

		<div id="slideshow">
			<a href="#"><img src="image1.jpg" class="active" /></a>
			<a href="#"><img src="image2.jpg" /></a>
			<a href="#"><img src="image3.jpg"  /></a>
		</div>

[Renan L. Queiroz]

Tenta assim:

<div id="slideshow">
                        <img src="image1.jpg" class="active" onclick="location.assign("http://link1.com")" />
                        <img src="image2.jpg"  onclick="location.assign("http://link2.com")" />
                        <img src="image3.jpg"  onclick="location.assign("http://link3.com")" />
                </div>

Mas acredito que existam outras maneiras, até mais simples!

Edição feita por: Renan L. Queiroz, 21/01/2010, 09:53.