Diashow-opgelost+

Jeepeejee · 06 mei 2009, 09:36

Beste forummers en Coderunner...

Ik ben weer eens op zoek naar een extraatje, maar ik vind niets bruikbaar met het googelen...
Ik had graag een wisselend beeld geplaatst op een pagina. Dus een vast beeldformaat waar om de vijf a tien seconden een ander plaatje getoond wordt. Na de reeks van circa zes foto's komt de eerste terug enz... Eventueel met een overvloeieffect.
Wie beschikt er over een eenvoudig aanpasbare html code of javascriptje voor zoiets ?
Alvast bedankt,

Jeepeejee

http://www.fotoreisverhaal.net/

coderunner · 06 mei 2009, 18:03

Beste Jeepeejee,

Bedoel je zoiets ? Bekijk het voorbeeld hier

De code voor dit album is ...

Code: Selecteer alles

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>DiaShow</title>

<script language="JavaScript">
<!--

// plaats hier de juiste image paths bv. 0001.jpg of images/0001.jpg
src = ["images/0001.jpg", "images/0002.jpg", "images/0003.jpg", "images/0004.jpg"]


// plaats hier eventueel een link
url = ["http://www.link.com", "", "", ""]

// plaats de tijd van tonen van elke foto
duration = 4;

//Hieronder niets wijzigen
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["foto"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</script>
</head>

<body bgcolor="000000">

<div align="center">
<a href="javascript:doLink();" onMouseOver="status=url[ct];return true;" onMouseOut="status=''">
<img name="foto" src="images/0001.jpg" height="300" border="0"></a>
</div>

</body>

</html>

mvg,
Coderunner

Aanpassing: wegens het offline gaan van de beaconhosting-server, hier nieuwe links

Jeepeejee · 06 mei 2009, 21:06

Ook bij bovenstaand script heb je geen controle over de grootte van de beelden... Het moet toch mogelijk zijn om in een welbepaald vlak zo'n reeks te laten aflopen...
Toch bedankt, maar ik ben er nog niet.
Jeepeejee

coderunner · 06 mei 2009, 22:07

Jeepeejee schreef:Ook bij bovenstaand script heb je geen controle over de grootte van de beelden... Het moet toch mogelijk zijn om in een welbepaald vlak zo'n reeks te laten aflopen...

Beste Jeepeejee,

Ik begrijp je hier niet goed ... "geen controle over de grootte van de beelden" ...
De grootte van de foto wordt gedefinieerd in ofwel een height ofwel een width mee te geven.

<div align="center">
<a href="javascript:doLink();" onMouseOver="status=url[ct];return true;" onMouseOut="status=''">
<img name="foto" src="images/0001.jpg" height="300" border="0"></a>
</div>

In bovenstaand script hebben dus alle foto's een hoogte van 300px. Wil je kleinere foto's dan verklein je deze waarde, wil je grotere foto's dan vergroot je deze waarde.
voorbeeld:
- hoogte 100px
- hoogte 300px
- hoogte 500px
De foto's in de voorbeelden hebben allemaal oorspronkelijk een andere grootte!!

mvg,
Coderunner

Aanpassing: wegens het offline gaan van de beaconhosting-server, hier nieuwe links

Jeepeejee · 07 mei 2009, 11:21

Beste Coderunner,
Ik heb door een combinatie van enkele scripts en jouw hulp geraakt waar ik naar op zoek was. De grootte van het beeld is wel nog afhankelijk van het resizen van het beeld !
Bedankt en tot een volgende weeral !!! Zie hieronder het resultaat.

http://www.fotoreisverhaal.net/containers/index.html

Jeepeejee

coderunner · 07 mei 2009, 17:17

Jeepeejee schreef:... De grootte van het beeld is wel nog afhankelijk van het resizen van het beeld !

Beeste Jeepeejee,

Vooreerst bedankt om te melden dat je probleem is opgelost en je uiteindelijk hebt wat je zocht.

Opmerking:
In Firefox staan de foto's niet in het voorziene kader dus zal je nog wat aan de css opmaak moeten "sleutelen".

Maar ik begrijp nog steeds niet wat je bedoelt met "De grootte van het beeld is wel nog afhankelijk van het resizen van het beeld.
Alle foto's die jij gebruikt zijn allemaal
- even groot (600x399)
- "liggend" (landscape).
Wanneer je in jouw javascript deze zou combineren met "staande" (portrait) foto's EN met foto's van verschillende groottes dan ga je in de problemen komen.

Met het javascript dat ik je gegeven hebt, krijg je geen problemen met liggend en staande foto's en foto's van verschillende groottes doorelkaar gebruikt daar je alle foto's een vaste hoogte (height) meegeeft. M.a.w. gebruik je foto's van verschillende groottes dan zullen ze allemaal eenzelfde hoogte hebben maar verschillende breedtes (width).

Ook zal mijn bovenstaand javascript de foto's op de juiste plaats tonen in Firefox zonder dat je in de css opmaak iets moet wijzigen

Nog veel succes.

mvg,
Coderunner

Aanpassing: Voorbeelden werden verwijderd daar de stylesheet die gelinkt was naar jouw site, door jou geweizigd werd.

Jeepeejee · 09 mei 2009, 10:58

Beste coderunner,

Opmerking:
In Firefox staan de foto's niet in het voorziene kader dus zal je nog wat aan de css opmaak moeten "sleutelen".

Ik ben "aan 't sleutelen" geweest,

, en ik denk dat het nu in alle browsers goed moet lopen... Dat hoop ik toch ! Ik heb wel de witte kader die ik er rond had moeten opofferen, dat kreeg ik niet klaar. Niet zo erg...

Wat ik bedoel met dat formaat, is dat ik het jammer vind dat er nergens in dit script kan gedefinieerd worden hoe groot je de foto wil, zoals je dat wel kan als je een gewoon image plaatst (met height en width). De grootte hangt dus af van hoe klein of groot je een foto resized voor je ze upload. Maar goed, in dit geval is het opgelost !

http://www.fotoreisverhaal.net/containers/index.html

In elk geval, bedankt en een prettig weekend !

Jeepeejee

coderunner · 10 mei 2009, 14:56

Jeepeejee schreef:Wat ik bedoel met dat formaat, is dat ik het jammer vind dat er nergens in dit script kan gedefinieerd worden hoe groot je de foto wil, zoals je dat wel kan als je een gewoon image plaatst (met height en width). De grootte hangt dus af van hoe klein of groot je een foto resized voor je ze upload.

Beste Jeepeejee,

Inderdaad met het javascript dat jij gebruikt kan je de grootte van de foto d.m.v. height en width niet meegeven en moet je inderdaad de foto resizen naar de grootte die je wenst.

Daarentegen in het javascript dat ik hierboven aangaf is dat WEL mogelijk door alleen de hoogte (height) in de <img ...> tag mee te geven zoals ik hierboven al aanhaalde.

Maar swat, je hebt de layout kunnen maken zoals je het zelf wou door alle foto's te resizen naar dezelfde grootte , dus "case closed" ...

Prettig weekend

mvg,
Coderunner

PS Ik heb de links naar de voorbeelden in mijn vorige post verwijderd daar de stylesheet in al mijn voorbeelden gelinkt was naar jouw site, en ondertussen heb je deze (index.css) geweizigd waardoor de voorbeelden niet meer correct getoond werden.