Ir para conteúdo
Fórum Script Brasil
  • 0

Adaptar Slide

Cristiano123

Perguntado por Cristiano123,

 Share

Pergunta

Cristiano123

Cristiano123

Postado
Postado

Olá amigos...

tenho uma rotina que consegui na net e estou tentando adaptar para que a rotina leia dentro de um banco e exiba a imagen e titulo e os numeros 1,2,3,4,5. O slide funciona mas quando adpto no banco não dá....

não estou conseguindo adaptar porque esta buscando dentro de um javascript e preciso buscar num banco de dados asp.

Ve funcionando (sem o banco) no link: http://dreamcss.blogspot.com/2009/04/creat...ry-sliders.html

alguém dá um maozinha? Valeu...

Segue a rotina principal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>jquery sliders</title>

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

<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>

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

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

</head>

<body>

<!--/top-->

<div id="header"><div class="wrap">

<div id="slide-holder">

<div id="slide-runner"> <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>

<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>

<div id="slide-controls">

<p id="slide-client" class="text"><strong>post: </strong><span></span></p>

<p id="slide-desc" class="text"></p>

<p id="slide-nav"></p>

</div>

</div>

<!--content featured gallery here -->

</div>

<script type="text/javascript">

if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];

</script>

</div></div><!--/header-->

</body>

</html>

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Rodrigo_Linhas

Rodrigo_Linhas

Postado
Postado

Olha eu adaptei esse script pra vc, ta tudo mastigado rsrsrs é só baixar e enviar pro server meu amigo!

Download

Segue o código abaixo:

<%
    
    'cnpath="DBQ=" & Server.MapPath("Imagens.mdb") 
    cnpath="DBQ=" & Server.MapPath("\slide\Imagens.mdb")
    DataSource = "Driver={Microsoft Access Driver (*.mdb)}; " & cnpath 

    Set Conn = Server.CreateObject("ADODB.Connection") 

    Conn.Open DataSource

    'Abre o Recordset
    Set rs = Server.CreateObject( "ADODB.Recordset" )
    rs.ActiveConnection = conn
    rs.open "SELECT *  FROM Imagens order by id desc"
    

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>jquery sliders</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
 </head>
 <body>

    <!--/top-->
    
    <div id="header"><div class="wrap">
    <div id="slide-holder">
    <div id="slide-runner">
    
    <% 
    if not rs.eof then  
    while not rs.eof 
    %>
    
    <a href="<%=rs("link")%>"><img id="slide-img-<%=rs("id")%>" src="<%=rs("imagem")%>" class="slide" alt="" /></a>
     
     <%
    rs.Movenext
    wend
    end if
    %>
    
    <div id="slide-controls">
     <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
     <p id="slide-desc" class="text"></p>
     <p id="slide-nav"></p>
    </div>
    </div>
    
    <!--content featured gallery here -->
   </div>
      <script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Coloque o titulo da 1º imagem aqui","desc":"e o subtitulo da 1º imagem aqui"},{"id":"slide-img-2","client":"Coloque o titulo da 2º imagem aqui","desc":"e o subtitulo da 2º imagem aqui"},{"id":"slide-img-3","client":"Coloque o titulo da 3º imagem aqui","desc":"e o subtitulo da 3º imagem aqui"},{"id":"slide-img-4","client":"Coloque o titulo da 4º imagem aqui","desc":"e o subtitulo da 4º imagem aqui"},{"id":"slide-img-5","client":"Coloque o titulo da 5º imagem aqui","desc":"e o subtitulo da 5º imagem aqui"},{"id":"slide-img-6","client":"Coloque o titulo da 6º imagem aqui","desc":"e o subtitulo da 6º imagem aqui"},{"id":"slide-img-7","client":"Coloque o titulo da 7º imagem aqui","desc":"e o subtitulo da 7º imagem aqui"}];
    </script>
  </div></div><!--/header-->
 </body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
Cristiano123

Cristiano123

Postado
  • Autor
