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>
Pergunta
manoelrmjr
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.
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.