JavaScript : Problème de personnalisation jQuery SlideViewer

[mato]

Bonjour,

J'ai intégrer un module jQuery du type SlideViewer pour mettre en place une galerie d'images sur mon site.

J'ai personnalisé le module via le CSS, mais voila lorsque j'aligne la barre de navigation du module à droite les chiffres s'inversent...

Je ne sais pas où intervenir pour qu'ils apparaissent dans l'ordre : 1 2 3 4 5 6 7 8 au lieu de 8 7 6 5 4 3 2 1. Sachant qu'il y aura plusieurs galeries comportant plus ou moins de photos donc impossible de mettre une margin-left.

Merci à tous

Voir les captures ci dessous :


Module de base :




Personnalisé avec problème d'inversement :

 

[fpoil]

euh ce serait mieux d'avoir le code pour voir ce que tu as modifié... les images ne vont pas beaucoup nous aider

 

[momo-fr]

Normal que cela s'inverse, tu fais un float left ou right pour passer la liste (je suppose que c'est une liste) de gauche à droite, le flux HTML s'empile donc dans l'ordre de création, si tu veux le bon ordre à droite il faut inverser ton code.

Ex :
1
2
3
4

En float left : 1234

En float right : 4321

Pour être bien à droite il te faut ton code comme ça :
4
3
2
1

:rolleyes::siffle:

 

[dmo95]

Probablement dû à cela, et au quel cas tu encapsules le tout dans une autre div que tu places elle même à droite.

 

[mato]

Voici le code CSS du slideviewer :

/*preload classes*/ 
.svw {width: 50px; height: 20px; background: #fff;} 
.svw ul {position: relative; left: -999em;} 

 
/*core classes*/ 
.stripViewer {  
position: relative; 
overflow: hidden;  
border: 0px solid #000;   
margin-top: 20px; 
margin-left:auto; 
margin-right:auto;
} 
.stripViewer ul { /* this is your UL of images */ 
margin: 0; 
padding: 0; 
position: relative; 
left: 0; 
top: 0; 
width: 1%; 
list-style-type: none; 
} 
.stripViewer ul li {  
float:left; 
} 
.stripTransmitter { 
overflow: auto; 
width: 1%;
margin-left:auto; 
margin-right:auto;
} 
.stripTransmitter ul { 
margin: 0; 
padding: 0; 
position: relative; 
list-style-type: none; 
} 
.stripTransmitter ul li{ 
width: 20px; 
float:right; 
margin: 0 1px 1px 0; 
} 
.stripTransmitter a{ 
font: bold 10px Georgia, Arial; 
text-align: center; 
line-height: 22px; 
background: #fff; 
color: #999999; 
text-decoration: none; 
display: block; 
} 
.stripTransmitter a:hover, a.current{ 
background: #fff; 
color: #000; 
} 
 
/*tooltips formatting*/ 
#tooltip { 
background: #fff; 
color: #000; 
opacity: 0.85; 
border: 5px solid #dedede; 
} 
#tooltip h3 {  
font: normal 10px Verdana;  
margin: 0;  
padding: 6px 2px;  
border: 0; 
}

Oui il s'agit bien d'une liste avec un float-left à la base dans le .stripTransmitter ul li qui inverse les chiffres quand je passe en float-right.
Mais ou dois je inverser les chiffres ? Parce que la liste est gérée derrière par les fichiers js si j'ai bien capté.

Voici le code HTML il s'agit d'une liste toute simple :

<div id="mygalone" class="svw"> 
    <ul> 
        <li><img src="../IMG/pic1.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li> 
        <li><img src="../IMG/pic2.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li>         
        <li><img src="../IMG/pic1.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li> 
        <li><img src="../IMG/pic2.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li>
        <li><img src="../IMG/pic1.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li> 
        <li><img src="../IMG/pic2.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li>
        <li><img src="../IMG/pic1.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li> 
        <li><img src="../IMG/pic2.jpg" alt="abc defrg thysu ooip jkifbtg fff" /></li>
    </ul> 
</div>

J'ai essayé d'encapsuler le tout dans une autre div, ça se place correctement mais la galerie ne fonctionne plus.

Merci pour vos réponses

 

[dmo95]

Effectivement, le slideViewer se créé une fois le DOM chargé et le script JS fait le boulot en y ajoutant les bons éléments aux bons endroits. Donc si tu veux modifier le code, il faut regarder dans le plugin jQuery... chose parfois nécessaire lorsque tu souhaites personnaliser un peu plus le plugin.

Dans ton cas précis en revanche, si le .stripTransmitter correspond au module de navigation, je te propose de remettre li en float : left; mais de placer le ul différemment, peut être avec un float : right; ou en le positionnant correctement (pas forcement un float).

enjOy !

PS : Il faut se mettre à jQuery, ca fait un peu peur au début mais c'est tout ce qu'il de plus simple !

 

[mato]

J'ai réussi !
Effectivement j'ai juste mis li en float-left et ul en float right, je n'y avais même pas pensé.
Merci beaucoup.
A+