Bowie Slide

 

Boa tarde, pessoal.

Esse tutorial vai ser meio complicado, mas é bem menos complicado que o Nivo Slider e precisa apenas de poucas modificação. Uma leitora me pediu para passar para o blogger um slide chamado Bowie, lá do GH. Ele é um slide igual ao Nivo, mas um pouco mais simples, pois só apresenta uma transição fade e não permite a adição de setas e coisas assim. Acho ele bem legal para quem usa slide somente para enfeite, entendem? Para quem prefere deixar somente algumas fotos passando, sem linkar nada. Ele permite a adição de links, mas só um link para todas as fotos, então recomendo que coloque a url do seu blog ou que deixe sem nada. Confesso que me deu dor de cabeça passa para cá, pois passei trezentos anos tentando colocar no CSS, mas não rolou e eu tive que colocar direto no gadget, mas nem faz diferença.

Se você quer conhecer o slide, clique aqui e role a página até o fim. Ele vai estar lá no footer. Gostaram? Acho ele bem simples e fofo, super recomendo e nem é tão difícil de colocar, vocês só precisam arrumar as fotos e o tamanho que gostarem. Para colocar no topo, é aquele mesmo tutorial de gadgets no cabeçalho, sem segredo nenhum. Podem repassar o tutorial se acharem interessante, mas sempre creditando, viu? Clique em leia mais para aprender a colocar.

1. Crie um gadget de HTML/JavaScript e nele, cole o seguinte (é enorme):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

var fadeimages=new Array()

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

fadeimages[0]=["http://i1234.photobucket.com/albums/ff411/SweetLG/292.png"] //plain image syntax

fadeimages[1]=["http://i1234.photobucket.com/albums/ff411/SweetLG/293.png"] //image with link syntax

fadeimages[2]=["http://i1234.photobucket.com/albums/ff411/SweetLG/294-1.png"] //plain image syntax

fadeimages[3]=["http://i1234.photobucket.com/albums/ff411/SweetLG/295-1.png"] //plain image syntax

var fadebgcolor="white"

////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.slideshowid

this.curcanvas=this.canvasbase+"_0"

if (typeof displayorder!="undefined")

theimages.sort(function() {return 0.3 - 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:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')

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.slideshowid+"].rotateimage()", this.delay)

}

}

function fadepic(obj){

if (obj.degree<100){

obj.degree+=10

if (obj.tempobj.filters&&obj.tempobj.filters[0]){

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

obj.tempobj.filters[0].opacity=obj.degree

else //else if IE5.5-

obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"

}

else if (obj.tempobj.style.MozOpacity)

obj.tempobj.style.MozOpacity=obj.degree/101

else if (obj.tempobj.style.KhtmlOpacity)

obj.tempobj.style.KhtmlOpacity=obj.degree/100

else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)

obj.tempobj.style.opacity=obj.degree/101

}

else{

clearInterval(fadeclear[obj.slideshowid])

obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? 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.postimages.length-1)? obj.nextimageindex+1 : 0

setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)

}

}

fadeshow.prototype.populateslide=function(picobj, picindex){

var slideHTML=""

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

slideHTML='<a href="http://www.google.com" 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=function(){

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

var cacheobj=this

if (this.mouseovercheck==1)

setTimeout(function(){cacheobj.rotateimage()}, 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]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)

this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"

}

else{

var ns4imgobj=document.images['defaultslide'+this.slideshowid]

ns4imgobj.src=this.postimages[this.curimageindex].src

}

this.curimageindex=(this.curimageindex<this.postimages.length-1)? 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.degree

else //else if IE5.5-

crossobj.style.filter="alpha(opacity="+this.degree+")"

}

else if (crossobj.style.MozOpacity)

crossobj.style.MozOpacity=this.degree/101

else if (crossobj.style.KhtmlOpacity)

crossobj.style.KhtmlOpacity=this.degree/100

else if (crossobj.style.opacity&&!crossobj.filters)

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.slideshowid)

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}

crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}

}

this.rotateimage()

}

</script>

<script type="text/javascript">

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

</script>

<td background="http://i1234.photobucket.com/albums/ff411/SweetLG/295-1.png" width="500" height="300" alt="">

<script type="text/javascript">//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)

new fadeshow(fadeimages, 500, 300, 0, 2000, 1, "R")</script></td>

Não se assuste pelo tamanho, são poucas as coisas que você precisará mudar. 

2. Logo no começo do código, você encontrará quatro links do Photobucket. Esses são os links das imagens, troque pelas que quer colocar no slide. No fim do código, você encontrará mais uma vez, esse link:

http://i1234.photobucket.com/albums/ff411/SweetLG/295-1.png

Ele já pareceu uma vez, naqueles quatro links que eu falei. No lugar dele você deve colar o link da sua última imagem. Tudo certo? Agora é a última parte: O tamanho, que vai ser bem simples. Procure por isso:

width="500" height="300"

No lugar de 500 coloque sua largura e no lugar de 300 sua altura. Agora procure por:

(fadeimages, 500, 300, 0, 2000, 1, "R")