Exibição de Fotos Aleatórias

Fonte: iMaster | Tags: | Total de comentários (0) |desde 27/7/2009

Exibição de Fotos Aleatórias


Olá pessoal. Esta é a minha primeira matéria no iMasters e vou abordar uma técnica importante para manter o site interativo: exibição de fotos aleatórias com links para ampliação. Em nosso projeto, a cada vez que o usuário acessar a página, serão exibidas fotos diferentes, com os links para ampliação.

Trabalharemos com banco de dados Access para armazenar as fotos, como exercício.

Banco de Dados: sorteio.mdb

Tabela: fotos

Campos:

O primeiro passo seré criar o arquivo que exibirão as fotos em miniaturas. Quando clicarmos com o mouse, abrirá uma outra página com a mesma foto ampliada.

O arquivo será salvo com o nome de exibiçao.asp. Veja o código comentado:

<script language="javascript">
function foto01()
{
window.open("foto01.htm","","status=no, toolbar=no, scrollbar=no, menubar=no, width=494, height=367");
}
</script>

Será necessário criar este script para a mesma quantidade de fotos que conter o banco de dados.

Utilizando da linguagem javascript, criamos a função foto01, a qual recebe o comando window.open, responsável por abrir uma nova janela e exibir a foto ampliada, mas para isso será necessário criar um arquivo com extensão .htm para cada foto com tamanho maior.

O comando window.open possui alguns atributos. Por exemplo, onde está escrito "foto01.htm", é o nome do arquivo que contém a foto ampliada, e note que os atributos status, toolbar, scrollbar e menubar recebem valor "no", dizendo que nesta nova janela não haverá barras de rolagem, barra de status, etc. Será uma janela bem simples. As opções "width" e "height" informam o tamanho em pixels na posição horizontal e vertical da janela.

Desenvolvidos os scripts que chamam as fotos ampliadas para cada mini foto existente no banco de dados, segue o código para conexão com o banco e exibição das mini fotos no arquivo exibicao.asp:

<%
Dim strCon, objCon, objRS_updateString de conexão para o banco de dados.
strCon = "DBQ=C:\banco_de_dados\sorteio.mdb;Driver={Microsoft Access Driver (*.mdb)};" Cria conexão com o banco de dados
Set objCon = Server.CreateObject("ADODB.Connection")objCon.Open strCon 
strQ = "SELECT TOP 3 * FROM fotos ORDER BY controle_exibição ASC, id ASC"
Set objRS = objCon.Execute(strQ)If Not objRS.EOF Then
      If Int(objRS("controle_exibicao")) > 900000 Then
            strQ = "UPDATE produtos SET controle_exibicao = 0"
            Set objRS_update = objCon.Execute(strQ)      End If%> 
<table width="160" border="0" cellspacing="3" cellpadding = "5" style = "border: 1px solid #737373" bgcolor="#E1E6E6' class="texto">
<%strQ = "'While Not objRS.EOF
      strQ = strQ & " OR id=" & objRS("id")%>      <tr>
     <td bgcolor="FFFFFF"><%
<a href: <%Response.Write("link")%> target="_blank"> <%Response.Write  objRS("foto")%> </a><br>"
%>      </td>      </tr><%objRS.MoveNextWend%>
</table> <%
strQ = "UPDATE foto SET controle_exibicao = controle_exibicao + 1 WHERE id=0 " & strQ
Set objRS_update = objCon.Execute(strQ)End If objCon.Close%>

Através da opção TOP 3, informamos que serão capturados apenas 3 registros, podendo ser alterado para a quantidade que desejar.

Este exemplo mostra como exibir o número desejado de registros pela ordem de menor exibição, ou seja, quando exibimos os registros aumentamos o campo ordem_exibicao dos mesmos, fazendo com que da próxima vez que a página for exibida não seja exibidas as mesmas mini fotos.

Agora crie as mini fotos com no máximo 100 pixels de largura por 80 de altura. Salve dentro de um diretório denominado images.

Logo após, crie as mesmas fotos com tamanho maior. Aproximadamente 400 pixels de largura e altura proporcional. Salve-as dentro do mesmo diretório.

Agora vamos à criação dos arquivos que irão conter as fotos maiores, que iniciará com o nome foto01.htm:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>   <style type="text/css">
body{      margin-left:0px;      margin-right:0px;      margin-top:0px;
      margin-bottom:0px;}</style> </head> <body>
<img src="images/foto.png" width="350" height="200"></body>
</html>

Crie um arquivo para cada foto ampliada.

Indo para a fase final que é preencher o campo link do banco de dados sorteio.mdb para que sete a função foto01():

Bom pessoal, é isso. Depois de muito tempo pesquisando, estudando como fazer este trabalho, e realizando com sucesso, venho compartilhar dessa experiência com vocês. Qualquer dúvida é só entrar em contato comigo

  1. Nome: