Panickov.esitex.com

Obrázkový dopravník

(v originále : Conveyor Belt slideshow script)

Čili slideshow malých obrázků, pohybujících se za sebou zprava doleva.

    Je asi jedno, jak to nazveme česky. Javascript je delší, ale velice jednoduchý na použití, největší práci zabere vytvoření obrázků o stejných rozměrech a malé velikosti (myslím velikosti v bajtech, aby se nám příliš nezpomalovalo načítání stránky).

Postup ( pro názornost budu popisovat postup a rozměry prvku, který je umístěn vlevo nahoře) :

• Nejdříve si musíme zvolit rozměry jak celé grafiky, tak velikost jednotlivých obrázků. Hlavně výška jednotlivých obrázků musí být shodná s výškou celého prvku. Zvolil jsem výšku 150px, šířku jednotlivých obrázků na 90px a šířku prvku 400px.

• Vytvoříme si obrázky (nebo si upravíme již existující), a nahrajeme je na web. Hlavně si hned zkopírujeme jejich adresy.

• Dosadíme naše rozměry a adresy (případně URLODKAZY) obrázků do tohoto kódu javascriptu:

<script type="text/javascript">

var sliderwidth="400px"  // = ŠÍŘKA PRVKU (DOPRAVNÍKU) V PIXELECH

var sliderheight="150px"   // = VÝŠKA PRVKU A (!) OBRÁZKŮ V PIXELECH

var slidespeed=1  // = RYCHLOST POJEZDU 1-10 = VYŠŠÍ ČÍSLO = RYCHLEJŠÍ

slidebgcolor="#4D9BED" //  = BARVA POZADÍ POD A  MEZI OBRÁZKY

var updownslide=new Array()

var finalslide=''

updownslide[0]='<a href="URLODKAZ0"><img src="ADRESA_OBRÁZKU_0" border=1></a>'

updownslide[1]='<a href="URLODKAZ1"><img src="ADRESA_OBRÁZKU_1" border=1></a>'

updownslide[2]='<a href="URLODKAZ2"><img src="ADRESA_OBRÁZKU_2" border=1></a>'

updownslide[3]='<a href="URLODKAZ3"><img src="ADRESA_OBRÁZKU_3" border=1></a>'

updownslide[4]='<a href="URLODKAZ4"><img src="ADRESA_OBRÁZKU_4" border=1></a>'

var imagegap=" "

var slideshowgap=5

//// ODTUD DOLU NIC NEUPRAVUJEME !!! ////////////

var copyspeed=slidespeed

updownslide='<nobr>'+updownslide.join(imagegap)+'</nobr>'

var iedom=document.all||document.getElementById

if (iedom)

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+updownslide+'</span>')

var actualwidth=''

var cross_slide, ns_slide

function fillup(){

if (iedom){

cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

cross_slide.innerHTML=cross_slide2.innerHTML=updownslide

actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

cross_slide2.style.left=actualwidth+slideshowgap+"px"

}

else if (document.layers){

ns_slide=document.ns_slidemenu.document.ns_slidemenu2

ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

ns_slide.document.write(updownslide)

ns_slide.document.close()

actualwidth=ns_slide.document.width

ns_slide2.left=actualwidth+slideshowgap

ns_slide2.document.write(updownslide)

ns_slide2.document.close()

}

lefttime=setInterval("slideleft()",30)

}

window.onload=fillup

function slideleft(){

if (iedom){

if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))

cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"

else

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))

cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"

else

cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}

else if (document.layers){

if (ns_slide.left>(actualwidth*(-1)+8))

ns_slide.left-=copyspeed

else

ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))

ns_slide2.left-=copyspeed

else

ns_slide2.left=ns_slide.left+actualwidth+slideshowgap

}

}

if (iedom||document.layers){

with (document){

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

if (iedom){

write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')

write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')

write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')

write('</div></div>')

}

else if (document.layers){

write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')

write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('</ilayer>')

}

document.write('</td></table>')

}

}

</script>

  Hodnoty v těchto řádcích by měly nastavovat mezery mezi obrázky, ale ať jsem dosazoval jakékoli hodnoty, nic se nezměnilo. Smiřme se s tím. Pokud přijdete na to, jak je nastavit, dejte vědět !!

To jsou ony:

var imagegap=" "

var slideshowgap=5

K jednotlivým obrázkům můžeme také přidat HTML odkazy. V tom řípadě je dosadíme za text,  označený žlutě (URLODKAZ0-4 )

FUNGUJE?