.insertBefore() .detach()

Version imprimable

Bonjour,

J'ai un problème avec ma fonction jQuery. Je veux afficher 2 éléments en cliquant sur un lien : .mask et .enlarge (.enlarge que je déplace pour que sa position absolute soit correcte).
Le code ci-dessous fonctionne la première fois, mais quand .mask est caché et .enlarge "detach", il n'affiche plus que .mask les fois suivantes et plus .enlarge (le insertBefore() n'est plus exécuté les fois suivantes).

Est-ce que vous avez une idée du problème ?

D'avance merci
Fabrice
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 26 27 $(document).ready(function(){ $('.jMyCarousel li a').live('click', function(e){ e.preventDefault(); var target = $(this).next('.enlarge'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen $('.mask').css({ 'width':maskWidth, 'height':maskHeight }); target.insertBefore('.mask').fadeIn(500); $('.mask').fadeTo('fast',0.5); //if mask is clicked $('.mask').click(function(e){ e.preventDefault(); $(this).hide(); $('.mask').prev('.enlarge').detach(); }); }); });

17/01/2013, 10h27
SpaceFrog

Code:

target.insertBefore('.mask')

tu insères quoi là ?
17/01/2013, 10h30
fab4001

J"insère le div '.enlarge' :

Code:

var target = $(this).next('.enlarge');
17/01/2013, 10h30
Bovino

:nono:
.detach() sert à retirer un élément du DOM.
Donc, une fois que tu l'as appelée une fois, dans

Code:

var target = $(this).next('.enlarge');

.next('.enlarge') n'existe plus !
17/01/2013, 10h37
fab4001

Au départ, j'utilisais .remove().
Je croyais qu'avec .detach(), à l'inverse de .remove(), on pouvait réinsérer l'élément dans le DOM ?

Sinon, il y a une fonction qui permet ça ?
17/01/2013, 10h41
SpaceFrog

rien que le fait de faire un append ou inserBefore deplacera l'element pas besoin de le supprimer avant ...
17/01/2013, 10h47
fab4001

En fait, je supprime l'élément qui est déplacé et je conserve celui d'origine.
17/01/2013, 10h51
Bovino

.detach() fait la même chose que .remove() sauf qu'il conserve toutes les données jQuery qui lui sont attachées.
Tu peux tout à fait le réinsérer par la suite dans le document, mais pour ça, il faut en garder une référence !
Stocke-le dans une variable par exemple.
Enfin, le mieux à mon avis serait quand même de se contenter de le masquer. :?

Voilà le code html correspondant, si ça peut rendre le problème plus clair :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
<div class="mask"></div>
 
<section class="carousel">
	<div class="centerDiv">
    	<div class="fixContent">
            <h1 class="floatL right">The picture gallery</h1>
            <div class="floatR">
                <div class="jMyCarousel">
                    <ul>
                        <li>
                        	<a href="javascript:void(0);"><img src="../img/gallery/visu1-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu1-large.jpg"></div>
                        </li>
                        <li>
                        	<a href="#"><img src="../img/gallery/visu2-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu2-large.jpg"></div>
                        </li>
                        <li>
                        	<a href="javascript:void(0);"><img src="../img/gallery/visu1-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu1-large.jpg"></div>
                        </li>
                        <li>
                        	<a href="#"><img src="../img/gallery/visu2-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu2-large.jpg"></div>
                        </li>
                        <li>
                        	<a href="javascript:void(0);"><img src="../img/gallery/visu1-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu1-large.jpg"></div>
                        </li>
                        <li>
                        	<a href="#"><img src="../img/gallery/visu2-small.jpg" width="81" height="81"></a>
                            <div class="enlarge"><img src="../img/gallery/visu2-large.jpg"></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</section>
</body>

17/01/2013, 11h50
fab4001

Merci pour votre aide.
Finalement, j'abandonne pour prettyPhoto, au moins ça marche bien ;)