11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Plusieurs galerie easySlider1.5.js dans la même page.

Bonjour,

J'utilise jquery easyslider pour présenter des galeries photos. J'aimerais savoir si je peux optimiser mon code. J'ai présentement 15 galeries. Dans l'exemple ici je vous en présente 3. Je trouve ca assez lourd de devoir toujours ajouter du code javascript et du css pour chaque galerie. Est-ce que je peux rendre cette galerie dynamique?

Vous pouvez voir un exemple de galerie ici.

Voici le code javascript.

<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				/*controlsBefore:	'<p id="controls">',
				controlsAfter:	'</p>'*/
				prevId: 'prevBtn',
				nextId: 'nextBtn'	
			});
	
			$("#slider2").easySlider({
				/*controlsBefore:	'<p id="controls2">',
				controlsAfter:	'</p>',*/
				prevId: 'prevBtn2',
				nextId: 'nextBtn2'	
			});	
			
			$("#slider3").easySlider({
				prevId: 'prevBtn3',
				nextId: 'nextBtn3'	
			});	
</script>


Voici une partie du css.

#slider, #slider2, #slider3, #slider4, #slider5, #slider6, #slider7, #slider8, #slider9, #slider10, #slider11, #slider12, #slider13, #slider14, #slider15
{float:left; position:relative; margin-right:60px; _margin-right:30px;}	

	
#slider ul, #slider li, #slider2 ul, #slider2 li, #slider3 ul, #slider3 li, #slider4 ul, #slider4 li, #slider5 ul, #slider5 li, #slider6 ul, #slider6 li, #slider7 ul, #slider7 li, #slider8 ul, #slider8 li, #slider9 ul, #slider9 li, #slider10 ul, #slider10 li, #slider11 ul, #slider11 li, #slider12 ul, #slider12 li, #slider13 ul, #slider13 li, #slider14 ul, #slider14 li, #slider15 ul, #slider15 li
{list-style:none; margin:0; padding:0;}

#slider li, #slider2 li, #slider3 li, #slider4 li, #slider5 li, #slider6 li, #slider7 li, #slider8 li, #slider9 li, #slider10 li, #slider11 li, #slider12 li, #slider13 li, #slider14 li, #slider15 li
{height:245px; overflow:hidden;	width:520px;}


p#controls, p#controls2 {left:0; margin:0; position:absolute; top:0;} 

#prevBtn, #nextBtn, #prevBtn2, #nextBtn2, #prevBtn3, #nextBtn3, #prevBtn4, #nextBtn4, #prevBtn5, #nextBtn5, #prevBtn6, #nextBtn6, #prevBtn7, #nextBtn7, #prevBtn8, #nextBtn8, #prevBtn9, #nextBtn9, #prevBtn10, #nextBtn10, #prevBtn11, #nextBtn11, #prevBtn12, #nextBtn12, #prevBtn13, #nextBtn13, #prevBtn14, #nextBtn14, #prevBtn15, #nextBtn15
{display:block; margin:0; padding:0; overflow:hidden; text-indent:-8000px; height:77px; left:-30px; position:absolute; top:84px; width:34px;}

#nextBtn, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6, #nextBtn7, #nextBtn8, #nextBtn9, #nextBtn10, #nextBtn11, #nextBtn12, #nextBtn13, #nextBtn14, #nextBtn15
{left:521px;}			
										
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a, #prevBtn3 a, #nextBtn3 a, #prevBtn4 a, #nextBtn4 a, #prevBtn5 a, #nextBtn5 a, #prevBtn6 a, #nextBtn6 a, #prevBtn7 a, #nextBtn7 a, #prevBtn8 a, #nextBtn8 a, #prevBtn9 a, #nextBtn9 a, #prevBtn10 a, #nextBtn10 a, #prevBtn11 a, #nextBtn11 a, #prevBtn12 a, #nextBtn12 a, #prevBtn13 a, #nextBtn13 a, #nextBtn14 a, #nextBtn15 a
{background:url(../images/btn_prev.gif) no-repeat 0 0; display:block; height:77px; width:30px;}

#nextBtn a, #nextBtn2 a, #nextBtn3 a, #nextBtn4 a, #nextBtn5 a, #nextBtn6 a, #nextBtn7 a, #nextBtn8 a, #nextBtn9 a, #nextBtn10 a, #nextBtn11 a, #nextBtn12 a, #nextBtn13 a, #nextBtn14 a, #nextBtn15 a
{background:url(../images/btn_next.gif) no-repeat 0 0;}



Voici le code html.

<!-- debut contrat -->
<div class="contrat">
<div class="bouton">
<div id="slider">
<ul>
<li><img src="images/iqpf-1.jpg" width="500" height="225" alt="maquette iqpf 1" title="maquette iqpf 1"></li>
<li><img src="images/iqpf-2.jpg" width="500" height="225" alt="maquette iqpf 2" title="maquette iqpf 2"></li>
<li><img src="images/iqpf-3.jpg" width="500" height="225" alt="maquette iqpf 3" title="maquette iqpf 3"></li>
<li><img src="images/iqpf-4.jpg" width="500" height="225" alt="maquette iqpf 4" title="maquette iqpf 4"></li>
<li><img src="images/iqpf-5.jpg" width="500" height="225" alt="maquette iqpf 5" title="maquette iqpf 5"></li>
</ul>
</div>
</div>
<!-- fin bouton -->

