afbeelding vergroten via mouse over

Status
Niet open voor verdere reacties.
Dat soort dingen kun je beter op een klik doen, anders krijg je problemen met de layout die de hele tijd rare dingen doet. Kijk eens naar Lightbox. Das een redelijk standaard oplossing voor dit probleem, en ook wel een van de beste.
 
Ja, dat zijn leuke voorbeelden.
Je kan dus heel goed css-hovers bouwen zonder dat de layout in elkaar stort.
In de meest simpele gedaante:
  • Hovering with css popup (2)
  • In elke link zit een <span> met de (grote) afbeelding, die normaal niet getoond wordt, maar via de css bij een hover op zijn plaats komt.
  • Het is daar gedaan met tekst-links, maar dat kunnen ook de thumbnails zijn.
  • Zie verder de broncode voor hoe het gedaan is.
Vergelijkbaar met javascript:
Of met overvloeiers bij een klik:
Je kunt het zo gek niet verzinnen of het kan. :)
(ook zonder uitgebreide javascript-bibliotheken als jQuery; de scriptjes hierboven zijn super-klein)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Houd er wel rekening mee dat die files allemaal geladen worden als je de pagina opent. Met een paar files kan dat nog wel, maar met een hoop images op een pagina gaat het een hoop data trekken en je pagina load-time flink verlagen.

Wel een coole feature overigens, die kende ik nog niet.
 
Frats zei:
Houd er wel rekening mee dat die files allemaal geladen worden als je de pagina opent. Met een paar files kan dat nog wel, maar met een hoop images op een pagina gaat het een hoop data trekken en je pagina load-time flink verlagen.

Wel een coole feature overigens, die kende ik nog niet.
Klik om te vergroten...

Wat bedoel je met een hoop images en is dat aantal per pagina? Mijn grote foto's zijn +/- 450 kb.

Ik moet het geheel in de loop van de week eens goed bekijken want op mijn leeftijd is dit niet allemaal gesneden koek maar eerder een uitdaging.
 
Ja per pagina. Je kunt de plaatjes dan wel niet zien als je de pagina opent, maar ze worden wel ingeladen door de gebruiker. Dus als je 100 plaatjes op je website hebt van 450kb elk, dan lijkt er weinig op je pagina te staan als een gebruiker hem opent, maar hij moet wel 100x450kb = 45mb downloaden.
 
Houd er wel rekening mee dat die files allemaal geladen worden als je de pagina opent.
Klik om te vergroten...
Ja, dat geldt voor de css-hover methode. Dan worden de grote images meteen al bij het downloaden van de pagina meegenomen - ze zijn alleen met css tijdelijk buiten het gezichtsveld geplaatst (totdat je hovert).
Met 14 afbeeldingen van ca. 450kB (zoals op de pagina tram_4.html) is dat samen zo'n 6,3MB.
Dat zal niet allemaal meteen beschikbaar zijn op het moment dat je gaat hoveren... :confused:

Maar ... dat geldt niet voor de javascript-methode van het Hover-Wissellijstje met javascript. :)
Daar worden alleen de kleintjes en het eerste grote image binnengehaald bij het openen van de pagina.
Pas als je over een kleintje hovert, wordt de betreffende grote gedownload. Dat geeft per stuk iets downloadtijd (net als bij een klik-vergroting), maar je hoeft niet te wachten tot eerst alles binnen is.

Maar nu ik de site nog eens bekijk, denk ik dat er bij het hover-idee nog iets heel anders gaat spelen: ruimtegebrek!
Ik kom daar binnenkort op terug.

Met vriendelijke groet,
CSShunter
__________
PS: ha, dat was een halve kruispost. Het eerste deel had Frats al verklaard, zie ik bij het inzenden. ;)

(edit)
Om alvast een alternatief te bekijken: deze website-galery.php, die heel erg lijkt op de tram-pagina's.
Makkelijk in de html te zetten, scriptje van 4.5kB nodig, niks geen jQuery perikelen.
Foto-formaat van de grote past zich automatisch aan aan het formaat van het beeldscherm: altijd zo groot mogelijk.
De grote worden ook hier pas gedownload als ze nodig zijn.
Dus goed voor honderden of duizenden thumbnails op een pagina. ;)
(/edit)
 
Laatst bewerkt:
@csshunter: De laatste toepassing lijkt voor mij de meeste mogelijkheden te geven alhoewel de andere oplossingen ook goede punten hebben en ik dank iedereen die meegewerkt heeft om mijn probleem op te lossen.

Door enkele vroeger gemaakte afspraken zal hjet waarschijnlijk pas overmorgen zijn dat ik het kan uitproberen maar ik laat zeker het resultaat weten.

Iedereen nogmaals bedankt en uiteraard mogen nieuwe suggesties nog volgen.
 
Ik denk dat inderdaad HTML en Javascript het beste zijn om mijn website aan te passen, ik ga nu wat experimenteren om vanaf januari 2012 met een nieuwe layout te beginnen.

Nogmaals dank aan iedereen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan