Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo H. Rorato

[Resolvido] Colorbox com ajax

Recommended Posts

E ai galera, não to conseguindo fazer funcionar o colorbox dentro das paginas chamadas por ajax. Não estou conseguindo encontrar uma solução para o problema.

<link media="screen" rel="stylesheet" href="css/colorbox.css" />
   <script src="js/jquery.colorbox.js"></script>
<script type="text/javascript"> 

   $(document).ready(function(){  
      $(".btn_saiba_mais").colorbox({width:"746", height:"588", iframe:false});	
      var content = $('#content');  

       //pre carregando o gif  
      // loading = new Image(); loading.src = 'loading.gif';  
       $('#menu a').live('click', function( e ){  
           e.preventDefault();  
          // content.html( '<img src="loading.gif" />' );  		
           var href = $( this ).attr('href');  	
           $.ajax({  
               url: href,  
               success: function( response ){  
                   //forçando o parser  
                   var data = $( '<div>'+response+'</div>' ).find('#content').html();  			
 		links();
	//apenas atrasando a troca, para mostrarmos o loading  
                   window.setTimeout( function(){  
                       content.fadeOut('slow', function(){  
                           content.html( data ).fadeIn();  

                       });  
                   }, 100 );  
               }  
           });  

       }); 

   });  
</script>

 

Obrigado

Abraço

 

Tentei usar uma dica que encontrei no forum, ai ficou assim:

Na pagina que eu chamei via ajax eu coloquei:

<div id="content"> 
<script>
     $(document).ready(function() {  
       $('#content').load('premiumPequenas.php',  
           function(){  
              	$("a.btn_saiba_mais").colorbox({width:"746", height:"588", iframe:false});  
           }  
       );  
   });  
</script> 

<a href="video.php" class="btn_saiba_mais"><img src="Imagens/internas/saibaMais.png" width="82" height="12" /></a>
</div>

 

Mas nada ainda :/

Abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

olhe o primeiro script, veja o comentário que fiz:

$.ajax({  
               url: href,  
               success: function( response ){  
                   //forçando o parser  
                   var data = $( '<div>'+response+'</div>' ).find('#content').html();                          
               links();
               //apenas atrasando a troca, para mostrarmos o loading  
                   window.setTimeout( function(){  
                       content.fadeOut('slow', function(){  
                           content.html( data ).fadeIn();  

                           //coloque o colorbox aqui                            
                       });  
                   }, 100 );  
               }  
           });  

você deve instanciar o colorbox, neste lugar ali, logo depois de colocar o html no documento.

Compartilhar este post


Link para o post
Compartilhar em outros sites

William Bruno sempre presente :D

Man valeu ai pela ajuda, mas eu consegui de outra forma, fui da uma estudada na documentacao do colorbox e achei uma parte que falava sobre isso.

Sobre a sua resposta, poise eu estava com presa e nem me liguei nisso :X

 

Se isso for ajudar alguem, so dao uma olhadinha aqui:

http://www.jacklmoore.com/colorbox

 

Obrigado William

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.