Besoin d'aide pour un Nivo slider

**lallanana87** · 27/08/2012, 16h42

Bonjour,
Je suis toute débutante en site web j'utilise DREAMWEAVER et je commence doucement à lire et comprendre quelques codes...
Je suis en train de créer un site web et j'ai trouvé l'exemple de ce que je veux pour bannière sur ce site:

http://m-sharapova.org/

La bannière du haut avec les photos qui changent dans des effets de fondu etc j'adoreeee... En enregistrant cette page j'ai vu que la personne qui l'a créé a utilisé jquery que je ne connais absolument pas... J'ai essayé de modifier les codes mais sans succès....
J'ai 6 images différentes, chacune de 913*232 que je voudrais faire défiler avec ces rendus de fondu. Elles s'appellent slide_1.png slide_2.png etc...
Est ce que quelqu'un pourrait me dire quel code je dois créer et ou je dois l'intégrer dans ma page pour que ca fonctionne?
Il me faut vraiment des cours pour apprendre tout ca!!!

Merci d'avance

**Bovino** · 27/08/2012, 16h53

Regarde du côté de Nivo Slider.

**lallanana87** · 27/08/2012, 20h29

Merci!
J'ai téléchargé Nivo Slider mais je comprends rien je ne sais pas quels codes je dois prendre ni ou les mettre dans ma page... Pour le moment je trouve des explications sur le net mais c'est en anglais alors déjà que c'est pas simple

Si quelqu'un s'y connait et peut me donner un petit coup de main ça serait super car je galère

**pi-2r** · 28/08/2012, 10h48

dans le dossier nivo-slider, regarde le code de la page demo.html. Aprés dans le code, regarde de plus prés ce morceau de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
      <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>

tu peux après, y mettre du php pour faire tourner en boucle des photos

**lallanana87** · 29/08/2012, 19h02

Merci beaucoup j'ai réussi à bidouiller quelque chose. Voila mon 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<head><script async="" src="fichiers/jquery-c.js"></script>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="fichiers/nivo-slider.css" type="text/css" media="screen">
    <style type="text/css">
 
#slider-wrapper {
    width:913px;
    height:232px;
}
 
#slider {
	position:relative;
    width:913px;
    height:232px;
	background:url(<a href="http://www.emiliecapel.com/fichiers/loading.gif" target="_blank">http://www.emiliecapel.com/fichiers/loading.gif</a>) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}
 
.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(<a href="http://www.emiliecapel.com/fichiers/arrows.png" target="_blank">http://www.emiliecapel.com/fichiers/arrows.png</a>) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}
 
.welcome {	
	font-family: Arial;
	font-size: 10px;
	color: #F4F4F4;
	padding-left: 35px;
	padding-right: 90px;
	padding-top: 0px;
	text-align: justify;
}
    </style>
</head><body>
 
<center>
<!-- Save for Web Slices (StarsZZ Exclusive WP Theme.psd) -->
  <table id="Table_01" cellpadding="0" cellspacing="0" border="0" width="1218">
    <tbody> 
    <tr> 
      <td>&nbsp; </td>
      <td colspan="2"> 
        <div id="wrapper"> 
          <div id="slider-wrapper"> 
            <div style="position: relative; background: url(&quot;fichiers/slide2.png&quot;) no-repeat scroll 0% 0% transparent;" id="slider" class="nivoSlider"> 
              <img style="display: none;" src="fichiers/slide4.png" alt=""> <img style="display: none;" src="fichiers/slide3.png" alt=""> 
              <img style="display: none;" src="fichiers/slide2.png" alt=""> <img style="display: none;" src="fichiers/slide1.png" alt=""> 
              <img style="display: none;" src="fichiers/slide6.png" alt=""> <img style="display: none;" src="fichiers/slide5.png" alt=""> 
              <div style="display: none; opacity: 0.8;" class="nivo-caption"> 
                <p></p>
              </div>
              <div style="display: block;" class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>
              <div style="opacity: 1; left: 0px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll 0px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 123px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -123px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 246px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -246px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 369px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -369px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 492px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -492px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 615px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -615px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 738px; top: 0px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -738px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 861px; top: 0px; width: 119px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -861px 0px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 0px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll 0px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 123px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -123px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 246px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -246px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 369px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -369px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 492px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -492px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 615px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -615px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 738px; top: 62px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -738px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 861px; top: 62px; width: 119px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -861px -62px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 0px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll 0px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 123px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -123px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 246px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -246px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 369px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -369px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 492px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -492px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 615px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -615px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 738px; top: 124px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -738px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 861px; top: 124px; width: 119px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -861px -124px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 0px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll 0px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 123px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -123px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 246px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -246px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 369px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -369px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 492px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -492px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 615px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -615px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 738px; top: 186px; width: 123px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -738px -186px transparent;" class="nivo-box"></div>
              <div style="opacity: 1; left: 861px; top: 186px; width: 119px; height: 62px; background: url(&quot;fichiers/slide4.png&quot;) no-repeat scroll -861px -186px transparent;" class="nivo-box"></div>
            </div>
          </div>
        </div>
        <script type="text/javascript" src="fichiers/jquery-1.js"></script>
        <script type="text/javascript" src="fichiers/jquery.js"></script>
        <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td> <img src="fichiers/spacer.gif" alt="" height="1" width="77"></td>
      <td> <img src="fichiers/spacer.gif" alt="" height="1" width="668"></td>
      <td> <img src="fichiers/spacer.gif" alt="" height="1" width="312"></td>
      <td> <img src="fichiers/spacer.gif" alt="" height="1" width="143"></td>
    </tr>
    </tbody> 
  </table>
<!-- End Save for Web Slices -->
 
 
</center>
 
</body></html>

Est ce que tu peux me dire ce que je dois modifier pour que mon animation tourne en boucle?
Et est ce que mon code est correct? ya rien de superflu dedans?

Merci

Besoin d'aide pour un Nivo slider

jQuery

Vue hybride

Discussions similaires

Partager

Partager