Avatar billede webrex Nybegynder
17. december 2005 - 16:28 Der er 18 kommentarer og
1 løsning

Slideshow - hvordan?

Hejsa

Nogen som kan henvise til en god guide eller selv lave en, som jeg kan bruge til at lave et slide show. Har to <td>-tags hvori der konstant skal køre et lille slideshow. Det behøver kun at være et skift mellem 2-3-4 billeder. (Dvs. jeg skal have 2 slideshows, en i hver td-tag. Den skal skifte "blødt", hvis I forstår. Det er for avanceret at lave det i Macromedia Flash, når det kun er skift mellem få billeder. Nogen der kan hjælpe?
Avatar billede udvikler Nybegynder
17. december 2005 - 16:32 #1
<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=1000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

    randomimages[0]="1.jpg"
    randomimages[1]="5.jpg"
    randomimages[2]="2.jpg"
    randomimages[3]="4.jpg"
    randomimages[4]="3.jpg"
    randomimages[5]="6.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>


------------------------------------------------------------------------

det eneste du skal ændre i er navnet på billederne :)
Avatar billede webrex Nybegynder
17. december 2005 - 16:34 #2
Der var du hurtig - jeg søgte lige selv denne: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

er der forskel - Slideshowet skal virke i alle browsere! Og skal virke OPTIMALT i IE.

Gør dit det, eller er det i linket bedre ... (du skal nok få point, bare vi finder frem til den mest holdbare kode...)
Avatar billede udvikler Nybegynder
17. december 2005 - 16:43 #3
både min og din virker i IE og FF - har ikke mulighed for at teste i andre browsere.

Det er op til dig hvilken du vil bruge :-)

Det handler ikke så meget om point, men mere om at jeg faktisk gerne vil hjælpe dig! ;-)
Avatar billede udvikler Nybegynder
17. december 2005 - 16:44 #4
Min har dog ikke den bløde overgang, vidste ikke helt hvad du mente.
Avatar billede webrex Nybegynder
17. december 2005 - 17:11 #5
"Min" er lidt svær at overskue - kan du afkorte den, har kun brug for det første slideshow - den med maleriet af damen.
Avatar billede webrex Nybegynder
17. december 2005 - 17:16 #6
Kunne du ikke redigere koden så den bare udgør et slideshow, samt skift mellem 3 billeder (og fortæller hvad man skal gøre hvis man skal have færre eller flere), samt hvor man skal skrive px height og width af billederne?
Avatar billede udvikler Nybegynder
17. december 2005 - 17:24 #7
Kan du lidt php ?
så kan jeg få kodet exemplet ned til ca. 20 linier ?
Avatar billede udvikler Nybegynder
17. december 2005 - 17:25 #8
eller, jeg burde måske hellere have sagt, må jeg bruge lidt php ? det handler om 1 line lavet i php ? det er bare, har du mulighed for at bruge php på din side ?
Avatar billede webrex Nybegynder
17. december 2005 - 17:28 #9
Ved ikke hvor smart det er - jeg er ret blank på PHP området. Jeg vil helst have det i javascript.
Avatar billede webrex Nybegynder
17. december 2005 - 17:30 #10
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm : denne ser ud til at have den ønskede effekt, men har lidt problemer med den, jf. ovenfor. Kunne du "gøre rent" i den? - Slette det unødvendige og gøre plads til 3 billeder?
Avatar billede udvikler Nybegynder
17. december 2005 - 17:36 #11
det jeg vil bruge php til at er at tage alt kode i et dokument for sig selv, også bare inkludere det det sted hvor du vil have det ? det vil fylde 1 linie, faktisk skal du kun indsætte følgene:
<?php include "billedeskif.php"; ?>

og kalde din fil for dit-filnavn.php

men jeg har skåret den der kode ned som du ville have, her er den:

<html>
<head>
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "", ""]
fadeimages[2]=["photo3.jpg", "", ""]

var fadebgcolor="white"

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.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:'+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);-moz-opacity:10;-khtml-opacity:10;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);-moz-opacity:10;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{
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="'+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=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=obj.degree/100
}


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>
</head>

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

</script>
</body>

</html>
Avatar billede webrex Nybegynder
17. december 2005 - 17:44 #12
Ja, det virker nu... Men din grund til at lade det være i et seperat-dokument har jeg bare løst sådan ved i selve html-dokumentet at skrive således i <head>:

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

Så behøver du jo ikke php?
Avatar billede udvikler Nybegynder
17. december 2005 - 17:52 #13
Nu er jeg jo heller ikke javascript programmør, ved faktisk næsten intet om det, så jeg vidste ikke man kunne gøre det sådan ;-)
men godt du fik det til at virke.
Avatar billede webrex Nybegynder
17. december 2005 - 17:54 #14
Tak for hjælpen.
Avatar billede udvikler Nybegynder
17. december 2005 - 17:54 #15
Det var så lidt
Avatar billede webrex Nybegynder
17. december 2005 - 17:58 #16
Iøvrigt - jeg skal have to af sådanne slideshows på siden - så kunne jeg selvfølgelig bare lave et nyt .js -dokument, men kan man skrive det sammen?
Avatar billede webrex Nybegynder
17. december 2005 - 18:01 #17
Damn, der er lige dukket et afgørende problem op - når mit browser vindue ændres går slideshowet lidt ud af <td> - boksen - ? Det kan du sikkert ikke forklare - men hvis ikke jeg løser det vil jeg ikke kunne bruge scriptet.
Avatar billede webrex Nybegynder
17. december 2005 - 18:06 #18
Scriptet hopper på plads igen når man opdaterer  - tror du jeg skal prøve at spørge i javascript-forummet om de kan komme med et script, der ikke hopper ud af sin boks ved ændring af browser vindue?
Avatar billede udvikler Nybegynder
17. december 2005 - 18:09 #19
Ja, det ville være en god idé, for jeg ved som sagt ikke meget om javascript. Det var jo skrevet sammen i det der var på dit link, den kode der er i det første tekstfelt skal være under <head> og den kode der står i det andet skal stå under <body> det jeg gjorde da jeg "cuttede" koden, var at gøre sådan at den viste et slideshow. Det startede du nemlig med at sige jeg skulle gøre :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester