Ir para conteúdo

POWERED BY:

Arquivado

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

Samroa Machel Web Master

[Resolvido] Criando álbuns com várias fotos Galeria de fotos em P

Por , em PHP

Recommended Posts

Samroa Machel Web Master    0

Samroa Machel Web Master
Postado

Salve galera! Feliz Ano Novo pra todos!

 

Então, estou com esse código de uma galeria de fotos abiaxo, só que todas as fotos ficam soltas, fora do álbum, elas ficam minsturadas. Preciso saber quais códigos devo usar pra organizar as fotos tipo, 10 fotos do álbum 1, 10 fotos do álbum 2...

 

Por favor, como posso fazer isso e qual código devo usar pra isso?

 

Desde já agradeço a todos!

 

<!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>Galeria Simples usando PHP</title>


<!--
###################################
##			Estilos              ##
###################################
-->
<style>
body {
text-align:center;
margin:0;
padding:0;
}
div {
padding:13px;
display:block;
border:1px solid #ddd;
background:#eee;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:#999;
margin:0 auto;
}
div.thumb {
float:left;
margin:0 14px 14px 0;
padding:0;
}
div.thumb a {
float:left;
padding:13px;
}
div.thumb a:hover {
background:#b70000;
}
div.thumb img {
width:100px;
height:100px;
}
div p {
padding:8px 0 0px;
margin:0;
}
div a {
color:#666;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
}
div a:hover {
color:#b70000;
text-decoration:underline
}
</style>
</head>
<body>


<!--
#################################
##			Lógica             ##
#################################
-->
<?php

//URL onde o arquivo PHP vai ficar
$url_galeria = "http://www.toprated.com.br/galeria.php";

//URL onde o arquivo PHP vai ficar
$pasta_fotos = "fotos_galeria";

//Início da função

$fotos = array();

//Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) {	

		$fotos[] = $image;

}

//Verifica se deve exibir a lista ou uma foto
if ($_GET["image"] == "") {

	//Faz o loop pelo folder de imagens
	for($i=0; $i < count($fotos); $i++) {	

		//Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
		echo "<div class='thumb'>";
		echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
		echo "<img src='" . $fotos[$i] . "'>";
		echo "</a>";
		echo "</div>";

	}

} else {

		//Guarda o nome da imagem para montar o link da imagem grande
		$foto_g = explode("_p", $fotos[$_GET["image"]]);

		//Configura os links de próxima e anterior
		if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
		if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }

		//Quando solicitada uma imagem em particular, monta a <div> e insere a imagem grande de acordo com o link
		echo "<div>";
		echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
		echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
		echo "</a>";
		echo "<p><a href='" . $url_galeria . "?image=" . $anterior . "'>Foto anterior</a> | <a href='" . $url_galeria . "'>Voltar para a galeria</a> | <a href='" . $url_galeria . "?image=" . $proxima . "'>Próxima foto</a></p>";
		echo "</div>";

}

?>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Célio A.    4

Célio A.
Postado

cara, não seria mais facil criar as galerias por album e uma pagina principal com uma foto para acessar as galerias?

 

você pode criar uma pagina principal lincando para galerias. Ja para galeria você pode usar codigos prontos tipo lightbox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samroa Machel Web Master    0

Samroa Machel Web Master
Postado

cara, não seria mais facil criar as galerias por album e uma pagina principal com uma foto para acessar as galerias?

 

você pode criar uma pagina principal lincando para galerias. Ja para galeria você pode usar codigos prontos tipo lightbox.

 

por favor, como ficaria o código? esse código na página inicial da galeria e das outras dos álbuns?

 

Grato!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Célio A.    4

Célio A.
Postado

Amigo, se quer fazer dinamicamente vai ter que matar alguns neuronios, agora se quiser usar o jquery-lightbox, ele já vem com uma pasta com os arquivos js tudo certo.

 

Da pra configurar efeitos bacanas, e se você conhecer um pouco de css pode deixar a sua cara.

 

Dai da pra fazer o seguinte, cria uma galeria da pagina principal mas ao inves de por o link para abrir uma foro coloca o linque para a pagina com as fotos deste ambum

 

veja uma pagina completa:

 

galeria1.html

<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- 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: 10px;
	width: 520px;
}
#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>
</head>

<body>
<h1>Lightbox Plugin</h1>
<div id="gallery">
  <ul>
     <li><a href="1.jpg"><img src="img/01.jpg" height="184" width="122"></a></li>
     <li><a href="2.jpg"><img src="img/02.jpg" height="184" width="122"></a></li>
     <li><a href="3.jpg"><img src="img/03.jpg" height="184" width="122"></a></li>
     <li><a href="4.jpg"><img src="img/04.jpg" height="184" width="122"></a></li>
     <li><a href="5.jpg"><img src="img/05.jpg" height="184" width="122"></a></li>
     <li><a href="6.jpg"><img src="img/06.jpg" height="184" width="122"></a></li>
  </ul>
</div>
</body>
</html>

 

Esta é a pagina com a galeria, digamos que você tenha 3 modelos e cada uma delas tera uma galeria, então você cria uma pagina para cada uma e na pagina inicial você cria uma galeria com uma foto de cada modelo e quando clicar em cima da foto você é direcionado para galeria da modelo,

 

<div id="gallery">
  <ul>
     <li><a href="galeria1.html"><img src="modelo/01.jpg" height="184" width="122"></a></li>
     <li><a href="galeria2.html><img src="modelo/02.jpg" height="184" width="122"></a></li>
     <li><a href=galeria3.html><img src="modelo/03.jpg" height="184" width="122"></a></li>
  </ul>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alessandro8938    0

Alessandro8938
Postado

Célio , boa tarde, utilizei essa galeria que você postou e ficou show...

 

mas tenho uma dúvida... como faço pra qdo clicar na foto dentro já da galeria... ela abrir em tamanho maior...

 

Muito grato... Obrigado !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Célio A.    4

Célio A.
Postado

você modificou o css padrão que vem com o lightbox? normalmente ele abre o tamanho real da foto, você verificou o tamanho real da foto?

Compartilhar este post

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

Informação importante

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

  Aceito