Hoi Luuk,
Prettig dat ie bevalt! Is m'n gekl**i niet voor niks geweest.
Een blik in de broncode leerde:
- Op regel 192 staat </head>
- Op regel 194 staat <body>
- Op regel 196 staat <div id="container">
- ...enz.
- Op regel 244 staat </head>
- Op regel 246 staat <body onload="...">
- ...en daarna het carrousel
Maar twéé hoofdeinden en twéé body's in één html-pagina: dat kan niet goed gaan.
(en één hoofdeind en twee body's kan heel gezellig zijn, maar zelfs dat mag niet in html-code.)
Verder horen de regels 226 t/m 239 (het script met de pauze-instelling en de afwijkende styles voor als javascript aan staat) wel degelijk in de echte (eerste) <head> te staan, en niet midden in de <body>-codes.
Bedoeling is nl., dat deze styles vooraf -- voordat de pagina gerenderd wordt -- de styles uit het stylesheet de wind uit de zeilen gaan nemen.
En in de <body> mogen geen style-blokken neergezet worden, alleen in de <head>.
Als je de html-validator raadpleegt (altijd aan te raden als iets niet werkt; en ook als iets wel werkt, trouwens), dan zie je dat die stevig begint te
mopperen. Klopt dus als een zwerende vinger!
Maar de validator is positief kritisch ingesteld: hij geeft er ook altijd suggesties voor verbetering bij.
Wat ik er nog niet bij verteld had, was dat de id's van de afbeeldingen in het carrousel systematisch "
thumb-1", "
thumb-2", enz. genoemd moeten worden.
Dat is voorwaarde om de css en het script te laten werken, want die komen op deze namen terug. Het script gebruikt bv.
'thumb-'+i+'', en daarin wisselt de variabele
i om steeds een andere foto te nemen.
Zonder deze naamgeving komt het hele carrousel niet tevoorschijn!
In de css moesten bij
#carroussel img {...} nog even de correcte echte maten van je foto's opgegeven worden (niet de berekende breedtes en hoogtes van de containers waar ze in zitten), en met nog wat correctie van een paar schoonheidsfoutjes wordt het dan:
Mijn verzuchting:
... blijken IE6 en IE7 te stremmen ... ik zie het voorlopig somber in voor deze twee.
blijkt te kloppen. Ik heb even wat nageplozen, en het blijkt een "bekende bug" in IE6 en 7 te zijn: de "
Explorer z-index bug".
Het komt er op neer, dat afbeeldingen die verderop in de html staan, zich bij deze twee niets van de z-index (= getal wat de laag-volgorde aangeeft) aantrekken, en altijd de laatste afbeelding bovenop zetten. dat gaat goed bij de foto's t/m de laatste, maar bij de switch naar de eerste ligt de eerste "er onder" (zit eerder in de html), en wordt dus niet getoond totdat de laatste echt weggehaald wordt (maar dat gebeurt pas na het infaden), anders vloeien ze niet mooi over.
Aan deze bug valt heel soms wat te doen, maar veel vaker ook niet, las ik. In ons geval niet; tenminste ik heb verschillende gesuggereerde bug-neutralisators er op losgelaten, en die werken allemaal niet. - Ik denk dat IE6 en IE7 gebruikers daar maar mee moeten leven, want het zou toch langzamerhand tijd worden dat ze de update naar IE8 maken: ook voor hun eigen veiligheid. Of gewoon een betere browser.
Ik zie nog wel een klein gaatje om IE6 en 7 ook in het gareel te krijgen: gaan werken met wisselende voorgrond- en achtergrond-afbeeldingen. Maar daarvoor zou het hele script herschreven moeten worden....
@Lunanoko:
Maar meteen wel een mooie huiswerkopdracht voor jou, als je je in javascript gaat verdiepen:
"Gebruik het carrousel-script, en schrijf dit om zodat een plaatje op de voorgrond, na het infaden, een achtergrondfiguur wordt, waaroverheen dan telkens de volgende foto zijn fade-in kan krijgen."
En weer @Luuk:
Ik gebruik overigens Safari maar ik neem aan dat dat geen probleem zou moeten zijn.
Een prima aanname! - Maar als je een site maakt, is het altijd aan te bevelen die steeds in meer browsers te testen. - Je kan verschillende browsers naast elkaar geïnstalleerd hebben staan (ze bijten elkaar niet), en bij ontwerp-klusjes rammel je die dan steeds allemaal af. Voor het gewone werk gebruik je dan je standaard-bowser.
Aardig dat je een logo-link naar mijn site (is ook wel eens aan een update toe...) wilt maken. Je zou
deze daarvoor kunnen gebruiken (oogt ook prettig op donkere achtergrond).
Succes weer!
CSShunter