[Ajuda] Como Fazer um Script de Notícias em Slide

[Panetto. 0]

Galera, o problema é o seguinte,

to tentando criar uma web radio,

mais não tem muito oque colocar,

ai me veio a ideia, colocar um slide

de noticias, daí comecei a procurar...

achei um TUTORIAL muito bom, mais

o upload no 4Shared já havia expirado,

por isso pessoa ajuda, Poste um link

com tutorial ( FUNCIONAL ) .. Vlw .

:o

[_ADIGA_ 3]

Bem amigo, depende do Slide que você quer

existem 3 tipos priscipais de Slides para Sites em codigo

 

Slide-bar - ( este passa a cada 3 seg- com a transição que você quiser Ex: Fade )

Slide Deck ( slide com avanços de flash mais que está compativel com joomla etc )

Slide Flash ( este e o mais usado OBS : porém para acresentar em seu site você temque criar uma div compativel para que possa usar codigo em Flash ,

ex sua pagina toda esta em HTML - você não podera acrsentar uma slide flash - sem ter o uPs de comando , mais isso você pode acrsentar no Dreawever se você estiver usando )

 

bom basta agora você ver qual o tipo que você usa HTML , CSS, PHP - para ver a compatibilidade !

 

aqui vai um slide em codigo compativel com todos os tipos de linguagem :

 

Este código deve ser insirido na página que vai o slide, o slide é em FADE (as imagens mudam, vai ficando transparente)

 

<script type="text/javascript">

 

 

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["cg_1.jpg", "", ""] //plain image syntax

fadeimages[1]=["cg_2.jpg", "", ""] //image with link and target syntax

fadeimages[2]=["cg_3.jpg", "", ""] //image with link and target syntax

fadeimages[3]=["cg_4.jpg", "", ""] //image with link syntax

fadeimages[4]=["cg_5.jpg", "", ""] //image with link syntax

fadeimages[5]=["cg_6.jpg", "", ""] //image with link syntax

fadeimages[6]=["cg_7.jpg", "", ""] //image with link syntax

fadeimages[7]=["cg_8.jpg", "", ""] //image with link syntax

 

var fadebgcolor=""

 

////NO need to edit beyond here/////////////

 

var fadearray=new Array() //array to cache fadeshow instances

var fadeclear=new Array() //array to cache corresponding clearinterval pointers

 

var dom=(document.getElementById) //modern dom browsers

var iebrowser=document.all

 

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){

this.pausecheck=pause

this.mouseovercheck=0

this.delay=delay

this.degree=10 //initial opacity degree (10%)

this.curimageindex=0

this.nextimageindex=1

fadearray[fadearray.length]=this

this.slideshowid=fadearray.length-1

this.canvasbase="canvas"+this.slidesho…

this.curcanvas=this.canvasbase+"_0"

if (typeof displayorder!="undefined")

theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)

this.theimages=theimages

this.imageborder=parseInt(borderwidth)

this.postimages=new Array() //preload images

for (p=0;p<theimages.length;p++){

this.postimages[p]=new Image()

this.postimages[p].src=theimages[p][0]

}

 

var fadewidth=fadewidth+this.imageborder*2

var fadeheight=fadeheight+this.imageborder*2

 

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewid… id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewid… id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewid…

else

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>'…

 

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox

this.startit()

else{

this.curimageindex++

setInterval("fadearray["+this.slidesho… this.delay)

}

}

 

