2010-11-10 6 views
0

Je tente d'afficher un caché div dans colorbox en utilisant un onclickjQuery Colorbox contenu cacher sur près

de lien <a> Le violon ->http://jsfiddle.net/hSp3m/1/

Voici mon balisage,

<style type="text/css"> 
.lightbox-content{ display: none } 
</style> 

<div class="panel yellow"> 
    <h4 class="font">Title</h4> 
    <a title="View now &raquo;" class="learnmore" href="#">View now &raquo;</a> 
    <div class="lightbox-content"> 
     <h4>The first lightbox</h4> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    </div> 
</div> 

<script type="text/javascript"> 
    $('.panel .learnmore').click(function(e){ 
     e.preventDefault(); 
     var d = $(this); 
     $.colorbox({ 
      width: 920, 
      inline: true, 
      href: d.siblings('div.lightbox-content'), 
      opacity: 0.5, 
      open: true, 
      onLoad: function(){ 
       d.siblings('div.lightbox-content').fadeIn() 
      }, 
      onCleanup: function(){ 
       d.siblings('div.lightbox-content').hide() 
      } 
     }) 
    }); 
</script> 

maintenant la lightbox s'ouvrira et chargera le contenu correctement. Il va même disparaître le contenu. Le problème est qu'une fois la lightbox fermée, un style display: block est appliqué à .lightbox-content dont je n'arrive pas à me débarrasser. Je veux garder le contenu caché, le montrer sur un clic dans la visionneuse, puis le masquer de nouveau à proximité.

Des idées s'il vous plaît?

Répondre

0

http://jsfiddle.net/hSp3m/9/

$('.panel .learnmore').click(function(e){ 
    var d = $(this); 
    $.colorbox({ 
     width: 600, 
     inline: true, 
     opacity: 0.5, 
     href: d.siblings('div.lightbox-content'), 
     onOpen: function(){ 
      d.siblings('div.lightbox-content').fadeIn() 
     }, 
     onCleanup: function(){ 
      $('div.lightbox-content').hide(); 
     } 
    }); return false; 
}); 

Vous cherchez @ la fonctionnalité, il devrait avoir tout lightbox contenu caché, de sorte que le oncleanup a été changé pour effacer tous les bas divs de contenu lightbox.

+0

Parfait, et je n'ai pas besoin de changer mon balisage! –

1

Et voilà. Vous deviez l'envelopper dans un conteneur caché. La commande inline prend le contenu et le remplace après la fermeture de la boîte de couleur. jsfiddle

+0

Ah oui, gentil –