1 pièce(s) jointe(s)
Conflit entre Barackslideshow et roundcorner
Bonjour,
J'ai un problème actuellement pour arrondir les angles d'une <div> au sein d'un slideshow (Barackslideshow).
Pour arrondir les angles d'un <div>, je dois ajouter la class "border-radius" ainsi que des options comme ceci :
Code:
1
2
|
<div id="contentToRound" class="border-radius" options="{'radius':10, 'css3': false}"></div> |
.
Or dès que j'ajoute ces éléments à la structure html de mon slideshow, il ne fonctionne plus.
POur info, j'arrive très bien à faire fonctionner le slideshow d'une part, et les angles arrondis d'autres part. C'est uniquement quand j'essaye d'arrondir les angles d'un élément du slideshow que ça se complique :(
Voici le code HTML du slideshow (avec la class et les options pour roundcorner) :
Code:
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
|
<div id="slideshow">
<span id="loading">Chargement</span>
<ul id="pictures">
<li><a href="#"><img src="images/item1.jpg" alt="" title="item1" /></a></li>
<li><a href="#"><img src="images/item2.jpg" alt="" title="item2" /></a></li>
<li><a href="#"><img src="images/item3.jpg" alt="" title="item3" /></a></li>
<li><a href="#"><img src="images/item4.jpg" alt="" title="item4" /></a></li>
<li><a href="#"><img src="images/item5.jpg" alt="" title="item5" /></a></li>
<li><a href="#"><img src="images/item6.jpg" alt="" title="item6" /></a></li>
<li><a href="#"><img src="images/item7.jpg" alt="" title="item7" /></a></li>
</ul>
<ul id="nav">
<li class="current"><a href="images/item1.jpg">item1</a></li>
<li><a href="images/item2.jpg">item2</a></li>
<li><a href="images/item3.jpg">item3</a></li>
<li><a href="images/item4.jpg">item4</a></li>
<li><a href="images/item5.jpg">item5</a></li>
<li><a href="images/item6.jpg">item6</a></li>
<li><a href="images/item7.jpg">item7</a></li>
<h2 class="navslideshow">Title</h2>
<img class="rococo" src="images/rococo.gif" alt="" />
</ul>
</div> |
Javascript appel plugin Slideshow:
Code:
1
2
3
4
|
window.addEvent('domready', function(){
new BarackSlideshow('nav', 'pictures', 'loading', {transition: 'fade', auto: true, autostart: true});
}); |
Javascript appel plugin roundcorner:
Code:
1
2
3
4
|
document.addEvent('domready', function() {
$$('.border-radius').each(function(el){el.borderRadius();});
}); |
J'ai mis un exemple complet de mon code en pj (html, + js + css + images)
Si vous avez une idée pour que je puisse faire fonctionner les 2 en même temps, je suis preneur !
Merci d'avance,
Mathias
