Bonjour,
Mon but est de créer un slideshow qui se controle en cliquant sur next/before.
Pour ça j'utilise le plugin Cycle pour jQuery, ça marche.
Je voudrais aussi que le slideshow lui même arrive avec un effet de FadeIn. La je n'y arrive pas pourtant il y a un exemple sur le site de Cycle de slideshow qui arrive en FadeIn, mais c'est un slideshow en mode 'auto', le code est :
http://malsup.com/jquery/cycle/fade-in-first.html
Bon.
Moi mon code est le suivant :
En fait j'arrive à avoir l'effet que je veux mais en passant par le plugin Innerfade ce qui me semble un peu débile car ducoup je charge Innerfade en plus sur la page alors qu'il est déjà inclue dans le code de Cycle et que Cycle semble savoir le faire. D'ailleurs j'ai l'impression que même jQuery tout seul sait le faire avec FadeIn ?
Bref c'est la question c'est comment ajouter une fadein sur la premiere image du slideshow avec Cycle ?
Modifié par nlex (03 Oct 2009 - 21:09)
Mon but est de créer un slideshow qui se controle en cliquant sur next/before.
Pour ça j'utilise le plugin Cycle pour jQuery, ça marche.
Je voudrais aussi que le slideshow lui même arrive avec un effet de FadeIn. La je n'y arrive pas pourtant il y a un exemple sur le site de Cycle de slideshow qui arrive en FadeIn, mais c'est un slideshow en mode 'auto', le code est :
$(function() { $('#slideshow img:first').fadeIn(1000,
function() { $('#slideshow').cycle(); }); });
http://malsup.com/jquery/cycle/fade-in-first.html
Bon.
Moi mon code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery.cycle.trans.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript" src="fade.js"></script>
<script type="text/javascript">
// fonction next/prev
$(document).ready(
function(){
$('#portfolio').cycle({
fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
$('#slide_load').innerfade({speed: 'fast',timeout: 200,type: 'sequence',containerheight: '220px'});
$(function() {
// fonction slideshow $('.pics img').css({ opacity: 0 });
setTimeout(function() { $('#slideshow').cycle({
random: 1, delay: -2000 });
$('.pics img').css({ opacity: 0
}); }, 1000);}); } );
</script></head><body>
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<ul id="slide_load"> <ul id="portfolio"> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img id="Picture" src="http://www.xxx.com/wp/wp-content/uploads/images/hop_03.jpg" alt="Good Guy bad Guy" />
</a>
</li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="http://www.xxx.com/wp/wp-content/uploads/images/hop_01.jpg" alt="Whizzkids" />
</a> </li> </ul> </ul> </body></html>En fait j'arrive à avoir l'effet que je veux mais en passant par le plugin Innerfade ce qui me semble un peu débile car ducoup je charge Innerfade en plus sur la page alors qu'il est déjà inclue dans le code de Cycle et que Cycle semble savoir le faire. D'ailleurs j'ai l'impression que même jQuery tout seul sait le faire avec FadeIn ?
Bref c'est la question c'est comment ajouter une fadein sur la premiere image du slideshow avec Cycle ?
Modifié par nlex (03 Oct 2009 - 21:09)