Modal automático
Iae imasters, então eu fiz uma galeria em css+html+jquery, ta tudo certo eu clico e aparece o modal da imagem. Qual a dúvida? É como eu faço pra fazer isso de modo automático?
Já agradeço qualquer ajuda.
segue abaixo o script:
$(document).ready(function(){
var item, img, title, large_img;
var CW, CH, CL, CT, hpadding, vpadding, imgtag;
//Bandeira para a prevenção de exposições de imagens múltiplas
var lb_loading = false;
var doc = $(document);
$("#lightbox li").click(function(){
if(lb_loading) return false;
lb_loading= true;
item = $(this);
img = item.find("img");
title = item.find(".title").html();
// Remover classe ativa de LI clicada anteriormente
$("#lightbox li.active").removeClass("active");
// Marque a LI clicado como ativo para uso posterior
item.addClass("active");
//A imagem grande
large_img = new Image();
// O uso de dados grande ou a si mesmo se src url grande imagem não está disponível
large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
// Adicionando HTML adicional - apenas se não tiver sido adicionada antes
if($(".lb_backdrop").length < 1)
{
var lb_backdrop = '<div class="lb_backdrop"></div>';
var lb_canvas = '<div class="lb_canvas"></div>';
var lb_previous = '<span class="lb_previous"><</span>';
var lb_title = '<span class="lb_title"></span>';
var lb_next = '<span class="lb_next">></span>';
var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
var total_html = lb_backdrop+lb_canvas+lb_controls;
$(total_html).appendTo("body");
}
// Fade em elementos lightbox se eles estão escondidos devido a uma saída anterior
if($(".lb_backdrop:visible").length == 0)
{
$(".lb_backdrop, .lb_canvas, .lb_controls").fadeIn("slow");
}
//Display preloader até as cargas grandes de imagem e fazer a imagem anterior translúcido para que o carregador no BG é visível
if(!large_img.complete)
$(".lb_canvas").addClass("loading").children().css("opacity", "0.5")
// Desativação esquerda / direita controles primeira / última itens
if(item.prev().length == 0)
$(".lb_previous").addClass("inactive");
else
$(".lb_previous").removeClass("inactive");
if(item.next().length == 0)
$(".lb_next").addClass("inactive");
else
$(".lb_next").removeClass("inactive");
//Centralização. Lb_canvas
CW = $(".lb_canvas").outerWidth();
CH = $(".lb_canvas").outerHeight();
//coordenadas superior e esquerda
CL = ($(window).width() - CW)/2;
CT = ($(window).height() - CH)/2;
$(".lb_canvas").css({top: CT, left: CL});
// Inserir a imagem grande em lb_canvas. Uma vez que é carregado
$(large_img).load(function(){
// Recentramento. Lb_canvas com novas dimensões
CW = large_img.width;
CH = large_img.height;
//. estofamento lb_canvas a ser adicionado à largura da imagem altura para obter as dimensões totais
hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
CL = ($(window).width() - CW - hpadding)/2;
CT = ($(window).height() - CH - vpadding)/2;
// Animando . Lb_canvas para dimentions novos e posição Animando. Lb_canvas para dimentions novos e posição
$(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
// Inserir a imagem, mas mantendo-o escondido
imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
$(".lb_canvas").html(imgtag);
$(".lb_canvas img").fadeTo("slow", 1);
// Exibindo o título da imagem
$(".lb_title").html(title);
lb_loading= false;
$(".lb_canvas").removeClass("loading");
})
})
})
// Clique navegação baseado em
doc.on("click", ".lb_previous", function(){ navigate(-1) });
doc.on("click", ".lb_next", function(){ navigate(1) });
doc.on("click", ".lb_backdrop", function(){ navigate(0) });
// Teclado navegação baseado em
doc.keyup(function(e){
// Teclado de navegação deve funcionar somente se luz está ativo, o que significa cenário é visível.
if($(".lb_backdrop:visible").length == 1)
{
//Esquerda
if(e.keyCode == "37") navigate(-1);
//Direita
else if(e.keyCode == "39") navigate(1);
//Esc
else if(e.keyCode == "27") navigate(0);
}
});
//função para navegação
function navigate(direction)
{
if(direction == -1) // esquerda
$("#lightbox li.active").prev().trigger("click");
else if(direction == 1) //direita
$("#lightbox li.active").next().trigger("click");
else if(direction == 0) //saida
{
$("#lightbox li.active").removeClass("active");
$(".lb_canvas").removeClass("loading");
// Fade os elementos lightbox
$(".lb_backdrop, .lb_canvas, .lb_controls").fadeOut("slow", function(){
// tela vazia e título
$(".lb_canvas, .lb_title").html("");
})
lb_loading= false;
}
}
})
</script>Discussão (5)
Carregando comentários...