Avatar billede bassa Nybegynder
29. december 2004 - 22:02 Der er 8 kommentarer og
1 løsning

Imagefader med kontrolknapper!

Hejsa,

Jeg har fundet et lækkert lille JavaScript som vil være perfekt til en funktion på mit website, men jeg kunne godt tænke mig et par enkle modifikationer i det, og eftersom jeg ikke selv kan programmere, håber jeg at nogen kan hjælpe med dette.

Umiddelbart tror jeg ikke, at opgaven bliver særligt svær at løse, men hvad ved jeg. ;)

Nå, men her er selve scriptet some har en virkelig flot "fade" effekt imellem hvert enkelt billede:

----------------------------<HEAD>-------------------------------
<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("image1.gif","image2.gif","image3.gif")

//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

-----------------------------<BODY>------------------------------
<a href="java script:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
-----------------------------------------------------------------

Nu er det jo fint nok at der i forvejen er lagt link-mulighed ind i selve scriptet, men jeg kunne godt tænke mig at alle links kan linke til et "_blank" vindue i pre-defineret størrelse, eksempelvis 500x300 pixels, og hvor det nye popup vindue ikke kan justeres i størrelsen. Jeg bruger selv Dreamweaver, og det har en "Behavior"-funktion hvor man kan bestemme hvilke ting i det nye vindue skal være til stede, såsom Statusbar, Menubar, om vinduet kan justeres etc. etc.

Samtidig skal jeg skal bruge to knapper til brug i scriptet, neden under selve billedet. Det skal være en "Frem" og "Tilbage" knap, så folk selv kan "slide" imellen de forskellige billeder, og hvis der er et billede de syntes om, så kan de klikke på det og derved få billedet at se i fuld størrelse, i et nyt, ikke-justérbart vindue.

Tror det var det hele, lol! :D

Hvis 100 points er for lidt, så bare sig til.


Mvh
Ulrik
Avatar billede bassa Nybegynder
30. december 2004 - 11:09 #1
Det var ikke mange henvendelser? :(
Avatar billede roenving Novice
30. december 2004 - 12:18 #2
Scriptet er lavet til kun at virke i IE, så jeg vil ikke begynde at pille alvorligt i det, men f.eks. window.open er ret simpel at manipulere med:

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink],'newLink','width=500,height=300,resizable=no')
else
window.location=slidelinks[whichlink]
}
Avatar billede bassa Nybegynder
30. december 2004 - 12:41 #3
Øøh, i hvilke dele af ovenstående kode skal jeg ændre links og billeder?
Avatar billede roenving Novice
30. december 2004 - 12:48 #4
Du skal bare udskifte den oprindelige funktion med den ændrede, resten skal du lade blive !-)
Avatar billede bassa Nybegynder
30. december 2004 - 12:54 #5
Hey, cool! Jeps, fandt ud af det.

Nu åbner de nye vinduer helt perfekt, men kunne ikke få dem til at linke til de rigtige .HTML-filer som jeg har liggende.

Prøv og se her:

-------------------------------------------------------------------------------------
//specify images
var slideimages=new Array("images/templates/template01_lille.gif","images/templates/template02_lille.gif","images/templates/template03_lille.gif")

//specify corresponding links
var slidelinks=new Array("http://www.ufodesign.dk/public_html/layout01.htm","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink],'newLink','width=800,height=700,resizable=no')
else
window.location=slidelinks[whichlink]
}
-------------------------------------------------------------------------------------

Hvis jeg nu ændrer linket til denne sti: ("http://www.ufodesign.dk/public_html/layout01.htm"

Så åbner den kun www.ufodesign.dk, men ikke den html-fil som ligger længere inde.

Hvordan ændrer jeg det?


Mvh
Ulrik
Avatar billede bassa Nybegynder
30. december 2004 - 13:03 #6
Doh! Hvor er jeg en spade, lol :D

Jeg fixede det selv :P

Det hele kører vist fint nu.

Skal lige spørge dig om en ting, roenving...

Dette script som jeg kører hér, er det kun IE brugere som kan se det?

Jeg mener, det skal gerne ramme en bred målgruppe af internet-brugere.


Mvh
Ulrik
Avatar billede roenving Novice
30. december 2004 - 13:11 #7
Det er kun fade-over-effekten, som er ie-only, i resten af browserne skifter billederne bare !-)

I http://www.eksperten.dk/spm/478961 kan du se en udgave, som også fader i de Gecko-baserede browsere ...

Velbekomme '-)
Avatar billede bassa Nybegynder
30. december 2004 - 14:25 #8
Når bare man kan se at billederne skifter, og man kan se dem enkeltvis i fuld størrelse. Det er det vigtigste.

Tusind tak for hjælpen, mester! :D


Mvh
Ulrik
Avatar billede roenving Novice
30. december 2004 - 16:40 #9
-- og tak for point ;~}
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