foto-carrousel in IE7 en voorgaande versies

Status
Niet open voor verdere reacties.
G

gast0515

Gebruiker
Lid geworden
4 jan 2010
Berichten
134
Hallo,

deze slideshow wordt niet goed weergegeven in IE7 en voorgaande versies:
http://developerscorner.nl/css-exercitions/foto-carrousel.php

Het eerste plaatje blijft heel lang staan terwijl de volgende plaatjes netjes vloeien en blijven wat korter staan (juiste aantal seconden, aangegeven in de code).

Hoe zorg ik dat het eerste plaatje evenlang (evenkort) blijft staan als de rest?

Groet, gast0515
 
Laatst bewerkt door een moderator:
Hoeps! :rolleyes: - Ja, dat klopt (en had ik ook al eens gemerkt).
Zal proberen te achterhalen waar dat in kan zitten (in het script dus ;) ), maar weet niet of ik 't vlot kan vinden.
Wordt vervolgd!

Met vriendelijke groet,
CSShunter
 
wellicht een tip voor een andere, deze keer overal goed werkende code?
slideshow met fade-in en fade-out?
 
Laatst bewerkt door een moderator:
Hoi gast0515,
Wat bedoel je precies met fade-in en fade-out?
Nu:
  1. actueel plaatje staat er,
  2. infaden van volgend plaatje over het actuele plaatje.
  3. enz.
Anders:
  1. actueel plaatje staat er,
  2. uitfaden van actueel plaatje naar achtergrond(kleur),
  3. infaden van volgend plaatje vanaf achtergrond(kleur).
  4. enz.
Bij de laatste zit er dus een tussenperiode in: de overgang verloopt "over de achtergrond(kleur)". Kan ook, maar dan kan de kijker de indruk krijgen dat er nogal lang gewacht moet worden voordat het volgende plaatje er is. Voor een plaatjes-wisselaar lijkt me dat niet zo mooi: het ene plaatje gaat dan niet soepel over in het andere plaatje, maar valt eerst in het "gat" van de achtergrond (hangt natuurlijk ook af van type plaatjes, achtergrondkleur/achtergrond-img, enz.).

- Eerst maar eens de directe overgang in orde zien te krijgen. ;)
Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt door een moderator:
Hoi gast05150 (en anderen),
Alhier een geheel herziene versie:
De eerste afbeelding staat nu net zo lang in beeld als de volgende.

Veranderd:
  • Wisselsysteem nu d.m.v. background-img (i.p.v. wisseling z-index van twee boven elkaar geplaatste voorgrond-images): eenvoudiger.
  • Verbeterde functie fadeIn().
  • De "document.write()" preambule in de html is ingekort.
  • Er zijn geen id's (id="thumb-1", id="thumb-2" enz.) meer nodig in de html.
  • Edit: in de html mag de <body>-tag géén onload="..." meer krijgen: alleen <body> is genoeg.
  • De html linkt uiteraard naar het nieuwe script.
  • Verder kan de html hetzelfde blijven. :)
  • Ook de css is hetzelfde. :)
Ergo bij een al bestaand carrousel: nieuw script uploaden, <body>-tag aanpassen, link in de html aanpassen, en de zaak draait.

Browsers:
  • IE6, IE7, Firefox, Opera, Safari en Chrome doen het hiermee goed.
  • IE8 en IE9 kan ik nu niet testen.
Hiermee wordt de vraag: kan iemand vertellen hoe dit script het er in IE8 en IE9 van af brengt?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt door een moderator:
Ik beantwoorde de laatste vraag van CSSHunter om zijn herziene versie te testen onder IE8 en IE9...
 
Mooi zo, dan kan ik alvast IE9 erbij zetten in het rijtje "o.k. bevonden": is gebeurd. :)
Nu IE8 nog: wie kan 'm testen?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik zit nu bij een kant ingebeld en dat is nog een 2003 server waar IE9 niet op draait. Ik test hem daar in IE8 en het duurt erg lang voordat de plaatjes wisselen. Op het moment dat de site open staat reageert de server ook bijna nergens meer op dus ik denk dat dit door de internetsnelheid/RDP verbinding komt. Bewegende plaatjes/filmpjes over een adsl lijn via RDP is altijd een lastig verhaal.

Lijkt dus goed te werken in IE8.
 
Beste CSShunter, dank voor de nieuwe code

wat moet ik nu vervangen?
De hele .js bestand in ieder geval.

De html is ook aangepast naar code zonder id="thumb-1", id="thumb-2" enz.
Moet het ok vervangen worden?

Ik heb zojuist alleen maar .js vervangen. Daarna werkte de slideshow niet meer (1te plaatje blijfts staan).

gast0515
 
Laatst bewerkt door een moderator:
Hé, dat is niet de bedoeling!

Als je alléén het script vervangt door het script met de nieuwe naam carrousel_vs2.js, zal je in je html ook de link naar dit script moeten aanpassen.
Als je het nieuwe script geüpload hebt en hernoemd hebt naar de oude naam carrousel.js, dan hoeft dat uiteraard niet.
  • Het schrappen van thumb-1 enz., en het schrappen van een paar regeltjes uit het document.write() script in de html is facultatief: zonder het schrappen werkt het ook.