Postado

ok.... équase isto....

O titulo da noticia deveria vir de dentro do banco de dados... onde você colocou coloque o1º titulo aui... (dentro do javascript). Deveria era buscar no próprio banco de dados... tem jeito?

Olha eu adaptei esse script pra vc, ta tudo mastigado rsrsrs é só baixar e enviar pro server meu amigo!

Download

Segue o código abaixo:

<%
    
    'cnpath="DBQ=" & Server.MapPath("Imagens.mdb") 
    cnpath="DBQ=" & Server.MapPath("\slide\Imagens.mdb")
    DataSource = "Driver={Microsoft Access Driver (*.mdb)}; " & cnpath 

    Set Conn = Server.CreateObject("ADODB.Connection") 

    Conn.Open DataSource

    'Abre o Recordset
    Set rs = Server.CreateObject( "ADODB.Recordset" )
    rs.ActiveConnection = conn
    rs.open "SELECT *  FROM Imagens order by id desc"
    

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>jquery sliders</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  &lt;script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
  &lt;script type="text/javascript" src="js/jquery.js"></script>
  &lt;script type="text/javascript" src="js/scripts.js"></script>
 </head>
 <body>

    <!--/top-->
    
    <div id="header"><div class="wrap">
    <div id="slide-holder">
    <div id="slide-runner">
    
    <% 
    if not rs.eof then  
    while not rs.eof 
    %>
    
    <a href="<%=rs("link")%>"><img id="slide-img-<%=rs("id")%>" src="<%=rs("imagem")%>" class="slide" alt="" /></a>
     
     <%
    rs.Movenext
    wend
    end if
    %>
    
    <div id="slide-controls">
     <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
     <p id="slide-desc" class="text"></p>
     <p id="slide-nav"></p>
    </div>
    </div>
    
    <!--content featured gallery here -->
   </div>
      &lt;script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Coloque o titulo da 1º imagem aqui","desc":"e o subtitulo da 1º imagem aqui"},{"id":"slide-img-2","client":"Coloque o titulo da 2º imagem aqui","desc":"e o subtitulo da 2º imagem aqui"},{"id":"slide-img-3","client":"Coloque o titulo da 3º imagem aqui","desc":"e o subtitulo da 3º imagem aqui"},{"id":"slide-img-4","client":"Coloque o titulo da 4º imagem aqui","desc":"e o subtitulo da 4º imagem aqui"},{"id":"slide-img-5","client":"Coloque o titulo da 5º imagem aqui","desc":"e o subtitulo da 5º imagem aqui"},{"id":"slide-img-6","client":"Coloque o titulo da 6º imagem aqui","desc":"e o subtitulo da 6º imagem aqui"},{"id":"slide-img-7","client":"Coloque o titulo da 7º imagem aqui","desc":"e o subtitulo da 7º imagem aqui"}];
    </script>
  </div></div><!--/header-->
 </body>
