Carrousel en 3d

**scoubi77** · 05/09/2012, 18h02

Bonsoir à tous,

Pour un faire un effet visuel sympa pour le site d'un ami, ce dernier m'a demandé de lui faire un menu comme dans l'exemple du site suivant (Léonard de vinci ):
http://www.professorcloud.com/mainsite/carousel.htm

je m'arrache les cheveux et j'ai besoin de vos aides car je n'arrive a rien

voici le code d'exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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" xml:lang="en" lang="en"> 
<html>
<head>
 <script>
$(document).ready(function(){
 
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>
 
 
</head>
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="/images/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="/images/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="/images/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="/images/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
 
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
 
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>

Merci par avance a ceux qui pouront m'aider

**SpaceFrog** · 05/09/2012, 18h53

et la lib jquery elle est ou ?

**scoubi77** · 05/09/2012, 19h24

Bonsoir et merci,

elle est dans un répertoire est présente

je souhaite faire un menu avec des photos qui tourne quand on click dans le sens du bouton, l'effet mirroir est très sympa aussi.
mais je patoge

**SpaceFrog** · 05/09/2012, 22h25

présente dans un repertoire ne veut pas dire chargée ...
je ne vois pas dans ton code la balise script avec le src qui pointe sur le ficher jquery ...

**scoubi77** · 05/09/2012, 22h43

ok dans ce cas 2 questions, comment la declarer ?

comme cela ?

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>

est cette action peut-elle s'effectuer sur mon disque dur ou obligatoirement sur mon ftp je débute et je suis perdu

Pour l'instant j'ai bien un cadre mais malgré les images présentes elles ne s'affichent pas !!!!

Pour l'instant j'ai ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
<!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" xml:lang="fr" lang="fr"> 
<head><center>
 
 
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
 
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="/path/to/cloud-carousel.1.0.5.js"></script>
 
<script>
$(document).ready(function(){
 
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
 
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>
 </center>
</head>
    <body><center>
 
        <P align="CENTER"><IMG src="titre.jpg" width=398 height=65 border=0  alt=""><BR><BR><BR><BR>
        <!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:700px; height:400px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="1.JPG" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="2.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="3.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="4.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
        </div><BR><BR>
 
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="gauche" />
        <input id="right-but" type="button" value="droite" />
 
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p></center>
    </body>
</html>

voici le résultat
Nom : exemple.jpg
Affichages : 58
Taille : 183,3 Ko

il y a un cadre autour et les images ne sont pas affichées, pourtant nom et localisation sont bien présent et fichier jquery.min.js, cloud-carousel.1.0.5.js aussi, sa bouge pas !!!

**SpaceFrog** · 06/09/2012, 08h23

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script type="text/javascript" src="/path/to/jquery.min.js"></script>

avec le chemin approprié ...
Là ça sent juste le code de demo ...
je ne pense pas que tu aies un répertoire path et un sous repertoire to ...

pareil pour le chemin vers le repertoire de carrousel ...
et vers les images ...

Carrousel en 3d

jQuery

Vue hybride

Discussions similaires

Partager

Partager