Défilement image Dreamweaver "Saute"

Nicholai

Nicholai

Mana mana
Bonjour,


J'en appelle a vos connaissances en création Web pour m'aider à trouver s'ou viens le problème...

J'aide un ami à administrer son site, seulement je constate un petit soucis dans le défilement d'image sur la page d'accueil.

Lorsque l'on passe la souris sur un lien, l'image "saute" et reviens à la précédente le temps d'une demi seconde.

Ca m'énerve! :mad:

Le site: http://www.furnal-racing.com

Une idée?


Merci
 
tqz_

tqz_

Elite
Pour faire ce genre d'effet, j'utilise le plugin Jquery Cycle : http://malsup.com/jquery/cycle/

Ca fonctionne super bien et tu pourras même faire des fondus etc...

Si tu veux un script d'exemple je peux t'envoyer ça.
 
1er
OP
Nicholai

Nicholai

Mana mana
Cool, j'ai longtemps cherché un site qui pouvait faire ca!

Par contre, je fait tout en mode création, les scripts sont justement mon point faible et je ne sais pas du tout ou et comment bien installer cela dans ma page de code...
 
tqz_

tqz_

Elite
Pour faire simple tu dois te procurer les fichiers javascript de :
- JQuery (http://jqueryjs.googlecode.com/files/jquery-1.3.2.js)
- Jquery cycle (http://malsup.com/jquery/cycle/release/jquery.cycle.zip)

Et ensuite je te joins un exemple d'utilisation :

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
		    fx:     'fade', 
    		speed:   200, 
    		timeout: 3000,
			pause : 1
	});
});
</script> 
</head>

<body> 
	<div class="slideshow"> 
		<a href="http://www.google.fr"><img src="banner1.jpg" /> </a>
		<img src="banner2.jpg" /> 
		<img src="banner3.jpg"/> 
		<img src="banner4.jpg"  /> 
	</div> 
</body> 
</html>
Inclusion des 2 fichiers téléchargés
<script type="text/javascript" src="jquery.js":colere:/script>
<script type="text/javascript" src="scripts.js":colere:/script>


Parti du code où tu configures les transitions etc...
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 200,
timeout: 3000,
pause : 1
});
});

Tu dois juste modifier les chemins d'accès des src des imgs
<div class="slideshow">
<a href="http://www.google.fr":colere:img src="banner1.jpg" /> </a>
<img src="banner2.jpg" />
<img src="banner3.jpg"/>
<img src="banner4.jpg" />
</div>
 
1er
OP
Nicholai

Nicholai

Mana mana
Ok je pense comprendre le principe en gros...

Pourrais tu m'apporter plus de précision quand à la première partie?

J'ai téléchargé les 2 documents (Que je doit héberger?)

Je copie le code PHP sur le code de ma page...? (N'importe ou?)

Et qu'entend tu par " Inclusion des 2 fichiers téléchargés " ...?




Pour le reste, je voit comment faire... c'est déjà ca! :-D


Merci
 
tqz_

tqz_

Elite
Nicholai a dit:
Ok je pense comprendre le principe en gros...

Pourrais tu m'apporter plus de précision quand à la première partie?

J'ai téléchargé les 2 documents (Que je doit héberger?)

Je copie le code PHP sur le code de ma page...? (N'importe ou?)

Et qu'entend tu par " Inclusion des 2 fichiers téléchargés " ...?




Pour le reste, je voit comment faire... c'est déjà ca! :-D


Merci
Cliquez pour agrandir...
Oui tu dois les héberger. En fait la première partie (l'inclusion ^^), tu dois signaler ou se trouve ces deux fichiers. src étant le chemin d'accès depuis ta page.

cette partie la doit être entre les blaise <head> comme les 2 inclusions :

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 200,
timeout: 3000,
pause : 1
});
});
</script>

A partir de la , tu n'as plus qu'à ajouter cette partie de code où l'animation doit être mise :
<div class="slideshow">
<a href="http://www.google.fr":colere:img src="banner1.jpg" /> </a>
<img src="banner2.jpg" />
<img src="banner3.jpg"/>
<img src="banner4.jpg" />
</div>
 
griZ

griZ

☢️ ☢️ ☢️ ☢️ ☢️
Rien a voir, mais la qualité du dégradé derriere les articles est pourrie :D

Pense a mettre ton image en 16bits/couche avant de creer ton dégradé, photoshop en fait des très laids sinon :/
 
Connectez-vous pour réagir !
Haut