</html>
De repente m ajuda ao seguinte... Criar uma camada transparente emcima da foto chmando o titulo do banco de dados
ok.... équase isto.... O titulo da noticia deveria vir de dentro do banco de dados... onde você colocou coloque o1º titulo aui... (dentro do javascript). Deveria era buscar no próprio banco de dados... tem jeito?
Olha eu adaptei esse script pra vc, ta tudo mastigado rsrsrs é só baixar e enviar pro server meu amigo! Download Segue o código abaixo: 
<%
    
    'cnpath="DBQ=" & Server.MapPath("Imagens.mdb") 
    cnpath="DBQ=" & Server.MapPath("\slide\Imagens.mdb")
    DataSource = "Driver={Microsoft Access Driver (*.mdb)}; " & cnpath 

    Set Conn = Server.CreateObject("ADODB.Connection") 

    Conn.Open DataSource

    'Abre o Recordset
    Set rs = Server.CreateObject( "ADODB.Recordset" )
    rs.ActiveConnection = conn
    rs.open "SELECT *  FROM Imagens order by id desc"
    

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>jquery sliders</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  &lt;script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
  &lt;script type="text/javascript" src="js/jquery.js"></script>
  &lt;script type="text/javascript" src="js/scripts.js"></script>
 </head>
 <body>

    <!--/top-->
    
    <div id="header"><div class="wrap">
    <div id="slide-holder">
    <div id="slide-runner">
    
    <% 
    if not rs.eof then  
    while not rs.eof 
    %>
    
    <a href="<%=rs("link")%>"><img id="slide-img-<%=rs("id")%>" src="<%=rs("imagem")%>" class="slide" alt="" /></a>
     
     <%
    rs.Movenext
    wend
    end if
    %>
    
    <div id="slide-controls">
     <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
     <p id="slide-desc" class="text"></p>
     <p id="slide-nav"></p>
    </div>
    </div>
    
    <!--content featured gallery here -->
   </div>
      &lt;script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Coloque o titulo da 1º imagem aqui","desc":"e o subtitulo da 1º imagem aqui"},{"id":"slide-img-2","client":"Coloque o titulo da 2º imagem aqui","desc":"e o subtitulo da 2º imagem aqui"},{"id":"slide-img-3","client":"Coloque o titulo da 3º imagem aqui","desc":"e o subtitulo da 3º imagem aqui"},{"id":"slide-img-4","client":"Coloque o titulo da 4º imagem aqui","desc":"e o subtitulo da 4º imagem aqui"},{"id":"slide-img-5","client":"Coloque o titulo da 5º imagem aqui","desc":"e o subtitulo da 5º imagem aqui"},{"id":"slide-img-6","client":"Coloque o titulo da 6º imagem aqui","desc":"e o subtitulo da 6º imagem aqui"},{"id":"slide-img-7","client":"Coloque o titulo da 7º imagem aqui","desc":"e o subtitulo da 7º imagem aqui"}];
    </script>
  </div></div><!--/header-->
 </body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
Rodrigo_Linhas

Rodrigo_Linhas

Postado
Postado

Ok amigo esta aqui o que você precisava!

Tem opção de administração ok, e coloquei também o titulo e subtitulo pra puxar do banco de dados!

Bom da pra quebrar o galho! rsrsrsrs

DOWNLOAD

Vou mostrar o que eu fiz nos detalhes:

Bando de dados: imagens.mbd

TABELA: Imagens

id

titulo

subtitulo

imagem

link

Agora a página que puxa os dados do banco de dados - Index.asp

<%
    
    'cnpath="DBQ=" & Server.MapPath("Imagens.mdb") 
    DataSource = "Driver={Microsoft Access Driver (*.mdb)}; " & cnpath 

    Set Conn = Server.CreateObject("ADODB.Connection") 

    Conn.Open DataSource

    'Abre o Recordset
    Set rs = Server.CreateObject( "ADODB.Recordset" )
    rs.ActiveConnection = conn
    rs.open "SELECT *  FROM Imagens order by id ASC"
    

%>
<link type="text/css" rel="stylesheet" href="style.css" />

&lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
&lt;script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
&lt;script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
&lt;script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>

&lt;script type="text/javascript"> 
    $(document).ready(function(){
        $('#photos').galleryView({
            panel_width: 500,
            panel_height: 230,
            frame_width: 40,
            frame_height: 40
        });
    });
    </script>
    <!-- InstanceEndEditable -->
    </head>

    <body>
    <div id="photos" class="galleryview">
  
      <% 
    if not rs.eof then  
    while not rs.eof 
    %>
  
      <div class="panel">
    <img src="<%=rs("imagem")%>" /> 
    <div class="panel-overlay">
    <h2 align="left"><%=rs("titulo")%></h2>
    <p align="left"><%=rs("subtitulo")%></p>
    </div>
    </div>
      <%
    rs.Movenext
    wend
    end if
    %>
  <ul class="filmstrip">
    <li><img src="imagens/1.jpg" width="40" height="40" /></li>
    <li><img src="imagens/2.jpg" width="40" height="40" /></li>
    <li><img src="imagens/3.jpg" width="40" height="40" /></li>
    <li><img src="imagens/4.jpg" width="40" height="40" /></li>
    <li><img src="imagens/5.jpg" width="40" height="40" /></li>
    <li><img src="imagens/6.jpg" width="40" height="40" /></li>
    <li><img src="imagens/7.jpg" width="40" height="40" /></li>
  </ul>
