Menu

Insérer un effet jquery dans une page [Résolu/Fermé]

- - Dernière réponse :  flibouk - 23 mars 2011 à 16:36
Bonjour,
Voila mon souci, j'aimerai insérer cet effet : http://keith-wood.name/imageCube.html

dans ma page html.
j'ai donc télécharger le petit fichier "jquery.imagecube.js" que j'ai mis a la racine.
mon code est donc celui ci :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Image Cube</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>

</head>
<body>

		<div id="defaultCube" style="width: 200px; height: 150px;">
		
			<img src="p1.jpg" alt="Uluru" title="Uluru">
			<img src="p2.jpg" alt="Islands" title="Islands">
			<img src="p3.jpg" alt="Gorge" title="Gorge">
		</div>
		
</body>
</html>


je vois bien les 3 images a l'écran mais aucun effet les 3 images sont l'une a coté de l'autre.
qu'ai je oublié ?
merci beaucoup par avance pour votre aide

Afficher la suite 

3 réponses

Messages postés
1406
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
70
0
Merci
Ca :
$('#defaultCube').imagecube(); 
je m'en doutais un peu mais je le met ou ?
Melooo
Messages postés
1406
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
70 -
Niconovice ta répondu ;)
Messages postés
974
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
3 mars 2014
70
0
Merci
Salut,
verifie le lien qui te mene à "jquery.imagecube.js" le problème vient de là ;)
@+
niconovice
Messages postés
974
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
3 mars 2014
70 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Image Cube</title>
<style type="text/css">
#basicCube { width: 200px; height: 150px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>
<script type="text/javascript">
$(function () {
	$('#basicCube').imagecube({imagePath: 'img/'});
});
</script>
</head>
<body>
<h1>jQuery Image Cube Basics</h1>

<div id="basicCube">
	<img src="img/uluru.jpg" alt="Uluru" title="Uluru">
	<img src="img/islands.jpg" alt="Islands" title="Islands">
	<img src="img/gorge.jpg" alt="Gorge" title="Gorge">
</div>

</body>
</html>
0
Merci
Super les gars ! merci beaucoup !!!!!
oupssss désolé.

alors merci charmante demoiselle.

heu je suis encore embêtant mais quand je change de style d'effet ca ne marche. je voudrai insérer ca dans ma fonction : .imagecube({speed: 5000, easing: 'easeOutBounce'}); mais quand je le met l'image reste fixe. une idée ?
Melooo
Messages postés
1406
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
70 -
Charmante je veux bien :p
sinon regarde cette page, c'est toutes les fonctionnalités dispo :
http://keith-wood.name/imageCubeRef.html
bon bé j'ai réussit a changer la vitesse, mais pas le easing.

.imagecube({speed: 5000, easing: 'easeOutBounce'});

merci quand meme. bonne continuation
niconovice
Messages postés
974
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
3 mars 2014
70 -
re flibouk,
tu as réussi ? sinon il te faut télécharger un deuxième pluggin appelé jquery.easing.1.3.js, met le avant imageCube.js comme ça:
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.imagecube.js"></script>

et ensuite tu as juste à aller dans jquery.imagecube.js et changer à la ligne 22 la valeur "linear" en "easeOutBounce".
Enjoy !
pff j'ai cherché.... j'avais modifié la ligne 22 mais il me manquait le plugging

encore un grand merci