problème avec hide/show dans jquery

Je travaille sur une sorte de galerie. J'ai trouvé une solution prête mais je veux faire quelques modifications, et je suis coincé.problème avec hide/show dans jquery

http://www.rareclips.ayz.pl/test/

Comment je veux que cela fonctionne: Lorsque vous cliquez sur l'image et il devrait changer l'image à droite et faire un de caché div qui est visible.

Le problème est que je dois cacher tous les divs sur le chargement de la page et montrer seulement div spécifique à l'intérieur de ce div caché sur image clic.

<script type="text/javascript"> 
$(document).ready(function(){ 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
$(this).css({'z-index' : '10'}); 
$(this).find('img').addClass("hover").stop() 
    .animate({ 
    marginTop: '-110px', 
    marginLeft: '-110px', 
    top: '50%', 
    left: '50%', 
    width: '200px', 
    height: '200px', 
    padding: '5px' 
    }, 200); 

} , function() { 
$(this).css({'z-index' : '0'}); 
$(this).find('img').removeClass("hover").stop() 
    .animate({ 
    marginTop: '0', 
    marginLeft: '0', 
    top: '0', 
    left: '0', 
    width: '150px', 
    height: '150px', 
    padding: '10px' 
    }, 400); 
}); 

//Swap Image on Click 

$("ul.thumb li a").click(function() { 

    var mainImage = $(this).attr("href"); //Find Image Name 
       $("#main_view img").attr({ src: mainImage }); 

       return false; 
}); 


}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
//  $('#slickbox').hide(); 
     $('a.slick-toggle').click(function() { 

     var dataID = $(this).attr("data-id"); 
     $('#slickbox').hide(); 
     $("#slickbox.div[data-id=" + dataID + "].slickbox").show('slow'); 
     return false; 
    }); 
}); 
</script> 

</head><body> 
<div class="container"> 

<ul class="thumb"> 
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="1"><img src="./index_pliki/min1.jpg" alt="" /></a></li> 
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="2"><img src="./index_pliki/min2.jpg" alt="" /></a></li> 
<li><a href="./index_pliki/max3.jpg" data-id="3"><img src="./index_pliki/min3.jpg" alt="" /></a></li> 
<li><a href="./index_pliki/max4.jpg" data-id="4"><img src="./index_pliki/min4.jpg" alt="" /></a></li> 
</ul> 

<div id="main_view"> 

     <a href="index.htm" id="slick-up"><img src="index_pliki/max1.jpg" alt=""/></a> 
<small style="float: right; color: rgb(153, 153, 153);"> 
         </small> 
</div> 

<div id="wiecej">  

<div id="slickbox"> 

<a id="someID" class="slick-toggle" data-id="1" href="#">Show/Hide</a> 
<div id="someOtherID" class="slickbox" data-id="1" style="display: none;"> 
    1 
</div> 

<a id="someID" class="slick-toggle" data-id="2" href="#">Show/Hide</a> 
<div id="someOtherID" class="slickbox" data-id="2" style="display: none;"> 
    2 
</div> 

</div>

Source

2010-06-11 nonab

Bienvenue sur SO, s'il vous plaît visitez http://stackoverflow.com/faq – Reigel

Vous ne pouvez pas rendre les choses visibles à l'intérieur d'un élément caché:

$('#slickbox').hide();

Ce cache la div avec l'id slickbox et tout ce qu'il ya des enfants. Changez votre gestionnaire de clic comme ceci:

$(document).ready(function() { 
    $('a.slick-toggle').click(function() { 
    var dataID = $(this).attr("data-id"); 
    $('#slickbox div.slickbox').hide(); 
    $("#slickbox div[data-id=" + dataID + "].slickbox").show('slow'); 
    return false; 
    }); 
});

Et notez le point manquant entre #slickbox div

Source

2010-06-11 09:05:18 jigfox

merci pour la réponse rapide, fonctionne comme un charme :) – nonab

problème avec hide/show dans jquery

Répondre

Questions connexes