<h2>Institut qu&eacute;b&eacute;cois de planification financi&egrave;re (IQPF)</h2>
<p>mandat chez s2i - xhtml et css.</p>
<p class="site"><a href="http://www.iqpf.org/index.fr.html" target="_blank">www.iqpf.org</a></p>
<div class="clear"></div>

</div>
<!-- fin contrat -->

<!-- debut contrat -->
<div class="contrat">
<div class="bouton">
<div id="slider2">
<ul>
<li><img src="images/oeq-1.jpg" width="500" height="225" alt="maquette oeq 1" title="maquette oeq 1" ></li>
<li><img src="images/oeq-2.jpg" width="500" height="225" alt="maquette oeq 2" title="maquette oeq 2" ></li>
<li><img src="images/oeq-3.jpg" width="500" height="225" alt="maquette oeq 3" title="maquette oeq 3" ></li>
<li><img src="images/oeq-4.jpg" width="500" height="225" alt="maquette oeq 4" title="maquette oeq 4" ></li>
<li><img src="images/oeq-5.jpg" width="500" height="225" alt="maquette oeq 5" title="maquette oeq 5" ></li>
<li><img src="images/oeq-6.jpg" width="500" height="225" alt="maquette oeq 6" title="maquette oeq 6" ></li>
<li><img src="images/oeq-7.jpg" width="500" height="225" alt="maquette oeq 7" title="maquette oeq 7" ></li>
</ul>
</div>
</div>
<!-- fin bouton -->


<h2>Ordre des ergoth&eacute;rapeutes du Qu&eacute;bec (OEQ)</h2>
<p>mandat chez s2i - xhtml et css.</p>
<p class="site"><a href="http://www.oeq.org" target="_blank">www.oeq.org</a></p>
<div class="clear"></div>

</div>
<!-- fin contrat -->

<!-- debut contrat -->
<div class="contrat">
<div class="bouton">
<div id="slider3">
<ul>
<li><img src="images/sthubert-1.jpg" width="500" height="225" alt="maquette st-hubert 1" title="maquette st-hubert 1"></li>
<li><img src="images/sthubert-2.jpg" width="500" height="225" alt="maquette st-hubert 2" title="maquette st-hubert 2"></li>
<li><img src="images/sthubert-3.jpg" width="500" height="225" alt="maquette st-hubert 3" title="maquette st-hubert 3"></li>
<li><img src="images/sthubert-4.jpg" width="500" height="225" alt="maquette st-hubert 4" title="maquette st-hubert 4"></li>
<li><img src="images/sthubert-5.jpg" width="500" height="225" alt="maquette st-hubert 5" title="maquette st-hubert 5"></li>
</ul>
</div>
</div>
<!-- fin bouton -->

<h2>R&ocirc;tisserie St-Hubert</h2>
<p>mandat chez s2i - xhtml et css.</p>
<p class="site"><a href="https://commandezsthubert.com/" target="_blank">https://commandezsthubert.com</a></p>

<div class="clear"></div>
</div>
<!-- fin contrat -->

Modifié par britanicus75 (10 Jun 2010 - 21:02)
Bonjour,

Peut-être peux-tu utiliser une classe pour tes galeries :
...
<div id="slider2" class="slider">
  ...
</div>
...

jQuery(function($) {
  $(".slider").each(function() {
    var id = this.id;
    $(this).easySlider({
      prevId: id + "PrevBtn", // slider2PrevBtn par exemple
      nextId: id + "NextBtn"  // slider2NextBtn par exemple
    });
  });
});

Modifié par Julien Royer (05 May 2010 - 17:18)
britanicus75 a écrit :
Je viens d'essayer et c'est le désastre. J'ai fait le ménage dans le css et j'ai remplacé le code jquery fournis dans l'exemple précédent.

Voir le résultat à cette page.

Les galeries semblent fonctionner correctement, n'est-ce pas ?

Je pense que le problème se situe dans le code CSS. Il faut que tu cibles les boutons avec leur nouvel ID : #sliderPrevBtn, #sliderNextBtn, #slider2PrevBtn, ...
Je vois bien les boutons "précédent" et "suivant" pour chaque galerie, et ils sont fonctionnels.

Pas toi ?

Je pense qu'il s'agit d'un problème d'affichage. Voir mon message précédent.
Modifié par Julien Royer (05 May 2010 - 23:14)
Je ne vois pas ces boutons sur Firefox 3.6.3 et IE 8. Sur quel fureteur vois-tu les boutons ?


oups je les vois soudainement ils sont en lien texte. Peut-être l'affichage comme tu dis.
Modifié par britanicus75 (05 May 2010 - 23:19)
Je viens de remettre les css de base + .slider. Donc ce qui est changer c'est l'ajout de la class slider dans chaque div et le nouveau jquery fournis.

Mais voilà que j'ai perdu ma flèche bleu pour la navigation suivant et précédent.

Donc est-ce dans le jquery mon problème?
Mon problème est maintenant Résolu. Il faut juste remettre les bonnes class pour y faire apparaître les flèches bleus.
Sujet clos
Aller à