Slide effect maken?

Status
Niet open voor verdere reacties.
MiserySyndrome

MiserySyndrome

Gebruiker
Lid geworden
27 okt 2008
Berichten
14
Ik weet niet echt of ik het hier moest plaatsen of ergens anders, maar hier leek het mij de beste plaats te zijn en het meest logische :o
Dus mijn excuses als het verkeerd geplaatst werd :o
Anyway,
Ik heb recent een website gemaakt die eindelijk na vele uren volledig af is :d
Maar ik vroeg me het volgende af..
Ik zou graag bij men foto's, het is namelijk een website voor fotografie, zo een sliede effect hebben bij het openen van de foto in plaats van in HTML telkens een nieuw venster te moeten openen die dan in sommige browsers een nieuwe tab opent.
Ik vind dit namelijk niet zo overzichtelijk en mooi, maar helaas weet ik niet hoe ik zo een slide effect moet make :confused:
Ik bedoel een slide effect zoals op deze site te vinden is: http://www.welshrugbypics.co.uk/events/2447-wales-rugby-training-101110
Ik heb met firefox al eens de bron code bekeken. Maar ik begrijp er niet veel van :(
Iemand die me hiermee verder kan helpen?
Alvast bedankt :)
http://www.welshrugbypics.co.uk/events/2447-wales-rugby-training-101110
 
je kan je foto,s uploaden naar imageshack en die dia slide show in een iframe zetten :$ heb ik gedaan maar weet niet of dat is wat je zoekt
 
Heel mooi effect


of gebruik dit :D (is iets anders maar zeker mooi :D)

HTML: 
Stap 1: Plak onderstaand script in de <head> van je site.

<SCRIPT>
// hier definieer je alle afbeeldingen
var afbeeldingen=new Array()
afbeeldingen[0]=["foto1.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
afbeeldingen[5]=["foto6.jpg", "#"]
afbeeldingen[6]=["foto12.jpg", "#"]
afbeeldingen[7]=["foto8.jpg", "#"]
afbeeldingen[8]=["foto9.jpg", "#"]
afbeeldingen[9]=["foto10.jpg", "#"]
afbeeldingen[10]=["foto11.jpg", "#"]

var voorladen="nee" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een doel invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

// hieronder geen wijzigen aanbrengen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</SCRIPT>

<META http-equiv=imagetoolbar content=no>

Stap 2: Plak onderstaand script in de <body> van je site.

<CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing', 0)" href=""><IMG height=45 src="foto1klein.jpg" width=60 border=1></A>
<A onmouseover="wijzigbeeld('beeldplaatsing', 1)" href=""><IMG height=45 src="foto2klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 2)" href=""><IMG height=45 src="foto3klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 3)" href=""><IMG height=45 src="foto4klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 4)" href=""><IMG height=45 src="foto5klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 5)" href=""><IMG height=45 src="foto6klein.jpg" width=60 border=1></A> 
<CENTER>
<DIV id=beeldplaatsing style="WIDTH: 500px; HEIGHT: 300px" ;></DIV>
</CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing', 6)" href=""><IMG height=45 src="foto12klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 7)" href=""><IMG height=45 src="foto8klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 8)" href=""><IMG height=45 src="foto9klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 9)" href=""><IMG height=45 src="foto10klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 10)" href=""><IMG height=45 src="foto11klein.jpg" width=60 border=1></A> 
</CENTER>

Stap 3: Wijzig de foto's in die van jezelf.
 
Vanwege deze regel:

[JS]
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
[/JS]

Ga ik ervanuit dat dit script alleen in IE zal werken... En aangezien niet cross-browser betekent niet gebruiken, kan de TS het best gewoon voor Lightbox gaan. Die heeft zichzelf bewezen.
 
ErikBooy007 zei:
Vanwege deze regel:

[JS]
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
[/JS]

Ga ik ervanuit dat dit script alleen in IE zal werken... En aangezien niet cross-browser betekent niet gebruiken, kan de TS het best gewoon voor Lightbox gaan. Die heeft zichzelf bewezen.
Klik om te vergroten...

nee hoor :)

script werkt in firefox, chrome,flock,safari,opera (I.E heb ik niet dus kan die niet testen)
 
powerpoint

Je kan ook gewoon een powerpoint in je website opslaan
:thumb:
 
mastermindzh zei:
Heel mooi effect


of gebruik dit :D (is iets anders maar zeker mooi :D)

HTML: 
Stap 1: Plak onderstaand script in de <head> van je site.

<SCRIPT>
// hier definieer je alle afbeeldingen
var afbeeldingen=new Array()
afbeeldingen[0]=["foto1.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
afbeeldingen[5]=["foto6.jpg", "#"]
afbeeldingen[6]=["foto12.jpg", "#"]
afbeeldingen[7]=["foto8.jpg", "#"]
afbeeldingen[8]=["foto9.jpg", "#"]
afbeeldingen[9]=["foto10.jpg", "#"]
afbeeldingen[10]=["foto11.jpg", "#"]

var voorladen="nee" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een doel invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

// hieronder geen wijzigen aanbrengen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</SCRIPT>

<META http-equiv=imagetoolbar content=no>

Stap 2: Plak onderstaand script in de <body> van je site.

<CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing', 0)" href=""><IMG height=45 src="foto1klein.jpg" width=60 border=1></A>
<A onmouseover="wijzigbeeld('beeldplaatsing', 1)" href=""><IMG height=45 src="foto2klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 2)" href=""><IMG height=45 src="foto3klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 3)" href=""><IMG height=45 src="foto4klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 4)" href=""><IMG height=45 src="foto5klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 5)" href=""><IMG height=45 src="foto6klein.jpg" width=60 border=1></A> 
<CENTER>
<DIV id=beeldplaatsing style="WIDTH: 500px; HEIGHT: 300px" ;></DIV>
</CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing', 6)" href=""><IMG height=45 src="foto12klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 7)" href=""><IMG height=45 src="foto8klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 8)" href=""><IMG height=45 src="foto9klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 9)" href=""><IMG height=45 src="foto10klein.jpg" width=60 border=1></A> 
<A onmouseover="wijzigbeeld('beeldplaatsing', 10)" href=""><IMG height=45 src="foto11klein.jpg" width=60 border=1></A> 
</CENTER>

Stap 3: Wijzig de foto's in die van jezelf.
Klik om te vergroten...
Dit is geweldig ;o
bij het eerste foto1.jpg word dus het pad (in mijn geval de url nr de foto) en de # geeft dan de naam weer :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan