SlideShow com ASP

wilnet · Março 30, 2011

Bom dia pessoal, todos bens?

Estou tentando fazer um SlideShow com ASP e ACCESS.

Já procurei na Net mas não encontrei um assim que seja dinamico.

Queria algo do tipo como exemplo a desse SITE aqui. OBS: Para ver o exemplo, clique em qualquer FOTO de imóvel. Vejo o exemplo do SLIDESHOW Clique em qualquer FOTO de imóvel e verá o exemplo desse SlideShow...

Alguém sabe como posso encontrar um assim?

Grato por qualquer ajuda dada.

andersonleme · Março 30, 2011

Isso é Jquery

entra no Jquery.com e procura por CODA slider

ai é só jogar o asp pra pegar do banco

ai parceiro o primeiro link é a teoria e o segundo o exemplo

http://jqueryfordesigners.com/coda-slider-effect/

http://jqueryfordesigners.com/demo/coda-slider.html

Espero ter te ajudado

=D

wilnet · Março 30, 2011

Olá andersonleme, obrigado mas não é o que estou buscando.

De uma verificada no link que eu passei, e clique em qualquer Foto do imóvel para entender o exemplo.

Grato

Vinicius Ianni · Março 30, 2011

Fiz um thumbnail parecido usando o wowslider, é um programa gratuito que gera o codigo e depois só tem que adaptar para sua necessidade.

Mas é feito em jquery, então precisará ter a biblioteca jquery também.

'Fiz o select no db
...

response.write "<div id='wowslider-container'>"
response.write "<div id='wowslider-images'>"
i=0
if not RS2.EOF then
do while not RS2.eof
response.write "<a href='detalhes.asp?id="&rs("id")&"'><img src='./img/"&rs("imgmini")&"' alt='"&rs("nome")&"' Title='"&rs("nome")&"' 'id='wows"&i&"'>"&rs("nome")&"</a>"
RS2.MoveNext
i=i+1
loop
end if
response.write "</div>"
response.write "<a id='vlb' href='#'></a>"
response.write "<div id='wowslider-shadow'></div>"
response.write "</div>"
response.write "<script type='text/javascript' src='engine/script.js'></script>"

Não se esqueça de chamar o jquery no <head>

wilnet · Março 30, 2011

Vinicius muito obrigado pela ajuda, mas não entendi muito bem, desculpe.

Veja, eu encontrei esse código que funciona legal, porém quando tento torna-lo dinamico, estou tendo dificuldades nisso.

Segue o code.

<!--#include file="./conecta_base_dados.asp"-->	
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
       <title>Slides</title>

       <script src="js/jquery-1.5.1.min.js" language="javascript"></script> 
       <script src="js/jquery.cycle.all.min.js" language="javascript"></script>

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

               <script type="text/javascript">
                       $(document).ready(function() {

                               $('#conteudo').cycle({
                                       timeout: 4000, //Tempo da transiçao
                                       speed:   400,  //Velocidade da transiçao
                                       fx:      'fade', //Tipo
                                       pager:   '#nav', //A div que vai aprensetar os números do slides
                                       prev:    '#anterior', //Link para voltar ao slide anterior
                                       next:    '#proxima' //Link para próximo slide
                               });
                       });
       </script>           

   </head>

   <body>

     <div class="slide">

     <div id="conteudo">


<div>

<%
Dim lista_imoveis, Vendas_id

set lista_imoveis= imoveisDB.Execute("select * from imoveis where cad_ok='S'")

while not lista_imoveis.EOF
Vendas_id = lista_imoveis("id")
%>				

<div class="conteudo_img">
<img src="fotos/imoveis<%=lista_imoveis("foto1")%>" width="250" height="187" border="0"/>
</div>


<%
lista_imoveis.MoveNext
wend
%>

</div>              

</div>

<div class="bloco_navegacao">

               <div id="anterior" class="navegacao"><a href="javascript:void(0)"><strong><</strong>Anterior</a></div> 

               <div id="nav" class="nav">

			</div>

               <div id="proxima" class="navegacao"><a href="javascript:void(0)">Próxima<strong>></strong></a></div> 

			</div>

</div>     

   </body>
</html>

Quero deixa-lo mostrando apenas uma foto, e ao ser clicado na navegação de ANTERIOR ou PRÓXIMA é que carrega a próxima foto, que está armazenada na Pasta Imóveis com o caminho extraido do Banco de Dados em ACCESS.

Grato amigos.

xanburzum · Março 30, 2011

é só você setar o caminho das imagens, olha este exemplo

wilnet · Março 30, 2011

xanburzum, isto já não está feito em meu exemplo???

E o link que passou, não vi nada de slideShow.

Grato.

wilnet · Abril 1, 2011

Olá Pessoal, desculpem mas ainda não estou conseguindo fazer esse script funcionar como eu gostaria.

Segue o código abaixo.

Está assim, se eu retirar toda a parte em ASP, ele funciona assim, Carrega apenas uma FOTO, e os Botões de Anterior | Próxima então quando clico em Próxima, é carregada uma outra FOTO.

No entanto, eu desejo torana esse Script dinamico, rodando com o ASP.

Mas com esse código que eu inseri, não funciona.

Alguém poderi me orientar somente NA PARTE DO ASP?

<!--#include file="./conecta_base_dados.asp"-->  
       <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
       <title>Slides</title> 

       <script src="js/jquery-1.5.1.min.js" language="javascript"></script>  
       <script src="js/jquery.cycle.all.min.js" language="javascript"></script> 

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

               <script type="text/javascript"> 
                       $(document).ready(function() { 

                               $('#conteudo').cycle({ 
                                       timeout: 4000, //Tempo da transiçao 
                                       speed:   400,  //Velocidade da transiçao 
                                       fx:      'fade', //Tipo 
                                       pager:   '#nav', //A div que vai aprensetar os números do slides 
                                       prev:    '#anterior', //Link para voltar ao slide anterior 
                                       next:    '#proxima' //Link para próximo slide 
                               }); 
                       }); 
       </script>            

   </head> 

   <body> 

     <div class="slide"> 

     <div id="conteudo"> 


<div> 

<% 
Dim lista_imoveis, Vendas_id 

set lista_imoveis= imoveisDB.Execute("select * from imoveis where cad_ok='S'") 

while not lista_imoveis.EOF 
Vendas_id = lista_imoveis("id") 
%>                               

<div class="conteudo_img"> 
<img src="fotos/imoveis<%=lista_imoveis("foto1")%>" width="250" height="187" border="0"/> 
</div> 


<% 
lista_imoveis.MoveNext 
wend 
%> 

</div>               

</div> 

<div class="bloco_navegacao"> 

               <div id="anterior" class="navegacao"><a href="javascript:void(0)"><strong><</strong>Anterior</a></div>  

               <div id="nav" class="nav"> 

                               </div> 

               <div id="proxima" class="navegacao"><a href="javascript:void(0)">Próxima<strong>></strong></a></div>  

                               </div> 

</div>      

   </body> 
</html>

Muito grato por qualquer ajuda.

Rodrigo Thiago · Abril 1, 2011

cara eu uso um que é assim:

pagina.asp

   <div id="slider">
     <%
'//////////////// BANNErsBanner \\\\\\\\\\\\\\\\\\\\
SQL = "SELECT * FROM slideshow WHERE ativar='Sim'"
set rsSlide=Server.CreateObject("ADODB.Recordset")
rsSlide.open SQL,Conexao
IF Not rsSlide.EOF THEN
While not rsSlide.EOF%>

  <!-- <a href="news.asp?ID=<%'=rsSlide("link")%>"><img src="images/<%'=rsSlide("imagem")%>" alt="" title="<%'=rsSlide("titulo")%>" /></a>-->
    <a href="home2.asp"><img src="images/<%=rsSlide("imagem")%>" alt=""  /></a>  

    <%
rsSlide.movenext
wend
End If
rsSlide.close
Set rsSlide=Nothing
         %>

</div>

   <script type="text/javascript">
$(window).load(function() {
   $('#slider').nivoSlider({
       effect:'random', //Specify sets like: 'fold,fade,sliceDown'
       slices:15,
       animSpeed:500, //Slide transition speed
       pauseTime:3000,
       startSlide:0, //Set starting Slide (0 index)
       directionNav:true, //Next & Prev
       directionNavHide:true, //Only show on hover
       controlNav:false, //1,2,3...
       controlNavThumbs:false, //Use thumbnails for Control Nav
       controlNavThumbsFromRel:false, //Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', //Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
       keyboardNav:true, //Use left & right arrows
       pauseOnHover:true, //Stop animation while hovering
       manualAdvance:false, //Force manual transitions
       captionOpacity:0.8, //Universal caption opacity
       beforeChange: function(){},
       afterChange: function(){},
       slideshowEnd: function(){}, //Triggers after all slides have been shown
       lastSlide: function(){}, //Triggers when last slide is shown
       afterLoad: function(){} //Triggers when slider has loaded
   });
});
</script>

Nao esquecer de colocar no <head></head> os links:

slider.css

/*


/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
   display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

e no jquery.slider.pack.js

/*
* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(B){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);

da um copiar e colar ae no codigo, siga o PASSO A PASSO e seja feliz.

flw

xanburzum · Abril 1, 2011

existe alguns exemplos no fórum pode te ajudar

Arquivado

SlideShow com ASP

Recommended Posts

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

andersonleme 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vinicius Ianni 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Thiago 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cruzamento de Bases

Consulta sem duplicação

Modelagem para questionário

Fóruns

Tempo Real

Informação importante