Ir para conteúdo

Arquivado

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

Will Up

Problemas com lightbox

Por , em Javascript

Recommended Posts

Will Up    0

Will Up
Postado

Amigos estou com alguns problemas na minha lightbox, como vocês podem ver nesse link: http://theimageup.com/portf.php?usuario=williancima

 

A imagem grande é mostrada quando a página é carregada, e só some quando alguma miniatura é clicada :(

 

 

Segue todo script da página (PHP + Javascript):

 

<?php

if (!isset($_GET['usuario'])) 
{ 

header("Location: http://www.theimageup.com/"); 
exit; 

} 

$busca = $_GET['usuario']; 

$busca = mysql_real_escape_string($busca); 

$sql = "SELECT * FROM `images` WHERE (`Portf` = 'S') AND (`Username` = '".$busca."') ORDER BY `ImageID` DESC"; 

$query = mysql_query($sql); 

$i = 0; 

$imagens = array(); 

while($row = mysql_fetch_array($query, MYSQL_ASSOC)) 
{ 

foreach($row as $key => $value) 
{ 

$imagens[$i][$key] = $value;	

} 

$i++; 

}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Portfólio</title>
 <link href="/style_portf.css" rel="stylesheet" type="text/css" />  
<script type='text/javascript' src='/port/jquery.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
 
<body>
<div id="tudo">

<?php if(sizeof($imagens) == 0): ?> 

<center style='margin-bottom: 10px; background: #FCC; color: #A00; font-size: 1.3em; padding: 3px;'> 
Este usuário não possui imagens em seu portfólio
</center> 

<?php else: ?> 

<?php $i = 1; ?> 

<?php foreach($imagens as $imagem): ?> 

<a href="#exibe<?php echo $i++; ?>" name="modal"><img onmouseover="if(parseFloat(this.style.opacity) != 0) p_fade(this, 'fast', 'out', '0.5', 0)" onmouseout="p_fade(this, 'fast', 'in', 1, 0)" onload="this.completed = 1; p_fade(this, 'fast', 'in', 1, 2)" src="http://www.theimageup.com/images_files/redimensionar.php?arquivo=<?php echo $imagem['Image']; ?>&largura=150&altura=150" style="opacity: 1;"></a> 

<?php endforeach; ?> 

<div id="boxes"> 

<?php $i = 1; ?> 

<?php foreach($imagens as $imagem): ?> 

<div id="exibe<?php echo $i++;?>" class="window"> 
<div class="img-desc"> 
<img src="http://www.theimageup.com/images_files/redimensionar.php?arquivo=<?php echo $imagem['Image']; ?>&largura=600&altura=350">
 
<cite><b>Descrição:</b><br> 
<b>Recursos:</b> 
</cite>

</div> 
</div> 
<div id="mask"></div> 
</div> 

<?php endforeach; ?> 

</div> 

<?php endif; ?>

</div>

<script type="text/javascript">
    		/* Fade in and out for thumbnails */
    		
    		var p_fade = function(element, mode, type, stop, number) {
    			clearInterval(element.interval);
    			
    			switch(mode) {
    				case 'slow' : var speed = 75; break;
    				case 'fast' : var speed = 25; break;
    				case 'normal' : default: var speed = 50; break;
    			}

    			if(number == 0) {
    				element.interval = (type == 'in') ? setInterval(function() { fadeIn(element); }, speed) : setInterval(function() { fadeOut(element); }, speed);
    			} else {
	    			setTimeout(function() {
	    				element.interval = (type == 'in') ? setInterval(function() { fadeIn(element); }, speed) : setInterval(function() { fadeOut(element); }, speed);
	    			}, number * 30);
    			}
    			
    			function fadeIn(element) {
    				var value = parseFloat(element.style.opacity) + 0.1;
    				if(value <= stop) {
    					p_opacity(element, value);
    				} else {
    					clearInterval(element.interval);
    				}
    			}

    			function fadeOut(element) {
    				var value = parseFloat(element.style.opacity) - 0.1;
    				if(value >= stop) {
    					p_opacity(element, value);
    				} else {
    					clearInterval(element.interval);
    				}
    			}
    		};

    		var p_opacity = function(element, value) {
				element.style.opacity = value;
				element.style.MozOpacity = value;
				element.style.KhtmlOpacity = value;
				element.style.filter = 'alpha(opacity=' + value * 100 + ')';
		    };
</script>

<!-- Exibe -->
<script type="text/javascript">
$(document).ready(function() {	
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	

		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000); 
	});
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
});
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você tá importando o jQuery 2 vezes!

 

remova uma das linhas:

<script type='text/javascript' src='/port/jquery.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

pra começar escondido, você precisa:

#exibe1, #exibe2 { display: none; }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito