plaatjes horizontaal laten lopen / bewegen

Status
Niet open voor verdere reacties.
G

gast0515

Gebruiker
Lid geworden
4 jan 2010
Berichten
134
Hallo,

ik wil graag de plaatjes (foto's) horizontaal laten lopen. Zodat ze van rechts naar links zelf bewegen.
Het gaat niet om zelf horizontaal kunnen scrollen maar puur om de beweging van de plaatjes.
Kan iemand mij helpen?
Alvast dank :-)
Groetjes,
 
Laatst bewerkt door een moderator:
Hoi ,
Iets dergelijks is hier op het forum eerder besproken als "Horizontale foto-film", in de draad: www.helpmij.nl/forum/showthread.php/529635-Horizontale-foto-film.

In reactie nr. #3 staat deze testpagina: http://developerscorner.nl/csshunter/test-taampjes.htm.

Hier is ook een fotostrook die uit zichzelf over de pagina schuift.
Uit zichzelf: d.w.z. met een brokje simpel javascript.
Is zoiets de bedoeling? Dan kan je dat script gebruiken, en de css naar behoefte aanpassen. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt door een moderator:
Hoi CSShunter,

ik heb de code gekopieerd.
Ik heb een nieuw html pagina opgemaakt, alles wat niet nodig weggehaald en de strook beweegt wel :-)
Helaas, zodra ik de code in mijn juiste pagina plaats, beweegt de strook niet meer.

deze code heb ik gebruikt:

<head>
<title></title>

<style type="text/css">
#fotos {
width: 773px;
height: 76px;
background: url(fotos.jpg);
}
</style>

<script type="text/javascript">
//<![CDATA[
// from: The Port-hole Theory > http://home.tiscali.nl/developerscorner/port-hole/porthole.htm
// uit: De patrijspoort-theorie > http://home.tiscali.nl/developerscorner/port-hole/porthole-nl.htm

var bgImgWidth = 1084 ; // width in px of the background-image
var panSpeed = 50 ; // millisec. between next
var startXpos = -50 ; // bg x-position starts at x=0 (for scriptless!)
var startYpos = 0 ; // bg y-position can stay at y=10

function panoramize() {
if (document.getElementById){
document.getElementById('fotos').style.backgroundPosition=+startXpos+'px '+startYpos+'px';
if ( startXpos >-bgImgWidth ) { startXpos = startXpos-.5 }; // moving to the left
if ( startXpos == -bgImgWidth ) { startXpos = 0 }; // until width of bg-img is passed, then again
}
}
window.onload = function(){
setInterval('panoramize()', panSpeed );
}
//]]>
</script>

</head>

<body>



<div id="fotos">
</div>


</body>
</html>


en vervolgens gekopieerd en zoeits is het geworden:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NIEUWS - HIJ</title>
<link href="code.css" rel="stylesheet" type="text/css">

<style type="text/css">
#fotos {
width: 773px;
height: 76px;
background: url(fotos.jpg);
position: absolute;
left: 60px;
top: 670px;
}
</style>

<script type="text/javascript">
//<![CDATA[
// from: The Port-hole Theory > http://home.tiscali.nl/developerscorner/port-hole/porthole.htm
// uit: De patrijspoort-theorie > http://home.tiscali.nl/developerscorner/port-hole/porthole-nl.htm

var bgImgWidth = 1084 ; // width in px of the background-image
var panSpeed = 50 ; // millisec. between next
var startXpos = -50 ; // bg x-position starts at x=0 (for scriptless!)
var startYpos = 0 ; // bg y-position can stay at y=10

function panoramize() {
if (document.getElementById){
document.getElementById('fotos').style.backgroundPosition=+startXpos+'px '+startYpos+'px';
if ( startXpos >-bgImgWidth ) { startXpos = startXpos-.5 }; // moving to the left
if ( startXpos == -bgImgWidth ) { startXpos = 0 }; // until width of bg-img is passed, then again
}
}
window.onload = function(){
setInterval('panoramize()', panSpeed );
}
//]]>
</script>


<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>




</head>

<body background="plaatjes/bg.jpg" onLoad="MM_preloadImages('plaatjes/hij01.png','plaatjes/trailer01.png','plaatjes/synopsis01.png','plaatjes/vorm01.png','plaatjes/cast01.png','plaatjes/crew01.png','plaatjes/regisseur01.png','plaatjes/nieuws01.png','plaatjes/contact01.png')">
<center>

<div id="container">

<div id="balkboven"><img src="plaatjes/balkboven.png"></div>

<div id="menu">
<a href="index.html"><img src="plaatjes/hij.png" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','plaatjes/hij01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="trailer.html"><img src="plaatjes/trailer.png" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','plaatjes/trailer01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="synopsis.html"><img src="plaatjes/synopsis.png" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','plaatjes/synopsis01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="vorm.html"><img src="plaatjes/vorm.png" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','plaatjes/vorm01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="cast.html"><img src="plaatjes/cast.png" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','plaatjes/cast01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="crew.html"><img src="plaatjes/crew.png" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','plaatjes/crew01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="regisseur.html"><img src="plaatjes/regisseur.png" border="0" id="Image7" onMouseOver="MM_swapImage('Image7','','plaatjes/regisseur01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="nieuws.html"><img src="plaatjes/nieuws01.png" border="0" id="Image8" onMouseOver="MM_swapImage('Image8','','plaatjes/nieuws01.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="contact.html"><img src="plaatjes/contact.png" border="0" id="Image9" onMouseOver="MM_swapImage('Image9','','plaatjes/contact01.png',1)" onMouseOut="MM_swapImgRestore()"></a> </div>

<div id="blok"><img src="plaatjes/blok.png"></div>

<div id="tekst">
24.07.2010<br>
Momenteel wordt er aan de trailer gewerkt.<br>
Ook worden er puntje op 'i' gezet van de film zelf.<br><br>

Het affiche is zo goed als af. <br>
Vanaf volgende week worden de flyer en de dvd hoes ontworpen.

</div>

<div id="fotonieuws"><img src="plaatjes/fotos/nieuws.png"></div>


<div id="balkonder"><img src="plaatjes/balkonder.png"></div>


<div id="fotos"></div>



</div>
</center>
</body>
</html>


Waarom beweegt het niet? :(

Groetjes
 
Laatst bewerkt door een moderator:
Dat komt omdat:
  • de filmstrook gaat bewegen dankzij de instructie in het javascript: window.onload = enz.,
  • je in de <body> tag óók een onLoad instructie hebt gezet, voor het preloaden van images.
  • de laatste wint! deze overruled die van het javascript.
Om alles na het loaden te bedienen, moet je het onLoad in de <body> weghalen, en aan het javascript toevoegen:
[JS]window.onload = function(){
setInterval('panoramize()', panSpeed );
MM_preloadImages('plaatjes/hij01.png','plaatjes/trailer01.png','plaatjes/synopsis01.png','plaatjes/vorm01.png','plaatjes/cast01.png','plaatjes/crew01.png','plaatjes/regisseur01.png','plaatjes/nieuws01.png','plaatjes/contact01.png');
}
[/JS]
Dat zou moeten werken.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan