Avatar billede theselfimages Nybegynder
24. januar 2003 - 18:59 Der er 23 kommentarer og
1 løsning

Modificering af Slideshow script

Er det muligt at udvide dette script, således at "wait" tiden før der slides fra første til anden image er anderledes en selve "slideShowSpeed" for de resterende images. Altså så scriptet udbygges med flere forskellige definerbare variabler.

/ Lars


<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = Pic[i]
}

function runSlideShow(){
  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>

<body onload="runSlideShow()"> 

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>


</body>
</html>
Avatar billede nuki Nybegynder
24. januar 2003 - 19:43 #1
Altså hvordan mener du?

Kun tiden mellem billede 1 og 2 skal ændres?

-nuki
Avatar billede theselfimages Nybegynder
24. januar 2003 - 20:25 #2
Så tiden mellem start og det første skift kan defineres seperat
og tiden for alle resterende skift ligeledes kan defineres separat.
Som det er nu er der jo en fast "slideShowSpeed" variable for alle skift.
Avatar billede theselfimages Nybegynder
24. januar 2003 - 21:26 #3
Eller.. ja til dit spørgsmål.
Så mellem billede 1 (start) og billede 2 kan sættes seperet
og at tiden mellem billede 2 og alle andre ligeledes kan
sættes seperat.
Avatar billede nuki Nybegynder
24. januar 2003 - 21:54 #4
Hmmm det bliver en lang kode du får dig der og så skulle du tilføje mere kode ved hvert nyt billede.

Jeg kan ikke lige overskue det men andre kan sikkert.

-Nuki
Avatar billede olebole Juniormester
26. januar 2003 - 00:05 #5
<ole>

Njaahhh .... det er vist blot nogle mindre ændringer, der er brug for. Prøv dette ... er ikke testet, men burde fungere:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set initial delay (milliseconds)
var initDelay = 3000;

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = new Array(
    5000,
    3000,
    4000,
    5000,
    3000
);

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = Pic[i]
}

function runSlideShow(){
  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed[j])
}
</script>
</head>

<body onload="setTimeout('runSlideShow()', initDelay)">

/mvh
</bole>
Avatar billede theselfimages Nybegynder
26. januar 2003 - 03:27 #6
Hmm.. det virker fint nok, bortset at det IKKE syntes at have nogen hastighedseffekt om denne:

// Set initial delay (milliseconds)
var initDelay = 3000;

sættes til en værdi under 3000. Kun hvis den sættes over 3000.
10000 kan f.eks. tydeligt mærkes, men 1 er tilsynladene stadig
havd der svare til 3000 !?!


I
Avatar billede olebole Juniormester
26. januar 2003 - 03:35 #7
Så ved jeg ikke, hvad du lever af fejl. Den angiver, hvorlænge der går fra det øjeblik, siden er loaded, til funktionen kaldes.
Sætter du den til 3000, går der 3 sekunder før funktionen kaldes ... det burde der ikke være problemer med.
/mvh
Avatar billede theselfimages Nybegynder
26. januar 2003 - 03:58 #8
Hmm.. næh! okay.

Men jeg mente med mit orindelige spørgsmål om følgene er muligt,
hvis der kun skiftes mellem 2 billeder:
At det første skift fra det billede der ses når siden hentes og nummer 2 kunne bestemmes alene. Dernæst om skiftet mellem billede 2 tilbage til 1 også kunne sættes alene og med denne (samme) hastighed skiftes så forfra fra 1 til 2.

Start => 2 (definerbar hastighed for dette skift // hurtigt skift)
    2 => 1 (definerbar hastighed for dette skift // 6000 milliseconds)
    1 => 2 (samme som ovenstående el. definerbar hastighed // 6000 milliseconds)

Håber det giver mening!
Avatar billede olebole Juniormester
26. januar 2003 - 04:12 #9
Ja, det er det, jeg har skrevet. Så barberer du dit Pic-array ned og slideShowSpeed ligeså.
/mvh
Avatar billede theselfimages Nybegynder
26. januar 2003 - 04:26 #10
Men hvis denne:
http://www.theselfimages.dk/enlarge.asp?category=3&page=30&language=uk

Er sat til dette:
// Set initial delay (milliseconds)
var initDelay = 1;

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = new Array(
    6000,
    6000,
    1000,
    5000,
    3000
);

Burde det første skift fra start => 2 så ikke være langt hurtigere end når der skiftes fra 1 => 2 for anden gang?

Har jeg misforstået hele princippet?
Avatar billede theselfimages Nybegynder
26. januar 2003 - 04:27 #11
Men hvis denne:
http://www.theselfimages.dk/enlarge.asp?category=3&page=30&language=uk

Er sat til dette:
// Set initial delay (milliseconds)
var initDelay = 1;

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = new Array(
    6000,
    6000,
    1000,
    5000,
    3000
);

Burde det første skift fra start => 2 så ikke være langt hurtigere end når der skiftes fra 1 => 2 for anden gang?

Har jeg misforstået hele princippet?
Avatar billede olebole Juniormester
26. januar 2003 - 04:42 #12
Jeg tror ikke dit billede er preloaded, når du starter første overblænding ... så går der 6 sekunder mere, før den kan gøre det igen. Det tror jeg ikke, du kan ændre på. Det er jo i web-sammenhæng håbløst store billeder
Avatar billede theselfimages Nybegynder
26. januar 2003 - 04:46 #13
Men om billeder ligger i IE's cache eller ej, så er tiden den samme.
Så har det vel ikke noget med preloading at gøre?
Avatar billede olebole Juniormester
26. januar 2003 - 13:03 #14
Test det selv med to små billeder. Funktionen bliver kaldt med det samme, hvis du sætter initDelay=1 ... det garanterer jeg dig.
Prøv som sagt med to små billeder og se, om der er forskel - og kom så tilbage med en melding  ;o)
/mvh
Avatar billede theselfimages Nybegynder
26. januar 2003 - 14:39 #15
Okay! Du har ret. InitDelay=1 er langt hurtigere vd små billeder.
Er der en smart måde at preloade mine store billeder først? Og har du nogen
umiddelbar idé om, hvorfor scriptet i det hele taget ikke virker i Opera.
I NS fader den ikke, men skifter blot hårdt fra billed til billed. Det kan jeg leve med, men Opera er et problem.
Avatar billede olebole Juniormester
26. januar 2003 - 14:49 #16
Bare lav et andet script til 'den lamme nordmand' og check på browseren. Så må den jo bare have et simpelt skifte-script.

Problemet er jo, du preloader billederne ... det tager noget tid - uanset hvordan du gør. Hvis ikke du gør det, virker slideshow'et ikke.

You're damned if ya' do - 'n' you're damned if ya' don't  ;o)
/mvh
Avatar billede theselfimages Nybegynder
26. januar 2003 - 15:02 #17
Hmm.. mht. fadeeffekten... kan denne så KUN lade sig gøre i IE? Eller er Codelifter bare en dårlig programmør?

Tak for hjælpen.
Egentlig har jeg endnu et spørgsmål. Er muligt i scriptet at indsætte en PAUSE / PLAY knap, der i en serie på fx 10 billeder kan PAUSE på et tilfældigt billede og så fortsætte slideshowet, når knappen klikkes igen.
Avatar billede olebole Juniormester
26. januar 2003 - 15:20 #18
filters er ren IE.

Det andet må du forklare nøjere.
Avatar billede theselfimages Nybegynder
26. januar 2003 - 15:28 #19
Hmm.. øv! med de filters.

Mit andet spørgsmål lyder:
Hvis jeg har en serie på 10 billeder der fader/skifter mellem hinanden, vil det da være muligt manuelt at PAUSE (ved klik på knap) et tilfældigt billede i serien, hvis man gerne vil se nærmere på det. Og så ligeledes fortsætte slideshowet hvorfra det blev Paused (ved klik på samme eller anden knap)
Avatar billede olebole Juniormester
26. januar 2003 - 15:35 #20
<button onclick="clearTimeout(t)">Stop</button>
<button onclick="runSlideShow()">Kør</button>
Avatar billede theselfimages Nybegynder
26. januar 2003 - 15:38 #21
Kan denne:

// Set initial delay (milliseconds)
var initDelay = 1;

Ligeledes integreres i nedenstående script? (faldt lige over det.. syntes at virke langt bedre crossbrowser) Kunne vi bruge dette i stedet?




<script language="JavaScript1.2">

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width=140 //SET IMAGE WIDTH
var slideshow_height=225 //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"

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

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
Avatar billede olebole Juniormester
26. januar 2003 - 15:40 #22
Jeg tror, jeg allerede har besvaret dit spørgsmål temmelig indgående  :)
/mvh
Avatar billede theselfimages Nybegynder
26. januar 2003 - 16:16 #23
Det har du ret i. Tak for hjælpen. Det blev godt,
men jeg vil lige forsøge om scriptet ikke kunne modificeres
til at kunne håndterer Opera og NS også.

Mvh. Lars
Avatar billede theselfimages Nybegynder
26. januar 2003 - 16:23 #24
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

Seneste spørgsmål Seneste aktivitet
I går 21:00 Libre Office Impress Af Frank i Andre styresystemer
I går 11:47 VB script Af Jenshentze i Word
I går 11:21 Popup ved opstart Af mort1 i Windows
04/0918:50 Slet lokal konto Af ErikHg i Windows
04/0916:05 Ændre tal i en celle Af xvid i Excel