<script type="text/javascript" src="jquery-1.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},55 ).animate({height: '55px'},500 ); //Display the content $('#gallery .content').html(caption); } </script> <style type="text/css"> body{ font-family:arial } .clear { clear:both } #gallery { position:relative; height:330px } #gallery a { float:left; position:absolute; width: 740px; height: 23px; } #gallery a img { border:none; } #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:55px; width:752px; position:absolute; bottom:4px; } #gallery .caption .content { margin:5px } #gallery .caption .content h3 { margin:0; padding:0; color:#CC6600; } </style> <div id="gallery"> <a href="#" class="show"> <img src="imagens/exemplo.jpg" alt="Biquine" width="755" height="326" title="" alt="" rel="<h3>Foto Biquine</h3>Teste de foto!"/> </a> <a href="#"> <img src="imagens/exemplo2.jpg" alt="Biquine" width="755" height="326" title="" alt="" rel="<h3>Foto Biquine</h3>Teste de foto!. "/> </a> <a href="#"> <img src="imagens/exemplo3.jpg" alt="Biquine" width="755" height="326" title="" alt="" rel="<h3>Foto Biquine</h3>Teste de foto!. "/> </a> <div class="caption"><div class="content"></div></div> </div> <div class="clear"></div>
Problemas!
Started By Guilherme Jucoski Fernandes, 20/07/2010, 21:12
Nenhuma resposta neste tópico
#1
Posted 20/07/2010, 21:12
Bom como não entendo nada de javascript estou mandando o código abaixo que não é de minha autoria para ver se alguém consegue me ajudar! Bom o problema está em que em todos navegadores a foto carrega perfeitamente porém como sempre no ie carrega pela metade =/ se alguém estiver disposto a ajuda eu agradeço! obrigado
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)