Paginando Fotos

#1 Elton2203

Novato no fórum

Usuários
20 posts

Sexo:Masculino
Localidade:Espirito Santo

Posted 10/02/2010, 07:36

Bom Dia galera, consegui esse tutorial de como paginar fotos e ele está funcionando direitinho, porém as fotos estão ficando enfileiradas uma embaixo da outra e eu as keria uma ao lado da outra, passando para a linha de baixo somente qdo terminar o corpo da minha div, estou enviando para a galera q está a procura de uma q funcione e para os amigos programadores gostaria de uma dica de como colocar uma foto do lado da outra.

segue o código...

<%
    'Abrindo a Conexão com o Banco
    Dim caminho, conexao 

    caminho = Server.MapPath("Dados/eltonassuncao.mdb")
    Set conexao = Server.CreateObject("ADODB.Connection")
    conexao.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&caminho&";"

    'Selecionando todos os Produtos da Tabela
    Set rsBuscaProdutos = Server.CreateObject("ADODB.Recordset")
    strBuscaProdutos = "SELECT * FROM TB_PORTFOTOS ORDER BY ID_FOTO"
    rsBuscaProdutos.open strBuscaProdutos, conexao, 3, 3

    'Definindo o Numero de Paginas com a propriedade "PageSize" do objeto Recordset
    rsBuscaProdutos.PageSize = 10

    'Criamos as Validações
    If rsBuscaProdutos.eof Then
        Mensagem = "Nenhum Registro Encontrado"
        Response.End 
    Else
        'Definimos em qual pagina o visitante está
        If Request.QueryString("pagina")="" Then
            intpagina = 1
        Else

            If CInt(Request.QueryString("pagina"))<1 then
                intpagina = 1
            Else

                If CInt(Request.QueryString("pagina"))>rsBuscaProdutos.PageCount Then
                    intpagina = rsBuscaProdutos.PageCount
                Else
                    intpagina = Request.QueryString("pagina")
                End If

            End If 

        End If 

    End If
%>
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Tutorial de Paginação</title>

        <script src="lightbox/js/prototype.js" type="text/javascript"></script>
        <script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="lightbox/js/lightbox.js" type="text/javascript"></script>

        <link href="css/estilo.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

    </head>

    <body>
<%
        'Iniciamos o Loop
        rsBuscaProdutos.AbsolutePage = intpagina 
        intrec = 0
        While intrec<rsBuscaProdutos.PageSize And Not rsBuscaProdutos.eof 
%>
            <div id="corpo">
                <a href="imgPortFotos/<%=rsBuscaProdutos("ARQUIVO")%>" rel="lightbox[roadtrip]">
                    <img src="imgPortFotos/<%=rsBuscaProdutos("ARQUIVO")%>"width="70" height="70" border="0" />
                </a>
            </div>
<%
            rsBuscaProdutos.MoveNext
            intrec = intrec + 1

            If rsBuscaProdutos.eof Then
                response.write " " 
            End If

        Wend 

        'Criamos as Validações para a navegação "Anterior" e "Próximo" 
        If intpagina>1 Then
%> 
            <a href="paginacao.asp?pagina=<%=intpagina-1%>">Anterior</a> 
<% 
        End If
        If StrComp(intpagina,rsBuscaProdutos.PageCount)<>0 Then
%>
            <a href="paginacao.asp?pagina=<%=intpagina + 1%>">Próximo</a> 
<%
        End If
        rsBuscaProdutos.close
        Set rsBuscaProdutos = Nothing
%>
    </body>

</html>

Edição feita por: Renan L. Queiroz, 10/02/2010, 08:54.
Inclusão da tag [ code ] para postagem de scripts e identação do script para melhor entendimento

#2 Renan L. Queiroz

Mestre

Usuários
690 posts

Sexo:Masculino
Localidade:Brasilia - DF

Posted 10/02/2010, 09:12

Colega faça um teste com este script atualizado para ver se está ok, por conta da identação!
Enquanto isso vou estar analisando o mesmo para lhe ajudar! ;-)

---

Estava olhando aqui, mas a princípio acredito que o problema seja relacionado à CSS.
Acredito que seja algo como colocar um "float:left" para a div que contem as imagens
e quando der o limite fazer a quebra incluindo o "clear: both;" para a próxima.

Vou continuar fazendo alguns teste, jajá respondo!

---

Olha como ficaria o esquema do css no teste que fiz:

...
        <script src="lightbox/js/lightbox.js" type="text/javascript"></script>

        <link href="css/estilo.css" rel="stylesheet" type="text/css" />
        <link href="lightbox/css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css">
            #corpo{
                float: left;
                width: 72px;
                border: solid 1px red;
            }
        </style>

    </head>

    <body>
...

Inclui um estilo para a div que contem as imagens

Ai para colocar um limite para a quantidade de fotos por linha, inclua uma div (pai)
com uma largura definida:

...
        <link href="css/estilo.css" rel="stylesheet" type="text/css" />
        <link href="lightbox/css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css">
            #campoImagens{
                width: 1024px;
            }
            #corpo{
                float: left;
                width: 72px;
            }
        </style>

    </head>

    <body>

        <div id="campoImagens">
<%
            'Iniciamos o Loop
            rsBuscaProdutos.AbsolutePage = intpagina 
            intrec = 0
            While intrec < 60 'rsBuscaProdutos.PageSize And Not rsBuscaProdutos.eof 
%>
                <div id="corpo">
                    <a href="imgPortFotos/teste.jpg<%'=rsBuscaProdutos("ARQUIVO")%>" rel="lightbox[roadtrip]">
                        <img src="imgPortFotos/teste.jpg<%'=rsBuscaProdutos("ARQUIVO")%>" width="70" height="70" border="0" />
                    </a>
                </div>
<%
                rsBuscaProdutos.MoveNext
                intrec = intrec + 1

                If rsBuscaProdutos.eof Then
                    response.write " " 
                End If

            Wend 
%>
        </div>
<%
        'Criamos as Validações para a navegação "Anterior" e "Próximo" 
        If intpagina > 1 Then
...

Edição feita por: Renan L. Queiroz, 10/02/2010, 10:36.

Elton2203 likes this

Especialidade: Desenvolvimento e Banco de Dados.

Este post lhe ajudou? Agradeça: Posted Image

#3 Elton2203

Novato no fórum

Usuários
20 posts

Sexo:Masculino
Localidade:Espirito Santo

Posted 10/02/2010, 17:22

Fala Renan blza...
cara eu tinha feito varios testes em css mas não dava certo, mas o problema é q eu não usava a função certa... vc foi certeiro... só fiz uma pekena alteração e ficou perfeita agora...

#campoImagens{                
    width: 420px;            
}            

#corpo{                
    float: left;                
    width: 80px;
    height:80px;
}

Valew pela ajuda...

Edição feita por: Renan L. Queiroz, 11/02/2010, 08:22.
Inclusão da tag [ code ] para postagem de scripts

#1 Elton2203

#2 Renan L. Queiroz

#3 Elton2203

1 user(s) are reading this topic

Entrar