O, wat het ook nog zou kunnen zijn: de carrousel-script is in de <head> gezet, en niet helemaal onderaan, vlak voor de </body>. Dan werkt het ook niet. Dat komt omdat er een automatische start in zit (om een "onload"-trigger te vermijden, die een "onload" van een eventueel ander script op de pagina zou kunnen torpederen). Als het script in de <head> staat, gaat het script op zoek naar een aantal id's in de html - maar op dat moment heeft de browser de html nog helemaal niet gezien. Dat geeft dus panne!

Is dat het?
Zo niet, heb je dan een link naar het niet-werkende carrousel? En in welke browser(versie) is dat? Of doet ie het in allemaal niet?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
nope, het doet het niet.
Ik heb het op een van 100 pagina's veranderd;

- Ik heb de oude code van de carrousel.js vervangen met de nieuwe (carrousel_vs2.js).

- De <script type="text/javascript"> etc. heb ik ook tussen de <head></head> vervangen.

- Ik heb niets aan de html code veranderd
<div id="carrousel"><!-- dit is nodig voor het carrousel -->
<ul>
<li><a href="#aha"><img title="Klik voor ..." .......

Op de pagina waar alles (lees boven) aangepast is wordt het 1te plaatje niet gevonden
Andere pagina's geven weer 1te plaatje maar de slideshow loopt niet (het blijft op het 1te plaatje staan).....
Ik bekijk het op de mac....safari, opera en firexos lezen het dus niet
 
Snap niets van...
Heb je een link naar zo'n pagina?
En zijn er anderen die er op een Mac ook problemen mee hebben?
 
Oh! Ik zie een domme fout van mij. :o
In de oude versie stond er in de html:
HTML: 
...
</head>
<body onload="readImageNumber();carrousel();"><!-- dit is nodig voor het carrousel -->
...
Bij de herziene versie moet dat niet (die start automatisch, en de functie readImageNumber() bestaat niet meer), daar moet het gewoon zijn:
HTML: 
...
</head>
<body>
...
Dat was ik vergeten te melden in de gebruiksaanwijzing van reactie nr. #7!
  • Heb het er maar flukskes bij gezet. ;)
Is dat de oplossing?

Met vriendelijke groet,
CSShunter
________
PS
In de html van het voorbeeld ook nog een schoonheidsfoutje weggewerkt: het inline script moest nog voorzien worden van het "cdata" geval; anders valideert ie niet als je 'm in xhtml Strict gebruikt i.p.v. in html4.01.
 
Laatst bewerkt:
aaaaaaaaaaa..... ;)
Ik ga het uitproberen.
Dank dank dank

gast0515
 
Laatst bewerkt door een moderator:
Nog een kanttekening!
Als het carrousel wel loopt, maar het 't enige probleem is, dat de eerste afbeelding veel langer blijft staan dan de volgende, kan het ook aan de omvang van het carrousel liggen. De volgorde is namelijk:
  • de html volgen: eerst css, html en images downloaden,
  • dan het script inladen (dat kan niet eerder; maar dat gaat heel snel, want het is maar 3kB groot),
  • dan het script zichzelf laten triggeren om het carrousel op te starten;
  • daarom heeft de eerste infader in de 2e versie een wat kortere (95%) wachttijd gekregen dan als het carrousel eenmaal loopt (en alle afbeeldingen dus al aanwezig zijn).
Als je nu een loeigroot carrousel hebt van tientallen afbeeldingen, moeten die afbeeldingen allemaal eerst gedownload worden, en dat kost tijd > daarna kan het carrousel pas gaan werken.
Elke afbeelding moet apart opgevraagd worden bij de server: dat zijn dus allemaal afzonderlijke http-requests (en dat is uploaden vanaf de bezoeker, wat aanzienlijk trager gaat dan downloaden!).
  • Stel je hebt 40 afbeeldingen van elk ca. 45kB, dan is het totaal: 1800kB = 1,8MB. :rolleyes:
Dan hangt het erg van de verbindingssnelheid van de bezoeker af, hoe snel de afbeeldingen binnen zijn; lees: wanneer het carrousel van start gaat.

Maar hier valt wel wat aan te doen: je kan de wachttijd voor de eerste wisseling bekorten, door de .95 in het script nog wat omlaag te schroeven.
[JS]var t = window.setTimeout('fadeIn()', pause*.95); // start[/JS]
  • Omdat het afhankelijk is van de verbindingssnelheid (die je niet weet), zal er nog steeds een verschil bij bezoekers met diverse snelheden zitten.
  • Maar als je de verkortingsfactor instelt bij een snelle verbinding, loop je in elk geval niet het risico dat de eerste afbeelding veel korter duurt dan de rest van het carrousel! ;)
En waarschijnlijk valt het de bezoekers niet eens op, dat de eerste afbeelding wat langer in beeld staat: want bij het openen van een pagina is er veel méér te zien dan het carrousel.
En dat moet de bezoeker ook in zich opnemen, alvorens de aandacht naar het carrousel kan gaan. :)

Met vriendelijke groet,
CSShunter
___________
PS;
Nu zou je het script zodanig kunnen maken, dat een afbeelding pas opgevraagd wordt als het nodig is. Dan gaat die wachttijd van het begin er van af.
Maar dan is het principe van dit carrousel verdwenen: de bedoeling van dit carrousel is dat het óók moet werken als javascript uit staat (en dat doet het dan niet).
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan