jquery cycle plugin divs toujours empilé problème

Question

je veux mettre trois diaporamas jquery dans un div. d'une manière ou d'une autre, sans aucun positionnement css, les diapos ne s'afficheront pas les unes sous les autres, mais empilés. comment puis-je obtenir les sildes à afficher les uns des autres, tout comme les divs normales?

<div id="slidecontainer" style="background-color: red;"> 

<div id="q1"> 
     <img src="merkel01.jpg"/> 
     <img src="merkel02.jpg"/> 
     <img src="merkel03.jpg"/> 
     <img src="merkel04.jpg"/> 
     <img src="merkel05.jpg"/> 
    </div> 

<div id="q2"> 
     <img src="poyan01.jpg"/> 
     <img src="poyan02.jpg"/> 
     <img src="poyan03.jpg"/> 
     <img src="poyan04.jpg"/> 
     <img src="poyan05.jpg"/> 
     <img src="poyan06.jpg"/> 
    </div> 


<div id="q3"> 
     <img src="mirage01.jpg"/> 
     <img src="mirage02.jpg"/> 
     <img src="mirage03.jpg"/> 
     <img src="mirage04.jpg"/> 
     <img src="mirage05.jpg"/> 

    </div> 


    <div>TEST</div> 
    <div>TEST222</div> 
    <div>TEST333</div> 

</div> 

aussi, si j'ajoute qu'ils seront également placés test-divs supplémentaires sous les trois diapositives empilés ... toute aide vermy beaucoup apprécié !!

Fusi

Answer 1

Pourriez-vous nous donner un lien vers le code source du plug-in de cycle?

Même si peut pas CSS impliqué, le plugin peut encore le faire avec jQuery qui est essentiellement la même chose: element.css('position', 'absolute')

Je vais sortir sur un membre ici, et vous suggère Cherchez n'importe où ce positionnement absolu est appliqué aux divs et changez absolute en static, car c'est la cause la plus probable de vos divs empilés.

Edit: trouvé où ça se passe, si vous utilisez http://jquery.malsup.com/cycle/

Même si cela probablement casser de fonctionner correctement, vous devriez être en mesure de modifier à votre goût par la suite.

Rechercher cette ligne (259 jquery.cycle.js):

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { 

Modifier à:

$slides.hide().each(function(i) { 

Et supprimez cette ligne (261):

$(this).css('z-index', z) 

Ce qui est quelques lignes ci-dessous.

Plus d'informations sur la méthode css jQuery: http://api.jquery.com/css/