Dicas e Tutoriais de WebDesign .: Exibição de Fotos Aleatórias

Exibição de Fotos Aleatórias

Posted by Rafael | | Category: HTML |

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_update
String 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">
<%

<%Response.Write("link")%> target="_blank"> <%Response.Write  objRS("foto")%> a><br>"

%>

      td>

      tr>
<%

objRS.MoveNext
Wend

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