Horizontale foto-film

Status
Niet open voor verdere reacties.
B

Beerts

Gebruiker
Lid geworden
3 mei 2010
Berichten
14
Dag allemaal,

ik moet voor school een website maken, nu wil ik zo'n film-strip op mijn website zetten http://www.aquaforum.nl/ maar ik heb al verschillende dingen van internet geprobeerd maar het lukt me niet. De website moet ook zonder fouten door de W3C-validator geraken. (http://validator.w3.org/)
Daarom kom ik dus hier mijn vraag stellen, ik hoop dat jullie me kunnen helpen.

Grtz, Dries
 
Die link die je erbij geeft doet het met javascript..
Ik weet niet in hoeverre er copyright op staat:o maar hier heb je de broncode van dat script ;)
 
Mm, dat aquaforum is in elk geval niet html-validator bestendig.
En Hallo Marie: wat een loei van een script voor zoiets eenvoudigs... :shocked:

Mijn tips (niet verder vertellen):
  1. Lees het artikeltje "De patrijspoort-theorie" > http://home.tiscali.nl/developerscorner/port-hole/porthole-nl.htm
  2. Kijk daarna in de broncode (v/a regel 77) hoe in de laatste figuur het javascript zorgt voor de deinende boot.
  3. En bekijk daarna deze testpagina (en broncode) voor een vereenvoudigd script, waarin er niet verticaal gedeind hoeft te worden: www.developerscorner.nl/csshunter/test-taampjes.htm - Die geeft valid html. :)
Succes!
Met vriendelijke groet,
CSShunter
 
Bedankt csshunter, het is me nu gelukt.
Maar ik had nog een vraagje, ik wil op elke pagina een andere foto reeks laten bewegen. Moet ik dan voor elke pagina een apart javascript maken? Of kan dit op een makkelijker manier?

Nu is het zo:
in de header: <script language="javascript" src="Javascript.js"></script>
in de body: <div id="raampjes">

</div>
en apart javascript bestand:

// 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 = 20 ; // millisec. between next
var startXpos = 0 ; // 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('raampjes').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 );
}

alvast bedankt
 
Hoi Dries,
Mooi dat het gelukt is! :thumb:
Moet ik dan voor elke pagina een apart javascript maken? Of kan dit op een makkelijker manier?
Klik om te vergroten...
Makkelijker! :D
Je kan het script, als dat nog niet gebeurd is, in een apart bestand beweeg.js (ik geef 'm maar een naam) zetten, dat op elke pagina in de <head> wordt aangehaakt:
HTML: 
<script type="text/javascript" 
     src="http://www.naamVanJeSite.nl/mapjeWaarIeInStaat/beweeg.js"></script>
Op deze manier hoeft het script maar 1 keer door de bezoeker gedownload te worden (zonder dat ie 't in de gaten heeft), en bij de volgende pagina is het script er al en hoeft alleen maar gerecycled te worden op de pc van de bezoeker.

Het script pakt steeds de <div id="raampjes"> bij zijn kladden, om de achtergrondfiguur daarvan over het scherm te trekken. - Maar het moet per pagina wel een andere filmstrook worden. Dus gaan we kijken waar deze wordt aangeroepen.

Die achtergrondfiguur (de strook) staat in de css:
Code: 
#raampjes {
	...
	background: url(images/strip1.jpg);
	}
We moeten er nu dus voor zorgen dat de css telkens een andere achtergrond-img/strook oppakt bij een andere pagina van de site.
Dat kan je met een slimme "css-wisseltruc" als volgt doen:
  • Elke pagina krijgt een <body id="..."> met een eigen ID.
  • Dus bv. <body id="pagina1">, <body id="pagina2">, <body id="pagina3">, enz.
  • Nu kan je de inhoud van de #raampjes gaan sturen met de css, want de C van CSS betekent Cascade (waterval), en alles wat onder een waterval staat, wordt nat. ;)
  • Als #raampjes voorafgegaan wordt door #pagina1, dan moet het strip1.jpg worden; maar als #raampjes voorafgegaan wordt door #pagina2, dan moet het strip2.jpg worden, enz.
Dus je zet in je css het rijtje van de verschillende filmstroken:
Code: 
#pagina1 #raampjes { background: url(images/strip1.jpg) }
#pagina2 #raampjes { background: url(images/strip2.jpg) }
#pagina3 #raampjes { background: url(images/strip3.jpg) }
enz.
Nu pakt het script telkens de strook die bij de pagina past. In het eerste geval blijven de strip2.jpg en de strip3.jpg droog, want die staan niet onder de waterval van #pagina1, en komen dus niet tevoorschijn. Enz.: klaar! :)

Succes!
CSShunter
 
Bedankt csshunter!!

Ik kan nu op elke pagina een andere strook laten afspelen, maar nu kom ik nieuw probleempje tegen :( Maar jij zal me wel kunnen verder helpen, niet? :D

Ik heb nu dus mijn definitie strook gemaakt, deze is ongeveer 4000 pixels groot. De strook loopt gewoon, maar als hij ongeveer in de helft zit begint hij opnieuw terwijl er nog een 8 foto's achter komen.

Weet jij het probleem?

Alvast bedankt!
Dries

EDIT: heb het gevonden, ik heb gewoon in het javascript bestand de bgimgwidth veranderd, klopt dit dan?
csshunter bedankt voor alle hulp!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan