hover afsluiten met muisklik

[thunder7]

Ik zit met een klein probleempje:

ik wil een set foto's laten zien. Als de muis er op komt, wordt er een vergroting getoond (met :hover). Als de muis er weer af gaat (dus van zowel hover als van het plaatje) gaat de vergroting weer weg. Dat werkt prima. Maar, om op kleine schermen effectief te zijn, wil ik dat de vergroting eigenlijk bijna het hele scherm inneemt. Om dan de vergroting weg te krijgen is natuurlijk lastig, omdat er geen ruimte is om de muis er 'naast' te bewegen.

Is er ook een manier om het tonen van de vergroting te beëindigen door op een link/knop in de vergroting te klikken? Zoiets moet er denk ik wel zijn, maar het lukt me niet om de juiste zoektermen in te geven - ik krijg allerlei verhalen over hoe ik een close button moet weergeven op het plaatje,

Wie weet waar ik moet kijken?

Bedankt,
Jurriaan

[eXtreaL]

Zou je een Codepen of JSFiddle kunnen maken met een voorbeeld zoals je het nu hebt gedaan? Anders kunnen we denk ik niet veel met deze vraag.

[TERW_DAN]

knoop een onlick event aan dat element en dan ben je er. Dat event kan hetzelfde doen als de onmouseout.

[thunder7]

Ik heb het geprobeerd, maar uiteindelijk heb ik besloten dat gedeelte van een min-width te voorzien, serieus een grotere foto laten zien op een heel klein scherm lukt gewoon niet.

Bedankt!

[JaPPa03]

Ondanks dat je al een fix hebt gevonden wou ik toch nog even reageren :-)... je kunt voor kleine schermen ook kiezen voor een lightbox, die regelt alles voor je om een mooi grote afbeeldingen te krijgen met een 'doorklik' functie waardoor de bezoeker door kan gaan met kijken zonder uit de beleving te stappen. Dan heb je voor klein scherm en grootscherm een oplossing, oftewel touch en muis.

[BramVroy]

JaPPa03 schreef op zaterdag 02 mei 2015 @ 14:25:
Ondanks dat je al een fix hebt gevonden wou ik toch nog even reageren :-)... je kunt voor kleine schermen ook kiezen voor een lightbox, die regelt alles voor je om een mooi grote afbeeldingen te krijgen met een 'doorklik' functie waardoor de bezoeker door kan gaan met kijken zonder uit de beleving te stappen. Dan heb je voor klein scherm en grootscherm een oplossing, oftewel touch en muis.

Er wordt veel te snel naar dergelijke plugins gegrepen vind ik zelf. Tegenwoordig kun je met een beetje CSS kennis al zelf een mooie lightbox maken die nog geen tien regels code is (bij wijze van spreke). Doorklik functionaliteit doe je dan inderdaad met JS. In een project waar IE8 niet ondersteund moest worden heb ik met de :target selector heel wat leuks gedaan.

Deze link zal verwijderd worden, maar ik wil toch even tonen wat ik bedoel. Klik op een afbeelding, lightbox opent (obv :target). Met JS kan je dan volgende of vorige doen (evt met pijltoetsen). Als iemand geïnteresseerd is geef ik de code wel even door.

[ Voor 17% gewijzigd door BramVroy op 04-05-2015 11:14 ]

[JaPPa03]

BramVroy schreef op maandag 04 mei 2015 @ 11:12:
[...]

Er wordt veel te snel naar dergelijke plugins gegrepen vind ik zelf. Tegenwoordig kun je met een beetje CSS kennis al zelf een mooie lightbox maken die nog geen tien regels code is (bij wijze van spreke). Doorklik functionaliteit doe je dan inderdaad met JS. In een project waar IE8 niet ondersteund moest worden heb ik met de :target selector heel wat leuks gedaan.

Deze link zal verwijderd worden, maar ik wil toch even tonen wat ik bedoel. Klik op een afbeelding, lightbox opent (obv :target). Met JS kan je dan volgende of vorige doen (evt met pijltoetsen). Als iemand geïnteresseerd is geef ik de code wel even door.

Dit heb je duidelijk niet getest op een iPhone. Want daar werkt het totaal niet. Dat is het voordeel van 'grijpen naar een plugin'. Je maakt gebruik van een bekende standaard die goed doorontwikkelt is met een juiste optimalisatie, mits het een populair scriptje is natuurlijk.

[BramVroy]

JaPPa03 schreef op maandag 04 mei 2015 @ 11:38:
[...]


Dit heb je duidelijk niet getest op een iPhone. Want daar werkt het totaal niet. Dat is het voordeel van 'grijpen naar een plugin'. Je maakt gebruik van een bekende standaard die goed doorontwikkelt is met een juiste optimalisatie, mits het een populair scriptje is natuurlijk.

De site die ik linkte heeft dan ook geen mobiel design/oog voor mobiele apparaten. (Ben er redelijk zeker van dat na een uurtje bekijken en schrijven het gewoon ook op iOS werkt. Ik denk dat ik al weet wat het probleem is, werkt het in landscape wel?) Ik had het dan ook niet zozeer op mijn kooksel, maar over het algemeen: iedereen grijpt naar plugins, wat enorm veel overhead creëert en vaak functionaliteit bevat die je toch niet gebruikt. Dat is vaak niet nodig.

