Entre para seguir isso  
manoelrmjr

Exibir em Jquery 5 registros com suas galerias de fotos

Posts Recomendados

Olá! Sou novo aqui no forum, e iniciante no Jquery.

O projeto é em "Jquery v1.3.2", uso junto: "jquery-lightbox-0.5" e "livequery-1.0.3".

Eu tenho uma página que irá mostrar 5 registros diferentes de cada vez. Cada registro tem sua galeria de fotos, onde inicialmente é apresentado 2 fotos e o botão "+ fotos". Ao clicar no botão "+ fotos" é carregado na div daquele registro a galeria com todas as fotos dele. Qualquer foto clicada, será aberta com o lightbox, se for as fotos da geleria deve mostrar somente todas as fotos daquela galeria.

Em fim, resumindo, tenho 5 registros onde serão abertos abaixo de cada um uma galeria de fotos. as fotos são exibidas usando o lightbox. E tenho 3 dúvidas.

O 1° problema: após fazer o loading para uma div, quando eu clico a 1ªvez em uma imagem nada acontece(na verdade abre em nova janela) e na 2ª vez comessa a abrir as fotos no ligthbox. Eu até coloquei um return false; porque 1° abria a foto em uma nova janela e 2° abre a foto no ligthbox. Como resolvo isto? Acho que não estou sabendo usar o livequery direito ou no lugar correto.

O 2° problema: as páginas abertas pelo loading, devem ser páginas completas com <html><head><body></body></head></html> ou pode ter só o conteúdo a ser mostrado?

O 3° problema: eu clico no link "+ fotos" de um registro qualuqer, e logo em seguida clico em "+ fotos" de outro registro, daí vai mostrar a galeria de fotos do 2° clique na div do 1° clique. Como resolvo isto?

Segue o código que eu alterei para consseguir trabalhar com mais de 1 div:

<script language="JavaScript" type="text/javascript">
//Para conseguir usar o mesmo código em divs diferentes mostrando coisas diferentes
//1° identifico o clique do registro pelo nome do botão
//2° leio os campos <imput hydem> que tem os valores do registro.
//3° mando abrir a página que vai exibir a galeria de fotos daquele registro.
//4° na div do registroX é exibida a galeria de fotos.
//5° após caregada a galeria, clicando em uma foto é aberta no ligthbox.

$(document).ready(function(){

//Aplica ligthbox para toda a página   
$(function() {$('a[@rel*=lightbox]').lightBox();});

//abre galeria dentro da div do registro escolhido                           
$(".galeriax").click(function() {

//Identifica de qual dos 5 registros veio o pedido e manda exibir a galeria na div dele
if ($(this).attr("id")=='botao1'){
 var_imovel_numero=1//$("#imovel_numero_2").val();
 var_clicou = 'botao1';    
 var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
 var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
 var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
 var_tipex = $("#tipex_"+var_imovel_numero).val();
 carregando= '#carregando_'+var_imovel_numero;}

else if ($(this).attr("id")=='botao2'){
//var input = $("#escondido1").val(); funcionou    
 var_imovel_numero=2//$("#imovel_numero_2").val();
 var_clicou = 'botao2';    
 var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
 var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
 var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
 var_tipex = $("#tipex_"+var_imovel_numero).val();
 carregando= '#carregando_'+var_imovel_numero;}

else if ($(this).attr("id")=='botao3'){
//var input = $("#escondido1").val(); funcionou    
 var_imovel_numero=3//$("#imovel_numero_2").val();
 var_clicou = 'botao3';    
 var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
 var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
 var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
 var_tipex = $("#tipex_"+var_imovel_numero).val();
 carregando= '#carregando_'+var_imovel_numero;}

else if ($(this).attr("id")=='botao4'){
//var input = $("#escondido1").val(); funcionou    
 var_imovel_numero=4//$("#imovel_numero_2").val();
 var_clicou = 'botao4';    
 var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
 var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
 var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
 var_tipex = $("#tipex_"+var_imovel_numero).val();
 carregando= '#carregando_'+var_imovel_numero;}

else if ($(this).attr("id")=='botao5'){
//var input = $("#escondido1").val(); funcionou    
 var_imovel_numero=5//$("#imovel_numero_2").val();
 var_clicou = 'botao5';    
 var_registrointerno = $("#registrointerno_"+var_imovel_numero).val();
 var_id_imovel = $("#id_imovel_"+var_imovel_numero).val();
 var_categoria_mesclada = $("#categoria_mesclada_"+var_imovel_numero).val();
 var_tipex = $("#tipex_"+var_imovel_numero).val();
 carregando= '#carregando_'+var_imovel_numero;}

//esconde a div com informação de "Carregando..."
$(carregando).hide();

//Define nome da div que receberá o retorno do loading
 retorno= "#"+var_imovel_numero;

//XXXXXXXXXXXXXXXXXX
//Aqui é o problema - Cria a função que vai chamar o lightbox para a div carregada
//Erro que acontece: Só vai abrir as fotos no livebox se eu clicar 2X na imagem.
//1° clique abre a foto em nova janela (como se não tivesse carregado o lightbox), 
//2° clique abre a foto no lightbox.
$('a[@rel*=lightbox]').livequery('click', function() {$('a[@rel*=lightbox]').lightBox(); return false; });
//Não sei se é aqui que uso o livequery ou em outro lugar do script, mas aqui em parte funcionou.
//XXXXXXXXXXXXXXXXXX

//Esconde os botões de "+imagem" - só que eles continuam lá... Eu queria evitar um segundo clique.
$(".galeriax").hide();
               
// Esconder todas as divs que recebem a galeria, e deixa só a escolhida aberta.
if (retorno != "#1") {$("#1").hide();};
if (retorno != "#2") {$("#2").hide();};
if (retorno != "#3") {$("#3").hide();};
if (retorno != "#4") {$("#4").hide();};
if (retorno != "#5") {$("#5").hide();};

//Inicia carregamento
$(carregando).ajaxStart(function(){
  //Mostra menssagem carregando
  $(carregando).show();
  //Esconde div de retorno
  $(retorno).hide();
});

//Aqui acabou de carregar o conteúdo, acredito eu.
$(carregando).ajaxStop(function(){
// Esconde a menssagem de carregando.
$(carregando).hide(); 
// Exibe a div escolhida com a galeria
$(retorno).show("slow");  
});

//Envia os dados para abrir a galeria
$.get("http://meudominio/galeria_new.php",{registrointerno: var_registrointerno, id_imovel: var_id_imovel, categoria_mesclada: var_categoria_mesclada, tipex: var_tipex, n_imovel: var_imovel_numero}, 
      function(data) {$(retorno).empty().html(data); });

//Volta a mostrar o botão de "+fotos"
  $(".galeriax").show(); 

//Cancela ação padrão "Abrir link da galeria em nova página".
  return false; 

//Cria a variável da "ancora" e joga para ela, 
//tipo clicar em um link que te manda para uma ancora dentro da página, 
//Tentei mudar o foco para a div aberta mas não deu boa
//Tentei mudar o foco para o botão (imagem) "+fotos" da div aberta e não deu boa
//Fiz uma ancora em cima da div aberta e dou um get nela como se tivesse clicado em um link dela.
  ancorex="#ancora_"+var_imovel_numero;
  $.get(ancorex);
  } ); 
  } ); 
//Fim
</script>

Obrigado pela ajuda

Manoel Jr.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso