Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fiz uma galeria de fotos dinâmica em PHP com BD Mysql, tudo funciona perfeitamente, o único problema que não sei como resolver é como redimensionar todas as imagens proporcionalmente.
Quando faço o Upload Múltiplo das fotos ele redimensiona com o valor que coloco no código abaixo, mas as fotos que tenho que exibir na galeria não estão todas na mesma proporção, pois tenho elas na posição vertical e horizontal. Então gostaria de saber como posso fazer para elas serem exibidas sem ficarem esticadas, aparecerem na proporção?
A parte do código que faz isto é essa, mas desta forma as imagens estão aparecendo esticadas.
?>
<?php echo "<a href='$filename' target='_blank'><img src='$filename' width='210' height='140' border 0></a> "; // proporção da imagem que é exibida
}
?>Na realidade o ideal é já salvar no tamanho que vai usar, para economizar espaço. O Beraldo postou hoje uma classe de manipulação de imagens.
http://forum.imasters.com.br/index.php?/topic/355923-classe-para-manipulacao-de-imagens/
Dá uma olhada, pode ajudar.
Carlos Eduardo
O grande problema é que para criar essa galeria de fotos eu usei a barra developer toolbox do Dreamweaver, e dentro dela tem um item para Upload Multiplo de Imagens e dentro da Aba que se abre ele te permite dar um resize na imagem com o valor que você quiser definir e automaticamente cria também uma pasta chamada thumbnails dentro da pasta das imagens originais que foram "upadas". Olhei essas duas pastas agora e ele faz o resize perfeito das imagens que serão exibidas, o grande problema é nesse código que exibe a galeria, é aí que eu tenho que fazer ele exibir proporcional e não estou sabendo fazer, pq quando coloco esse width=200 e o height=200 ele está "blocando" essas imagens e é aí que está destruindo a exibição com o esticar das imagens. Vou postar o código desse exibir.php. Quando clico nas imagens elas aparecem ampliadas com o efeito Lightbox e aparecem perfeitas na dimensão.
<?php require_once('Connections/galeria.php'); ?>
<?php require_once('Connections/galeria.php'); ?>
<?phpif (!isset($_SESSION)) {
session_start();
}// Logout the current user.
$logoutAction = $_SERVER['PHP_SELF']."?doLogout=true";
if ((isset($_SERVER['QUERY_STRING'])) && ($_SERVER['QUERY_STRING'] != "")){
$logoutAction .="&". htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_GET['doLogout'])) &&($_GET['doLogout']=="true")){
//to fully log out a visitor we need to clear the session varialbles
$_SESSION['MM_Username'] = NULL;
$_SESSION['MM_UserGroup'] = NULL;
$_SESSION['PrevUrl'] = NULL;
unset($_SESSION['MM_Username']);
unset($_SESSION['MM_UserGroup']);
unset($_SESSION['PrevUrl']);
$logoutGoTo = "fotos.php";
if ($logoutGoTo) {
header("Location: $logoutGoTo");
exit;
}
}
?>
<?phprequire_once('includes/common/KT_common.php');
?>
<?php// Make a transaction dispatcher instance
$tNGs = new tNG_dispatcher("");
// Make unified connection variable
$conn_galeria = new KT_connection($galeria, $database_galeria);
// Make a logout transaction instance
$logoutTransaction = new tNG_logoutTransaction($conn_galeria);
$tNGs->addTransaction($logoutTransaction);$logoutTransaction->registerTrigger("STARTER", "Trigger_Default_Starter", 1, "GET", "KT_logout_now");
$logoutTransaction->registerTrigger("END", "Trigger_Default_Redirect", 99, "login.php");// Execute all the registered transactions
$tNGs->executeTransactions();
// Get the transaction recordset
$rscustom = $tNGs->getRecordset("custom");
$row_rscustom = mysql_fetch_assoc($rscustom);
$totalRows_rscustom = mysql_num_rows($rscustom);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>GALERIA</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 30px;
width: 779px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<link href="includes/skins/mxkollection3.css" rel="stylesheet" type="text/css" media="all" />
<script src="includes/common/js/base.js" type="text/javascript"></script>
<script src="includes/common/js/utility.js" type="text/javascript"></script>
<script src="includes/skins/style.js" type="text/javascript"></script>
<style type="text/css">.style1 {
color: #FFFFFF;
font-weight: bold;
} </style>
</head>
<body>
<div>
<p>Galeria de Fotos: <?php echo $_SESSION['kt_legenda']; ?></p>
<p> <a href="<?php echo $logoutAction ?>">Sair</a></p>
<p>Exibir Galeria: <?php echo $_SESSION['id_evento']; ?></p>
<p> </p>
</div>
<table border="0" align="center">
<tr>
<?php?>
<td><div id="gallery">
<?php $pasta = $_SESSION['kt_login_id']; ?>
<?php $id_evento = $_GET['id_evento'];
echo $id;
?>
<?php
// lista arquivos do diretório e pega todas as extensões echo "<a href='$filename' target='_self'><img src='$filename' width=200 height=200 border 0></a> ";
}
?></div></td>
<?php
$row_rscustom = mysql_fetch_assoc($rscustom);
if (!isset($nested_rscustom)) {
$nested_rscustom= 1;
}
if (isset($row_rscustom) && is_array($row_rscustom) && $nested_rscustom++ % 2==0) {
echo "</tr><tr>";
}
} while ($row_rscustom); //end horizontal looper version 3
?>
</tr>
</table>
<p> </p>
</body>
</html>Uma forma meio "gambiarra" que me veio a cabeça é setar somente uma das dimensões... Por exemplo, como você fez lá em cima...
width='210' height='140'
Tira o heigth que ele vai ficar proporcional. Só não vão ficar todas iguais. Como eu disse é meio "gambiarra", não é a melhor forma...
Carlos Eduardo
Eu cheguei a fazer isso mas ficou muito ruim para as imagens que estão na vertical
A lógica que acho que tem que ser feita é ele pegar as imagens que já estão redimensionadas no diretório e redimensionar de novo para exibição, o problema maior é que não sei como implementar isso. Estou olhando novamente o código que você enviou o link pra ver se consigo adaptar algo.
Estou com uma outra dúvida, fiz essa galeria com efeito Lightbox e qd clico na imagem da galeria criada para ver ampliado, ele exibe assim: Image 1 of 45 pois ele sabe que dentro daquela pasta daquele evento tem 45 fotos. Gostaria que ele mostrasse em baixo de cada foto da galeria a numeração de cada uma, e se não for possível pelo menos o nome do arquivo. Mas não sei fazer isso, visto que essas imagens do Upload multiplo não são gravadas no banco de dados, o sistema só cria a numeração do id dentro da pasta fotos, ou seja, quando cadastro uma galeria, ele cria a subpasta (dentro da pasta fotos) o nº 5(nome da subpasta que é o incremento do id) por exemplo, e envia as fotos para dentro dela.
Como exibir essa informação?
voce deve guardar a informação de width e height no banco de cada imagem e chamar a imagem com cada informação relacionada a proporção da mesma e nao fixo como esta fazendo: <img src='$filename' width='210' height='140' border 0>
existe algum exemplo on-line da sua galeria?