[JaPPa03]

BramVroy schreef op maandag 04 mei 2015 @ 12:05:
[...]


De site die ik linkte heeft dan ook geen mobiel design/oog voor mobiele apparaten. (Ben er redelijk zeker van dat na een uurtje bekijken en schrijven het gewoon ook op iOS werkt. Ik denk dat ik al weet wat het probleem is, werkt het in landscape wel?) Ik had het dan ook niet zozeer op mijn kooksel, maar over het algemeen: iedereen grijpt naar plugins, wat enorm veel overhead creëert en vaak functionaliteit bevat die je toch niet gebruikt. Dat is vaak niet nodig.

Mee eens hoor daar niet van. Het is een balans zoeken tussen opnieuw het wiel uitvinden en een solide bewezen plugin gebruiken. Het voordeel in dit geval een lightbox is puur de ondersteuning. Maar wanneer je alleen CSS3 browsers wilt dienen dan zou ik ook voor wat anders kiezen. Al is het wel interessant om te kijken naar de render snelheid tussen CSS3 en jQuery versies van een lightbox, dat zou namelijk weer een andere overhead kunnen creëren.

Komt nog bij dat wanneer je website onder de 900ms blijft er helemaal geen reden voor paniek is. Alles daarboven is de moeite waard om te kijken of dat sneller kan.

[Guillome]

BramVroy schreef op maandag 04 mei 2015 @ 12:05:
[...]


De site die ik linkte heeft dan ook geen mobiel design/oog voor mobiele apparaten

Best opmerkelijk voor mobielinformatie.nl

Maar kek, ik ben wel geïnteresseerd in jouw code.

[MarcoC]

BramVroy schreef op maandag 04 mei 2015 @ 11:12:
[...]

Er wordt veel te snel naar dergelijke plugins gegrepen vind ik zelf. Tegenwoordig kun je met een beetje CSS kennis al zelf een mooie lightbox maken die nog geen tien regels code is (bij wijze van spreke). Doorklik functionaliteit doe je dan inderdaad met JS. In een project waar IE8 niet ondersteund moest worden heb ik met de :target selector heel wat leuks gedaan.

Deze link zal verwijderd worden, maar ik wil toch even tonen wat ik bedoel. Klik op een afbeelding, lightbox opent (obv :target). Met JS kan je dan volgende of vorige doen (evt met pijltoetsen). Als iemand geïnteresseerd is geef ik de code wel even door.

Voordeel van plugins is dat beter en vaker getest is dan je zelf zou kunnen testen. Lekker interessant die overhead, werkende code in zo min mogelijk tijd is in 9 van de 10 gevallen belangrijker dan drie regels minder code.

[JaPPa03]

MarcoC schreef op woensdag 06 mei 2015 @ 16:39:
[...]

Voordeel van plugins is dat beter en vaker getest is dan je zelf zou kunnen testen. Lekker interessant die overhead, werkende code in zo min mogelijk tijd is in 9 van de 10 gevallen belangrijker dan drie regels minder code.

Hier kan ik me ook wel in vinden ja. Een goede ervaring staat voorop. En komt misschien ook nog bij, een slechte code (lees: eigen code), kan soms voor flinke overhead zorgen gedurende de render.

[BramVroy]

Guillome schreef op woensdag 06 mei 2015 @ 16:33:
[...]


Best opmerkelijk voor mobielinformatie.nl

Maar kek, ik ben wel geïnteresseerd in jouw code.

Klopt, maar aangezien het een hobby project is, heb ik nog geen tijd gehad om het mobiele design zo te krijgen als ik wil. Dan lever ik liever geen responsive design, in plaats van een brak mobiel design.

Aan de rest: I still disagree. Afhangen van third-party plugins is naar mijn gevoel altijd slechter dan je eigen code maintainen. Uiteraard moet je rekening houden met de haalbaarheid. Bijvoorbeeld je eigen JS-library schrijven lijkt me weinig nut te hebben, ookal zou je een veel compactere versie ivglm jQuery of Prototype kunnen schrijven, gewoon omdat je daar teveel tijd in moet stappen. De kosten/baten moeten goed zitten. Een lightbox is snel zelf te coden, en te testen, dus ik vind het nuttig om zelf eentje te schrijven.

Maar let's agree to disagree, iedereen schrijft code zoals hij/zij wilt

[n8n]

BramVroy schreef op maandag 04 mei 2015 @ 11:12:
[...]

Er wordt veel te snel naar dergelijke plugins gegrepen vind ik zelf. Tegenwoordig kun je met een beetje CSS kennis al zelf een mooie lightbox maken die nog geen tien regels code is (bij wijze van spreke). Doorklik functionaliteit doe je dan inderdaad met JS. In een project waar IE8 niet ondersteund moest worden heb ik met de :target selector heel wat leuks gedaan.

Deze link zal verwijderd worden, maar ik wil toch even tonen wat ik bedoel. Klik op een afbeelding, lightbox opent (obv :target). Met JS kan je dan volgende of vorige doen (evt met pijltoetsen). Als iemand geïnteresseerd is geef ik de code wel even door.

Neem dan wel in acht dat elke #id in de browser-geschiedenis komt de staan waardoor een pagina terug navigeren een verevelend klusje wordt.