Galeria com lightbox

[Will Up 0]

Amigos, fiz uma galeria com lightbox, mas a imagem certa não está exibindo na lightbox.

 

Tipo, tenho duas imagens em minha galeria, mas somente uma abre na lightbox. Vocês podem ver aqui: http://theimageup.com/portf.php?usuario=williancima

 

Javascript:

<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>

 

Miniatura:

<a href="#exibe" name="modal"><img src="http://www.theimageup.com/images_files/redimensionar.php?arquivo=<? echo $Image; ?>&largura=150&altura=150""></a>

 

Lightbox:

<div id="boxes">
<div id="exibe" class="window">

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

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

[everton0694 0]

isso é Javascript não PHP

[Will Up 0]

Eu sei, mas meu problema não é com javascript, e sim sim PHP. Entre nesse link q você vai entender: http://theimageup.com/portf.php?usuario=williancima

 

Clique nas duas miniaturas :)

[Vini_Aviva 13]

O diretório da image maior é " $image " você especificou esse diretório pra as duas images ? se sim você poderia arrumar isso colocando o canto real dela ...

[Will Up 0]

Não é o diretório, é só a imagem (ex: h434h3jfyuf4u5.jpg).

 

Tô usando uma classe para redimensiona-las:

 

Miniatura: http://www.theimageup.com/images_files/redimensionar.php?arquivo=<? echo $Image; ?>&largura=150&altura=150

 

Maior: http://www.theimageup.com/images_files/redimensionar.php?arquivo=<? echo $Image; ?>&largura=600&altura=350

[William Bruno 1501]

o teu problema na verdade, é HTML.

 

os 2 links (as 2 miniaturas), levam para o mesmo lugar.

por isso acontece isso ai.

 

troque o

href="#exibe"

por algo como:

href="caminho até a imagem grande"

[Will Up 0]

Ok, aí a lightbox não vai abrir oO

[William Bruno 1501]

? pq não ?

 

é exatamente assim, que todos os plugins de lightbox funcionam...

se você quiser continuar nessa linha que você está.. faça:

<a href="#exibe" name="modal">

e

<a href="#exibe2" name="modal">

entendeu ? ai se precisar de outro:

 

<a href="#outro_id_diferente" name="modal">

.. e dai em diante...

[Will Up 0]

Amigo, o #exibe é definido no css, não tem como faze da forma que você diz.

 

Fazer assim como você disse:

 

<a href="#exibe" name="modal">

<a href="#exibe2" name="modal">

<a href="#exibe3" name="modal">

 

Só se for feita manualmente...

 

Uma solução, talvez, seria pôr o PHP no CSS, mas não sei como fazer

[André Severino 3]

#exibe = ID

a respeito do link, no src da imagem utilize

<?php echo $Image; ?>

ao invés de

<? echo $Image; ?>

E o link das imagem você tem que utilizar um while com o link caso esteja utilizando um banco de dados por exemplo:

while($linhaid = mysql_fetch_array($query)){
echo "<a href=\"www.site.com.br/img-maior/".$linhaid['imagem']."\"><img src=\"www.site.com.br/img-menor/".$linhaid['imagem']."\" /></a>";
}

Tenta inserir o #exibe no id="" para ver se da certo.

[William Bruno 1501]

Amigo, o #exibe é definido no css, não tem como faze da forma que você diz.

tem como sim.

 

 

 

Fazer assim como você disse:

<a href="#exibe" name="modal">

<a href="#exibe2" name="modal">

<a href="#exibe3" name="modal">

 

Só se for feita manualmente...

 

por exemplo, use um contador, $i, e vá concatenando o valor desse contador, em cada id, assim você terá ids diferentes a cada volta do laço.

 

Uma solução, talvez, seria pôr o PHP no CSS, mas não sei como fazer

 

nem precisa disso, é só você usar css corretamente.

<div id="#exibe" class="modal">
<div id="#exibe2" class="modal">
<div id="#exibe3" class="modal">

e então no css, você estilza a class .modal

[Will Up 0]

Segue a página completa, pra q vocês possam entender melhor :)

 

<?php
include 'config.php';

// Verifica se foi feita alguma busca
// Caso contrario, redireciona o visitante
if (!isset($_GET['usuario'])) {
header("Location: http://www.theimageup.com/");
exit;
}
// Se houve busca, continue o script:

// Salva o que foi buscado em uma variável
$busca = $_GET['usuario'];
// Usa a função mysql_real_escape_string() para evitar erros no MySQL
$busca = mysql_real_escape_string($busca);

// ============================================

// Monta outra consulta MySQL para a busca
$sql = "SELECT * FROM `images` WHERE (`Portf` = 'S') AND (`Username` = '".$_GET['usuario']."') ORDER BY `ImageID` DESC";
// Executa a consulta
$query = mysql_query($sql);

// ============================================
?>

<!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>

<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>
</head>
 
<body>
<div id="tudo">

<?php
if(mysql_num_rows($query) == '0')
{

echo "<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>";

} else {

while ($resultado = mysql_fetch_assoc($query)) {
$Title = $resultado['Title'];
$Image = $resultado['Image'];
$link ='http://www.theimageup.com/imagem/'.$resultado['Image'];
?>

<a href="#exibe" 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=<? echo $Image; ?>&largura=150&altura=150" style="opacity: 1;"></a>


<?
}
}
?>

<div id="boxes">
<div id="exibe" class="window">

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

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

</div>

</body>
</html>

[William Bruno 1501]

Eu já tinha entendido, e você ?

 

olha.. que tal, em vez de usar esse #exibe fixo, fazer algo melhor, assim:

<a href="images/imagem_grande.jpg" title="Essa imagem mostra bla bla bla">
       <img src="images/imagem1_thumb.jpg" alt="Os recursos..." /></a>

assim você tem todas as informações, nos atributos da tag <img /> e da tag <a>

basta fazer um js inteligente para colocar as informações nos lugares corretos.

[Will Up 0]

Amg, da forma q está é perfeito pra mim, só preciso resolver este problema.

 

A forma q você sugeriu anteriormnente, a do $i, parece boa. Como faz?