Hoi Laura,
Allereerst een puik 2013 toegewenst, en Naarling en anderen ook!
En dan: hola-die-ola-gladiola! :shocked:
Ik had vanwege vakantietijd, feestdagen en wat andere bezigheden een paar dagen geen helpmij-mail meer gelezen - en nu zie ik dat je intussen in de weer bent met
een andere slideshow
dan "de slideshow die je zag in de link die precies was wat je bedoelde" waarmee ik beloofd had je te zullen helpen.
- Met die jQuery
s3Slider zal je denk ik minstens dezelfde problemen tegenkomen als die bij m'n carrousel-script optreden, en die zijn bij jQuery hoogstwaarschijnlijk veel moeilijker op te lossen.
- Eén van mijn andere bezigheden was namelijk: eens flink op mijn hoofd krabben toen ik je afbeelding van het gewenste resultaat zag.
Dat is niet "ik zou het op mijn site wel kleiner doen dan het voorbeeld:
cannondale.com/bel" zoals je eerst zei in je vraag nr. #1, maar heel wat anders: een schermbrede show!
Sterker nog,
je afbeelding ("De slideshow moet komen waar nu het grote grijze vlak is") is 1570 bij 780px: dat vraagt om een schermresolutie van 1600 x 900px of hoger. Die hebben sommigen misschien, maar ik niet (ik zit op 1280*1024px), en veel bezoekers zullen ook geen breedbeeldscherm hebben.
en
(bij 1920x1080 en 1600x900 gaan de browser-balken er nog van af)
Bij 1280x1024 zie je bij opening van de pagina 1/3 gedeelte van het menu niet (en ook niet van de afbeelding die er onder zit): je moet eerst naar rechts scrollen. Bij het wisselen van afbeelding krijg je hetzelfde: het rechterdeel ervan is niet te zien zonder scrollen.
Bij lagere resoluties / kleinere schermen (of kleiner gemaakte windows) wordt dit steeds erger:
Bij 1024x768 valt het menu al bijna helemaal buiten boord, en bij 800x600 of lager is het hele menu niet te zien zonder scrollen.
Over mobieltjes zullen we het maar niet hebben: voor je goed en wel van links naar rechts bent gescrolld (twee keer: ook nog met een verticale scroll voor de onderste helft), zal de volgende afbeelding al lang de eerste vervangen...
=======
Dat vraagt dus om een aangepaste layout, waarin de afbeelding en het menu er altijd op komen te staan.
En dat is niet zonder complicaties...
Het carrousel-script maakt gebruik van één formaat afbeelding, en dat kan prima als de afbeeldingen niet schermvullend moeten zijn.
Het overvloeien van de ene naar de andere afbeelding gaat door steeds de oude afbeelding er onder te zetten als background-image: dan hoeft alleen de nieuwe in te faden. *)
Ga je nu de afbeelding schaalbaar maken (om op de schermbreedte uit te komen), dan zou het background-image dus ook mee moeten schalen - maar zonder css3 kan dat niet, en lang niet alle nu gebruikte browsers ondersteunen dat.
Er moet dus een aanpassing in het script komen, waarbij de "oude afbeelding" er telkens in komst als voorgrond-image en niet als background-image - maar wel in een laag onder de nieuwe afbeelding, zodat die er overheen kan infaden.
Zo zijn er nog meer complicaties...
- Tooltips als je over een afbeelding hovert, zijn alleen even tijdelijk te zien. Maar als je wilt doorklikken, moet je wel kunnen zien waar je naar toe gaat. Bovendien: bij een wisseling van afbeelding met duidelijk worden dat de nieuwe naar een andere klik-pagina gaat. En niet in het minst: de bezoekers moet überhaupt weten dat op de diavoorstelling geklikt kan worden, want vaak is het alleen maar plaatjes kijken. Hier moet iets op verzonnen worden.
- Om schaalbare afbeeldingen te krijgen, moet het script de maat nemen van het gebruikte scherm van de bezoeker, en ook de breedte/hoogte verhouding van de afbeeldingen kennen. Maar het downloaden van een (groot formaat) afbeelding duurt altijd even, en intussen mag het script nog niets doen: want zonder maten kunnen de afbeeldingen ook niet aangepast worden (en het scherm moet nog even leeg blijven). Hier moet iets op verzonnen worden.
- Om daarna, flats, een schermgrote afbeelding te krijgen is niet zo mooi: de eerste zou ook moeten infaden. Hier moet iets op verzonnen worden.
- Het menu, dat boven de afbeelding komt te hangen, mag er niet zijn voordat de eerste afbeelding er is: dat is foeilelijk. Dat zou erna pas moeten komen en zou liefst ook moeten infaden. Hier moet iets op verzonnen worden.
- Het menu heeft een bepaalde hoogte, en om de menu-blokjes mee te laten schalen is een heel karwei. En: bij kleinere schermen zou het menu dan heel klein worden en niet meer leesbaar. Dus het menu moet weer wel een vaste hoogte hebben. Maar dan past het er bij kleinere schermen in de hoogte niet op: dan zou (a) het menu onder de afbeelding uit komen, en (b) zouden de bezoekers moeten scrollen om het hele menu te kunnen zien. Hier moet iets op verzonnen worden.
- Bij schermen op landscape-stand moet de vlakverdeling ook een beetje mooi zijn. Hier moet iets op verzonnen worden.
- Er moet dus een aangepast (lees: totaal nieuw en vrij gecompliceerd) script komen, plus aangepaste css om het in goede banen te leiden; terwijl bezoekers zonder javascript ook nog iets moois van de voorstelling moeten kunnen zien.
- En wat ook meespeelt: alle browsers moeten er goed op reageren. Dat is niet alleen Internet Explorer (die tijdens het laden een scrollbar midden op de pagina laat zien), maar ook Firefox (die tijdens het laden een lege pagina met zowel een verticale scrollbar rechts als een horizontale scrollbar onderop laat zien) en op een ander punt Opera (die weigert de menu-onderdelen te laten infaden).
- Enz. enz.!
=======
Afijn, problemen zijn er om opgelost te worden. :d
Dus stapje voor stapje en hobbelend van de ene naar de andere versie aan het bouwen geslagen. Ik was je dus niet vergeten!
Maar het was even flink stoeien en nam wel wat tijd in beslag.
Als resultaat:
- Testpagina: klikbare altijd paginabrede slideshow met menu
- Na verandering van resolutie/window-formaat: even de pagina in de browser vernieuwen (refresh/reload) om de aangepaste versie te zien.
- Dit is een halffabricaat: script en css moeten nog gefatsoeneerd worden.
(achtereenvolgens: 1280 x 1024 / 1024 x 768 / 800 x 600 / mobiel landscape / mobiel portretstand)
=======
Het enige wat hiervoor moet gebeuren, is de supereenvoudige html-code maken met de vindplaats van de afbeeldingen:
HTML:
<div id="carrousel">
<ul>
<li><a href="pagina-1.htm" title="klik voor pagina: Les Houches">
<img src="images/les-Houches-1000x500.jpg" alt="" /></a>
</li>
<li><a href="pagina-2.htm" title="klik voor pagina: La Chapelle d'Abondance">
<img src="images/la-Chapelle-d-Abondance-1000x500.jpg" alt="" /></a>
</li>
<li><a href="pagina-3.htm" title="klik voor pagina: Refuge d'Antème">
<img src="images/refuge-d-Anteme-1000x500.jpg" alt="" /></a>
</li>
<li><a href="pagina-4.htm" title="klik voor pagina: Vallée d'Abondance">
<img src="images/vallee-d-Abondance-1000x500.jpg" alt="" /></a>
</li>
<li><a href="pagina-5.htm" title="klik voor pagina: Col de l'Écuelle">
<img src="images/col-de-l-Ecuelle-1000x500.jpg" alt="" /></a>
</li>
</ul>
</div>
<div id="bijschrift"></div>
<div id="menu">
<ul>
<li><a id="knopHome" href="index.htm" title="Home">
<img src="images/slideshow-menu-home.png" alt=""><span>Home</span></a>
</li>
<li><a id="knopZoeken" href="zoeken.htm" title="Zoeken">
<img src="images/slideshow-menu-zoeken.png" alt=""><span>Zoeken</span></a>
</li>
<li><a id="knopContact" href="contact.htm" title="Contact">
<img src="images/slideshow-menu-contact.png" alt=""><span>Contact</span></a>
</li>
<li><a id="knopVerleden" href="het-verleden.htm" title="Het verleden">
<img src="images/slideshow-menu-verleden.png" alt=""><span>Het verleiden</span></a>
</li>
<li><a id="knopFaq" href="faq.htm" title="FAQ">
<img src="images/slideshow-menu-faq.png" alt=""><span>FAQ</span></a>
</li>
<li><a id="knopInhoud" href="inhoud.htm" title="Inhoud">
<img src="images/slideshow-menu-inhoud.png" alt=""><span>Inhoud</span></a>
</li>
</ul>
</div>
Verder verzorgen het script & bijbehorend css dat alles vanzelf goed komt, daar hoeft niets mee te gebeuren.
De
title die je bij de links van het carrousel zet, wordt automatisch als bijschrift op het scherm opgenomen: midden onderaan de afbeelding.
O ja, mijn afbeeldingen zijn dus allemaal 1000 x 500px (dat geeft bij full-color niet zo'n grote bestandsgrootte; varieert met wat jpg-compressie van 83kB tot 142kB): ze worden wat opgeblazen bij grote schermen, en ze krimpen bij kleine schermen.
Met vriendelijke groet,
CSShunter
_______
*) Deze manier van overvloeien van de ene in de andere afbeelding is een essentieel verschil met andere sliders!
Eigenlijk alle andere carrousels/sliders die ik ken (en ook de jQuery-sliders) hebben
geen echte overvloeiers van de ene naar de andere afbeelding. De eerste afbeelding krijgt een snelle fade-out naar de background-kleur van de pagina of container, en daarna komt de nieuwe afbeelding infaden vanuit die background-kleur. De wisseling gaat dus meestal "over wit"; zie bv. de
demo s3Slider.
- Bij afbeeldingen in alleen lichte tinten valt dat misschien niet zo op, maar als er plaatjes met een donkerder tint in zitten wel: en dat is niet erg mooi.
- Als je alleen afbeeldingen in donkere tinten hebt, kan je er een donkere achtergrond achter zetten, dan wordt het iets beter.
- Met lichte en donkere afbeeldingen door elkaar valt het met een grijze background niet op te lossen; dat zit er wel tussenin, maar is ook niet mooi.
- En heb je afbeeldingen die zowel licht als donker hebben (meestal!), of heb je afbeeldingen die erg met elkaar van contrast of donkerte verschillen, dan is er altijd een schok-effect.
- Hoe groter de afbeelding (en zeker bij schermbreed), des te meer dat opvalt!
Andere sliders maken de wisseling door de afbeeldingen van rechts naar links door te schuiven, wat ik eerlijk gezegd helemaal een lelijk gezicht vind. Als bezoeker van een site wil ik helemaal geen afbeeldingen zien die zonder het mij te vragen opeens voor mijn neus heen en weer gaan schuiven!
[edit]oeps![/edit] Op het allerlaatste moment is toch nog iets fout gegaan met de no-script die ingebouwd zit (de voorafgaande 2700 versies waren in orde); nog werk aan de winkel ...
