Meerdere foto's van een object.

[hendrikbraaf]

Ik wil graag meerdere foto's van een object op een webpagina zetten zoals men dat doet op marktplaats.nl, m.a.w. als men over met de muis op een afbeelding gaat staan wordt deze vergroot.
Hopelijk ben ik duidelijk genoeg.
Is hier een html-code voor?

 

[csshunter]

Hoi hendrikbraaf,
Je kan eens kijken of lightbox iets voor je is.

Met vriendelijke groet,
CSShunter

 

[hendrikbraaf]

Dank voor de reactie, maar dit is toch niet helemaal wat ik zoek.

 

[csshunter]

Hoi hendrikbraaf,

• Zoiets dan? wissellijstje-met-javascript.php (kan ook een javascript hover-versie van gemaakt worden)
• Of iets als dit? Hover-vergroot
• Of zoiets? Hovering with css popup
• Of zoiets? Stedelijke Basisschool Tuilt

Er zijn wel 5.000 manieren om een vergroting te presenteren, dus als deze 4 het ook niet zijn: wat wil je dan precies?
En waar zit de vergroting op marktplaats, die je noemde?

 

[hendrikbraaf]

Kijk op deze url:

http://fietsen-brommers.marktplaats...qO&fta_ind=36&fs=1&thumb_click=1#photoGallery


Scroll op de pagina naar beneden en bij de foto's kun je zien wat mijn bedoeling is...
Het wissellijstje-met-javascript komt er wel in de buurt dacht ik zo

 

[csshunter]

Aha, dan staan er denk ik twee wegen open:

1. Het Wissellijstje-met-javascript omzetten in de gewenste opmaak, en het script omzetten in een onmouseover-functie ipv een onclick-functie.
2. De Hovering-with-css-popup omzetten in de gewenste opmaak (die lijkt er nu niet erg op, maar is er vlot van te maken).

Beide hebben zo hun voors en tegens.

Javascript

• Pro: de grote afbeeldingen hoeven pas ingeladen te worden als er gehoverd wordt. Grote afbeeldingen die niet geraakt zullen worden hoeven niet gedownload te worden.
• Pro: vooral belangrijk als er veel foto's zijn, of als de grote erg groot zijn en/of een grote kleurdiepte hebben (> veel kB's). Ook afhankelijk van het doel: als het alleen foto's voor op scherm zijn, hebben ze minder resolutie nodig dan als het foto's zijn die gedownload moeten kunnen worden om te printen.
• Pro: de functies kunnen buiten de html gehouden worden, wat de html eenvoudiger maakt; bij meer van dergelijke foto-pagina's kan hetzelfde javascript-bestand gerecycled worden.
• Contra: het duurt telkens heel eventjes om een grote te downloaden en te tonen (weer afhankelijk van grootte).
• Contra: werkt niet als javascript uit staat. Op te vangen door een link op de thumbnails te zetten, die de grote op een nieuw tabblad toont als javascript uit staat. Of in dezelfde browser-tab als de pagina. In beide gevallen moet de bezoeker dan een extra handeling verrichten om terug te komen (nieuw tabblad sluiten, resp. terug met de terugknop van de browser). En in beide gevallen moet de grote foto het dan zonder opmaak of bijschrift stellen (tenzij je voor elke grote afbeelding een geheel nieuwe html-pagina gaat maken...)
• Contra: bij een extern javascript moet een extra http-request gemaakt worden.

CSS-hover

• Pro: werkt altijd.
• Pro: als de pagina eenmaal binnen is, worden de grote foto's bij een hover op de thumbnails direct getoond.
• Pro: de hover-functie zit in het stylesheet, dat er toch al is en geen extra http-request nodig heeft.
• Contra: alle grote afbeeldingen worden meteen gedownload (in feite: gepreload), kan wat vertraging van de pagina opleveren.
• Contra: een grote afbeelding blijft niet staan als je van een thumbnail af gaat (zoals bij het marktplaats-voorbeeld). Dwz er moet een default-img (of een of andere background) zijn om te tonen als er niet gehoverd wordt.
• Contra: de html wordt wat ingewikkelder.
• Contra: vooral nadelig als er veel/zware grote afbeeldingen zijn, die meteen getoond moeten kunnen worden (anders kunnen de grote images, als background-images, op het laatst van het renderen ingevoegd worden, zodat de rest van de pagina al op scherm staat).

Met vriendelijke groet,
CSShunter
__________
PS: Bij marktplaats hebben ze het pittig ingewikkeld gedaan met erg veel jQuery en script-werk. Dat lijkt me overbodig. Verder zullen er in hun CMS ook de nodige aanvullende php-scripts zitten om de image-locaties er automatisch in te zetten (maar dat kan je aan de broncode niet zien).
Want ik denk niet dat er iemand 24/7 in de marktplaats-toko zit die met de hand de vindplaatsen van de thumbs en grote fotos in de html-code zit te kloppen.