Bonjour,
Je bricole des bouts de code html depuis quelques années dans le but d'être capable de refaire moi-même mon portfolio tous tous les ans, mais je ne suis jamais vraiment allé plus loin, et je suis aujourd'hui toujours à un stade primaire.
Je voudrais cette fois ci présenter mes projets sur des slideshows en utilisant le pluggin Javascript Easyslider.
J'ai besoin de pouvoir intégrer plusieurs slideshow à une même page html.
L'obstacle auquel je me heurte, c'est que je pourrais avoir partiellement réussi, sauf que je n'arrive pas à dissocier les contrôleur numériques des deux slideshow que j'ai pour l'instant intégrés (les 5 premiers chiffres correspondant aux 5 images de mon premier SShow sont suivis des 6 chiffres correspondant aux 6 chiffres du deuxième SS). Ils sont fonctionnels, et fonctionnent en dissocié car je peux faire défiler dans un sens le premier SS, et dans l'autre sens le deuxième, cependant quelque chose me fait dire que j'ai tout faux: sur les 11 chiffres (correspondant aux 11 images réparties entre mes deux SS (5 images dans le premier, 6 dans le second)) que j'ai donc dans mon unique contrôleur numérique, un seul est mis en surbrillance à la fois, témoignant de l'avancée du défilement d'une image à l'autre.
Je devrais avoir deux témoins, ce qui me fait dire qu'il ne sont pas seulement ensemble sur ma page, mais qu'ils fonctionnent ensemble. Pourtant, je suis bien capable de faire passer le premier SS de l'image 1 à 5, et dans le même temps le deuxième SS de l'image 6 à 1.
J'essaye d'être clair, mais j'ai l'impression que cela reste confus. Je m'en excuse. J'espère que vous me comprendrez et que vous saurez m'éclairer.
Voici mon code Javascript:
Note: J'ai créé un deuxième pluggin, que j'ai bêtement nommé "easySlider1.7.2.js"
Mon code html:
Je ne sais pas réellement ce que je fais, je tâtonne réellement. J'ai probablement tout faux. Merci à vous,
Je bricole des bouts de code html depuis quelques années dans le but d'être capable de refaire moi-même mon portfolio tous tous les ans, mais je ne suis jamais vraiment allé plus loin, et je suis aujourd'hui toujours à un stade primaire.
Je voudrais cette fois ci présenter mes projets sur des slideshows en utilisant le pluggin Javascript Easyslider.
J'ai besoin de pouvoir intégrer plusieurs slideshow à une même page html.
L'obstacle auquel je me heurte, c'est que je pourrais avoir partiellement réussi, sauf que je n'arrive pas à dissocier les contrôleur numériques des deux slideshow que j'ai pour l'instant intégrés (les 5 premiers chiffres correspondant aux 5 images de mon premier SShow sont suivis des 6 chiffres correspondant aux 6 chiffres du deuxième SS). Ils sont fonctionnels, et fonctionnent en dissocié car je peux faire défiler dans un sens le premier SS, et dans l'autre sens le deuxième, cependant quelque chose me fait dire que j'ai tout faux: sur les 11 chiffres (correspondant aux 11 images réparties entre mes deux SS (5 images dans le premier, 6 dans le second)) que j'ai donc dans mon unique contrôleur numérique, un seul est mis en surbrillance à la fois, témoignant de l'avancée du défilement d'une image à l'autre.
Je devrais avoir deux témoins, ce qui me fait dire qu'il ne sont pas seulement ensemble sur ma page, mais qu'ils fonctionnent ensemble. Pourtant, je suis bien capable de faire passer le premier SS de l'image 1 à 5, et dans le même temps le deuxième SS de l'image 6 à 1.
J'essaye d'être clair, mais j'ai l'impression que cela reste confus. Je m'en excuse. J'espère que vous me comprendrez et que vous saurez m'éclairer.
Voici mon code Javascript:
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/easySlider1.7.js"></script>
<script type="text/javascript" src="./js/easySlider1.7.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider").easySlider({
auto: true,
continuous: true,
prevId: 'prev1',
nextId: 'next1',
numeric: true,
speed:800,
pause:3500
});
});
jQuery(document).ready(function(){
jQuery("#sliderdeux").easySlider({
auto: true,
continuous: true,
prevId: 'prev2',
nextId: 'next2',
numeric: true,
speed:800,
pause:3500
});
});
</script>Note: J'ai créé un deuxième pluggin, que j'ai bêtement nommé "easySlider1.7.2.js"
Mon code html:
<div id="slider">
<ul>
<li><a href="/"><img src="works/sichuan/image5.jpg" alt="Cinquième image" /></a></li>
<li><a id="projet1" href="/"><img src="works/sichuan/20120926_lamp_v3_2_2.490.jpg" alt="Première image" /></a></li>
<li><a id="projet2" href="/"><img src="works/sichuan/20120926_lamp_v3_2_2.491.jpg" alt="Deuxième image" /></a></li>
<li><a href="/"><img src="works/sichuan/20120926_lamp_v3_2_2.492.jpg" alt="Troisième image" /></a></li>
<li><a href="/"><img src="works/sichuan/20120926_lamp_v3_2_2.494.jpg" alt="Quatrième image" /></a></li>
</ul>
</div>
<div id="projet1desc"><img src="works/sichuan/desc.jpg" /></div>
<div id="sliderdeux">
<ul>
<li><a href="/"><img src="works/polichinelle/DSC02287.jpg" alt="Cinquième image" /></a></li>
<li><a id="projet1" href="/"><img src="works/polichinelle/scanduck.jpg" alt="Première image" /></a></li>
<li><a id="projet2" href="/"><img src="works/polichinelle/DSC02279.jpg" alt="Deuxième image" /></a></li>
<li><a href="/"><img src="works/polichinelle/DSC02280.jpg" alt="Troisième image" /></a></li>
<li><a href="/"><img src="works/polichinelle/bureaufamille.jpg" alt="Quatrième image" /></a></li>
<li><a href="/"><img src="works/polichinelle/bureaudesigner.jpg" alt="Quatrième image" /></a></li>
</ul>
</div>Je ne sais pas réellement ce que je fais, je tâtonne réellement. J'ai probablement tout faux. Merci à vous,