function fadepic(obj){

if (obj.degree<100){

obj.degree+=10

if (obj.tempobj.filters&&obj.tempobj.filter…

if (typeof obj.tempobj.filters[0].opacity=="number"… //if IE6+

obj.tempobj.filters[0].opacity=obj.deg…

else //else if IE5.5-

obj.tempobj.style.filter="alpha(opacit…

}

else if (obj.tempobj.style.MozOpacity)

obj.tempobj.style.MozOpacity=obj.degre…

else if (obj.tempobj.style.KhtmlOpacity)

obj.tempobj.style.KhtmlOpacity=obj.deg…

else if (obj.tempobj.style.opacity&&!obj.tempobj…

obj.tempobj.style.opacity=obj.degree/1…

}

else{

clearInterval(fadeclear[obj.slideshowi…

obj.nextcanvas=(obj.curcanvas==obj.can… obj.canvasbase+"_0" : obj.canvasbase+"_1"

obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)

obj.populateslide(obj.tempobj, obj.nextimageindex)

obj.nextimageindex=(obj.nextimageindex… obj.nextimageindex+1 : 0

setTimeout("fadearray["+obj.slideshowi… obj.delay)

}

}

 

fadeshow.prototype.populateslide=funct… picindex){

var slideHTML=""

if (this.theimages[picindex][1]!="") //if associated link exists for image

slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'"…

slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'

if (this.theimages[picindex][1]!="") //if associated link exists for image

slideHTML+='</a>'

picobj.innerHTML=slideHTML

}

 

 

fadeshow.prototype.rotateimage=functio…

if (this.pausecheck==1) //if pause onMouseover enabled, cache object

var cacheobj=this

if (this.mouseovercheck==1)

setTimeout(function(){cacheobj.rotatei… 100)

else if (iebrowser&&dom||dom){

this.resetit()

var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

crossobj.style.zIndex++

fadeclear[this.slideshowid]=setInterva…

this.curcanvas=(this.curcanvas==this.c… this.canvasbase+"_1" : this.canvasbase+"_0"

}

else{

var ns4imgobj=document.images['defaultslide'…

ns4imgobj.src=this.postimages[this.cur…

}

this.curimageindex=(this.curimageindex… this.curimageindex+1 : 0

}

 

fadeshow.prototype.resetit=function(){

this.degree=10

var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

if (crossobj.filters&&crossobj.filters[0]){

if (typeof crossobj.filters[0].opacity=="number") //if IE6+

crossobj.filters(0).opacity=this.degre…

else //else if IE5.5-

crossobj.style.filter="alpha(opacity="…

}

else if (crossobj.style.MozOpacity)

crossobj.style.MozOpacity=this.degree/…

else if (crossobj.style.KhtmlOpacity)

crossobj.style.KhtmlOpacity=this.degre…

else if (crossobj.style.opacity&&!crossobj.filte…

crossobj.style.opacity=this.degree/101

}

 

 

fadeshow.prototype.startit=function(){

var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

this.populateslide(crossobj, this.curimageindex)

if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER

var cacheobj=this

var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.sl…

crossobjcontainer.onmouseover=function…

crossobjcontainer.onmouseout=function(…

}

this.rotateimage()

}

 

</script>

 

 

 

Onde as imagens deve aparecer

 

<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)

new fadeshow(fadeimages, 475, 270, 0, 7000, 0)

</script>

 

 

• As imagens deve vir aqui

 

fadeimages[0]=["cg_1.jpg", "", ""] //plain image syntax

fadeimages[1]=["cg_2.jpg", "", ""] //image with link and target syntax

fadeimages[2]=["cg_3.jpg", "", ""] //image with link and target syntax

fadeimages[3]=["cg_4.jpg", "", ""] //image with link syntax

fadeimages[4]=["cg_5.jpg", "", ""] //image with link syntax

fadeimages[5]=["cg_6.jpg", "", ""] //image with link syntax

fadeimages[6]=["cg_7.jpg", "", ""] //image with link syntax

fadeimages[7]=["cg_8.jpg", "", ""] //image with link syntax

 

 

Ex: "[7]=["SEUIMAGEM.gif", "", ""] //image with link syntax

 

Caso você não mande bem no JQ você pode fazer um Slide direto do seu Dreawever se você usar !

 

abaixo Video :

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[dias doido 4]

# Requisição de fechamento do tópico.

 

# Motivo: "Violação das Regras"."Área destinada para tirar as dúvidas dos usuários sobre Design Gráfico."

 

# Qualquer duvida, veja as regras da área. http://www.webcheats.com.br/forum/design-duvidas-ajuda/1017730-design-duvidas-ajuda-regras-atualizado-02-08-2011-a.html

 

# Qualquer comentário abaixo será Reportado como violação das Regras.

[Matheussos 2]

Fechado.