</div>
</body>
<!-- InstanceEnd --></html>

Espero que tenham gostado!!!

Abraços

Link para o comentário
Compartilhar em outros sites
  • 0
Cristiano123

Cristiano123

Postado
  • Autor
Postado

Funcionou agora. Porque que ao passar de uma noticia para a outra dá tipo um efeito (que não é bom) de sobrepor o titulo da outra noticia.?

Tipo na transição de uma noticia para outra....

Ok amigo esta aqui o que você precisava!

Tem opção de administração ok, e coloquei também o titulo e subtitulo pra puxar do banco de dados!

Bom da pra quebrar o galho! rsrsrsrs

DOWNLOAD

Vou mostrar o que eu fiz nos detalhes:

Bando de dados: imagens.mbd

TABELA: Imagens

id

titulo

subtitulo

imagem

link

Agora a página que puxa os dados do banco de dados - Index.asp

<%
    
    'cnpath="DBQ=" & Server.MapPath("Imagens.mdb") 
    DataSource = "Driver={Microsoft Access Driver (*.mdb)}; " & cnpath 

    Set Conn = Server.CreateObject("ADODB.Connection") 

    Conn.Open DataSource

    'Abre o Recordset
    Set rs = Server.CreateObject( "ADODB.Recordset" )
    rs.ActiveConnection = conn
    rs.open "SELECT *  FROM Imagens order by id ASC"
    

%>
<link type="text/css" rel="stylesheet" href="style.css" />

&lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
&lt;script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
&lt;script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
&lt;script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>

&lt;script type="text/javascript"> 
    $(document).ready(function(){
        $('#photos').galleryView({
            panel_width: 500,
            panel_height: 230,
            frame_width: 40,
            frame_height: 40
        });
    });
    </script>
    <!-- InstanceEndEditable -->
    </head>

    <body>
    <div id="photos" class="galleryview">
  
      <% 
    if not rs.eof then  
    while not rs.eof 
    %>
  
      <div class="panel">
    <img src="<%=rs("imagem")%>" /> 
    <div class="panel-overlay">
    <h2 align="left"><%=rs("titulo")%></h2>
    <p align="left"><%=rs("subtitulo")%></p>
    </div>
    </div>
      <%
    rs.Movenext
    wend
    end if
    %>
  <ul class="filmstrip">
    <li><img src="imagens/1.jpg" width="40" height="40" /></li>
    <li><img src="imagens/2.jpg" width="40" height="40" /></li>
    <li><img src="imagens/3.jpg" width="40" height="40" /></li>
    <li><img src="imagens/4.jpg" width="40" height="40" /></li>
    <li><img src="imagens/5.jpg" width="40" height="40" /></li>
    <li><img src="imagens/6.jpg" width="40" height="40" /></li>
    <li><img src="imagens/7.jpg" width="40" height="40" /></li>
  </ul>
</div>
</body>
<!-- InstanceEnd --></html>

Espero que tenham gostado!!!

Abraços

Link para o comentário
Compartilhar em outros sites
  • 0
Rodrigo_Linhas

Rodrigo_Linhas

Postado
Postado

Então amigo esse script que eu adaptei ele da o efeito de fade nas noticias, e o efeito esta dentro dos arquivos (JS).

Ai pra tirar esse efeito teria que estudar esse escript todo, mas acho que esse que eu te mandei da pra quebrar um galho em, se por acaso

você quiser ai posta num tópico de (JS) que alguém que manja altera pra você.

Abraços.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...