Visualizar Imagens Com Efeito Lightbox

Na matéria de hoje, publicaremos um complemento para quem está usando o script que criei para a matéria Criando Thumb de imagens com o PHP, publicada anteriormente.

Como vimos na matéria anterior, recortar a imagem antes de publicá-la facilita tanto para o Internauta quanto para o Administrador!

Como fazemos em todas as nossas matérias, em anexo temos disponível os ficheiros para que tu possa estudar e testar a matéria que estaremos explicando a seguir.

Criando As Tabelas Na Base De Dados

Antes de partirmos para a programação, vamos criar uma tabelinha simples, só para rodarmos a solução que estamos a criar.

Para isso, pegue o conteúdo do ficheiro script-sql.txt (disponível em anexo) e cole seu conteúdo no Programa utilizado para gerenciamento da base de dados.

Em nossas matérias utilizamos como padrão o MySQLFront ou o PHPMyAdmin. Caso tu também esteja utilizando outra solução é só colar o conteúdo no SQL Editor (conforme código abaixo).


----- CRIA A TABELA DE IMAGENS -----

CREATE TABLE `tbl_imagens` (
  `id_imagem` int(11) NOT NULL auto_increment,
  `imagem_grd` varchar(150) NOT NULL default '',
  `imagem_thumb` varchar(150) NOT NULL default '',
  `status` varchar(10) NOT NULL default '',
  PRIMARY KEY  (`id_imagem`)
);

Após importar os dados, você poderá configurar o script de conexão à base de dados.

Configurando O Script De Conexão

Para efetuar a configuração devida, acesse o script “conexao.php” e siga o exemplo a seguir:


$database = "SERVIDOR"; // NOME DO SERVIDOR
$dbname   = "BASEDEDADOS"; // NOME DA BASE DE DADOS
$usuario  = "USUARIO"; // USUARIO DO MYSQL
$dbsenha  = "SENHA"; // SENHA DO USUARIO MYSQL

$conexao=mysql_connect ($database, $usuario, $dbsenha);

if($conexao){
      if (mysql_select_db($dbname, $conexao)){
           print "";
      }else{
           print "Não foi possível selecionar o Banco de Dados";
           }
      }else{
           print "Erro ao conectar o MySQL";
           }

Após efetuar essa configuração, vamos agora conhecer os scripts que trabalharemos?

Ficheiro upload.php

Como já explicamos o funcionamento deste ficheiro na matéria anterior, não vamos entrar em detalhes quanto a ele, apenas mostraremos onde fizemos as alterações, já que se trata de uma implementação.

Se você já está usando o ficheiro antigo, siga os procedimentos a seguir:

1 – Conectando a base de dados:

Agora que o ficheiro “conexao.php” está pronto, vamos chamá-lo no ficheiro “upload.php”.

Faça sua inclusão entre a linha 15 (abaixo de session_start), conforme o exemplo a seguir:



error_reporting (E_ALL ^ E_NOTICE);
session_start(); // Inicia a sessão

include('conexao.php');

Agora que ele está conectando à base de dados, precisaremos efetuar e por padrão já faz a inserção do conteúdo no diretório, você não terá muito o que fazer!

O trecho a seguir, deverá ser incluído entre as linhs 200 e 210 do ficheiro “upload.php” (conforme exemplo a seguir).


$large_image_location = $large_image_location.".".$file_ext;
$thumb_image_location = $thumb_image_location.".".$file_ext;
      
// pega a extensão do arquivo na sessão
$_SESSION['user_file_ext']=".".$file_ext;
      
$query = "INSERT INTO tbl_imagens (imagem_grd, imagem_thumb, status) VALUES('$large_image_location', '$thumb_image_location', 'Ativo')";
$query = mysql_query($query);

move_uploaded_file($userfile_tmp, $large_image_location);
chmod($large_image_location, 0777);

Veja que ele trás o nome do ficheiro grande ($large_image_location) e o nome do arquivo thumb ($thumb_image_location).

Abaixo do “$_SESSION” faça a inclusão do conteúdo, usando o comando “INSERT INTO”.

Prático, não?

Agora que a inclusão já está sendo efetuada, para que ele faça o redirecionamento à página inicial (“index.php”), entre as linhas 335 e 340 estaremos postando o direcionador (conforme o trecho a seguir):


echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Excluir Imagens</a></p>";
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload outra imagem</a></p>";
echo "<p><a href=\"index.php\">Voltar para a Página Inicial</a></p>";
// Limpa o time stamp da sessão e a extensão do arquivo
$_SESSION['random_key']= "";
$_SESSION['user_file_ext']= "";

Pronto! Apenas 3 trechos do código alterados.

Agora vamos ver como funciona a página principal?

Ficheiro index.php

Esse ficheiro é super prático e até para facilitar seus trabalhos, não vamos fazer muitas alterações!

Ele servirá mais para trazermos os ficheiros anteriormente inseridos e criarmos a visualização personalizada!

Para personalizar seu ficheiro, siga os procedimentos a seguir:

1 – Conexão ao BD:

Assim como o ficheiro “upload.php”, este ficheiro necessita conectar à base de dados.

Para isso, insira no início da página o comando “include”, conforme o exemplo a seguir:



include('conexao.php');

Feita a inclusão, vamos agora trazer o conteúdo em JavaScript que fará a visualização personalizada!

Ele trabalhará com os ficheiros a seguir:

  • builder.js;
  • effects.js;
  • lightbox.css;
  • lightbox.js;
  • prototype.js;
  • scriptaculous.js;
  • Diretório lightbox (dentro de imagens).

Caso você queira, poderá fazer alterações de cor, botões, e fundo!

Vamos verificar como chamamos esse conteúdo no ficheiro?


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Prático, não?

Agora vamos trazer o script que trará o conteúdo da base de dados (conforme trecho a seguir):


<?
$query = "SELECT * from tbl_imagens WHERE status = 'Ativo'";
$resultado = mysql_query($query);

while($campo = mysql_fetch_array($resultado)){

$imagem_thumb = $campo ['imagem_thumb']; // PEGA A IMAGEM PEQUENA
$imagem_grd   = $campo ['imagem_grd']; // PEGA A IMAGEM GRANDE

if($resultado){
?>
<A href="<?= $imagem_grd; ?>" rel="lightbox[roadtrip]" id="link_foto"><IMG src="<?= $imagem_thumb; ?>" border=0></A><br>

<?
}
}
?>

Você pode perguntar: Como farei para visualizar o evento em Ajax?

Basta apenas inserir “rel=’lightbox[roadtrip]‘” no link da imagem thumb (conforme apresentado no trecho acima).

Vamos verificar como funciona tudo isso na prática?

Como Funciona?

Prático, não?

Bem… esse ficheiro não é difícil de se trabalhar e creio que com as explicações acima você saberá como implementar seu web site com essa visualização personalizada.

Ficamos por aqui em mais uma matéria! Esperamos tê-lo ajudado em algo…

Envie-nos suas dúvidas e dê sugestões para as próximas matérias! Nosso compromisso é lhe ajudar!

Download do código usado neste tutorial: Efeito Lightbox Com PHP E Ajax

Be Sociable, Share!

3 Comentários

  1. Matheeusliima

    Quando importei o Arquivo SQL deu Erro

    ________________________________________________________
    #1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '—– CRIA A TABELA DE IMAGENS —– CREATE TABLE `tbl_imagens` ( `i' at line 1

    Ajudaa ae Gerall

  2. Edmilson Britto de Almeida

    Vou esperimentar e posto o resultado!

  3. aivanlins

    tem como deixar a imagem grande rotativa?

Participa! Comenta...