Ir para conteúdo
Fórum Script Brasil
  • 0

Imagem na tela toda

Thiago lablonsk

Perguntado por Thiago lablonsk,

 Share

Pergunta

Thiago lablonsk

Thiago lablonsk

Postado
Postado

Galera,

Pode me ajudar?

É o seguinte eu estou fazendo lightbox e quando clico na imagem ele exibe ela. O problema é que eu queria focar o usuário na imagem ou a imagem onde o usuário esta visualizando.

E não sei por qual diabos meu toggle não está funcionando  junto com esse scrypt do lightbox!! 

<!DOCTYPE HTML>
<html><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@import url("css/imagens.css");
</style>
<title>FISIO</title>
<style type="text/css">
@import url("css/pagina.css");
	</style>
    <script 'src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"'></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/album.js"></script>
<script>
$(function() {
	var tamPagina = $(document).height(); // altura da página
	var largPagina = window.innerWidth;
	//largPagina=largPagina- (largPagina*0.06);
	var tamPagina2=tamPagina;
	tamPagina=tamPagina;
	tamPagina2=tamPagina2-(tamPagina2*0.93);
	$('body').css({'height':(tamPagina)+'px'});
	$('.cabecalho').css({'height':(tamPagina2)+'px'});
	$('li').css({'padding':((tamPagina)*0.0052)+'px'});
	$('#divisao1').css({'height':((tamPagina*0.005))+'px'});
	
	//$('#pagina1').css({'border-righ':(largPagina)+'px'});
	//$('#pagina2').css({'height':(tamPagina/5)+'px'});
	//$('#pagina2').css({'width':(largPagina)+'px'});
	//$('#menu_wrap').css({'width':(largPagina)+'px'});
});
</script>
<script type="text/javascript"> 
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(e) {
     propaganda1();
});
$(document).ready(function(){

$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

<body>
<ul >
  <li class="a"><a href="index.php">FISIO</a></li>
  <li class="a"><a href="sobrea.php">SOBRE A FISIO</a></li>
  <li class="a"><a href="#">EVENTOS</a></li>
    <li class="a"><a href="contato.php">CONTATO</a></li>
      <li class="a"><a href="ondeencontrar.php">CONDE NOS ENCONTRAR</a></li>
</ul>

<texto><titulo><v><p>Confira aqui!</p></v></titulo>
<div id="box-toggle">

<span><titulo><v><p>Confira nosso Arraiá</p></v></titulo></span>
<div class="tgl">
<texto2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/x0h-IiC4BoY" frameborder="0" allowfullscreen class="video"></iframe>
    <servicotextol><p>A FisioFitness com o objetivo de incentivar a convivência e entretenimento de seus clientes, funcionários e amigos
promove eventos para toda a família.</p>
 
</servicotextol>
</texto2>

	<texto><titulo><v><p>Fotos do nosso  Arraiá</p></v></titulo></texto>
<div class="mtlsr-images-for-lightbox">
		<div id="caixa">
			<imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
			<imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (4).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (4).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (5).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (5).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (13).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (13).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (12).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (12).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (49).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
            <imagemcaixa>
				<a href="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG">
					<img src="imagem/fotos eventos/Arraiá_Fisio_Fitness-2016-07-24/Arraiá Fisiofitness  (2).JPG" alt="" class="imagemalbum"/>
				</a>
			</imagemcaixa>
		</div>
	</div>
    </div>
    </div>
	<!--Bloco para abrir a lightbox-->
	<div class="mtlsr-lightbox">
		<a href="#" class="close"><img src="icones/close.png" ></a>
		<a href="#" class="prev"><img src="icones/paratrazm.png" ></a>
		<a href="#" class="next"><img src="icones/parafrentm.png" ></a>
	</div>
    </texto>
<div class="rodape">
	<texto>
  <titulo><p>Nosso Endereço</p></titulo>
  <p>&nbsp;</p>
</titulo>
<geral1>
  <p>Rua dos testes, 21 - caiçara</p>
  <p>&nbsp;</p>
</geral1>
<p>
  <geral1>Telefone: (31)3239-1039</geral1>
 
</p>
<p>&nbsp;</p>

  <geral1>
<p>Email:<a href="@">thiago@com.br</a></p>
</geral1>
</texto>
<mapa>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3751.1252815244825!2d-43.940817785085635!3d-19.919124786609817!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa699fb595bab33%3A0xca642ca01121d880!2sPra%C3%A7a+Sete+de+Setembro!5e0!3m2!1spt-BR!2sbr!4v1468712644346" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe></mapa>
</div>
</body>
</html>

meu lightbox 

$(document).ready(function() {
			var current = '.mtlsr-images-for-lightbox ul li.current';
 
			//Função para verificar a posição atual da imagem e remover as setas(prev e next) conforme necessário
			function check_image_position(){				
				if ($(current).is(':last-child')) {
					$('.next').hide();
					$('.prev').show();
				}else if ($(current).is(':first-child')) {
					$('.next').show();
					$('.prev').hide();
				}else{
					$('.next, .prev').show();
				}
			}			
 
			$('.mtlsr-images-for-lightbox #caixa imagemcaixa').on('click', 'a', function(event) {
				event.preventDefault();
				var big_image_href = $(this).attr('href');
 
				$(this).parent().addClass('current');
				$('.mtlsr-lightbox').fadeIn();
				$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
 
				check_image_position();
			});
			//Fechar
			$('.mtlsr-lightbox').on('click', '.close', function(event) {
				$('.mtlsr-lightbox').fadeOut();
				$('.mtlsr-lightbox .image-in-lightbox').remove();
				$(current).removeClass('current');
			});
			//Função Next e Prev
			$('.mtlsr-lightbox a').on('click', function(e){				
				if($(this).attr('class')=='next'){
					var big_image_href = $(current).next().find('a').attr('href');					
 
					$(current).next().addClass('current');
					$(current).prev().removeClass('current');
 
				}else if($(this).attr('class')=='prev'){
					var big_image_href = $(current).prev().find('a').attr('href');
 
					$(current).prev().addClass('current');
					$(current).next().removeClass('current');
				}
				check_image_position();
 
				$('.mtlsr-lightbox .image-in-lightbox').remove();
				$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
			});
		});

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152.1k
    • Posts
      651.8k
×
×
  • Criar Novo...