Imageviewer

[marcop23]

Ik heb een feature die vrij laag, zeg maar zo laag als mogelijk, op het lijstje mag maar veel werk is het niet

Als je in de nieuwe imageviewer naast het plaatje klikt, kan dat de imageviewer gewoon laten sluiten? Anders moet je weer heeeelemaal naar rechtsboven met je muis. Dit had ik eigenlijk verwacht als standaardgedrag, dat deed de oude viewer geloof ik ook? Dat kan ik ook gerust fout hebben trouwens.

Ik ben benieuwd

[Fietsbel]

^^+1 met hem!

[Hahn]

Dan kan je wel krijgen dat als je op volgende/vorige probeert te klikken, je per ongeluk de viewer sluit. Esc drukken werkt overigens ook

[Femme]

Er is een ticket gemaakt om het sluiten van de imageviewer dmv een klik naast de afbeelding te fixen. Rond de volgende/vorige-pijlen zullen we een gebied moeten maken waarin het sluiten van de imageviewer niet wordt getriggerd.

[Room42]

In aanvulling daarvan zou ik graag ("gewoon") de verticale strook van (de breedte van) de volgende/vorige-knoppen volledig klikbaar zien. Nu moet je precies op die knoppen klikken, dat werkt tegenwoordig meestal niet meer zo en is daarom wat onintuïtief geworden.

Ik heb maar even een voorbeeld gemaakt:
- Groen is navigeren
- Rood is sluiten

[RGAT]

I second this!
Echt gigantisch irritant als je lekker aan het browsen bent, je muis opzij gooit en klikt om het plaatje te sluiten (zoals ik gewend ben van vrijwel alle lightbox achtige plaatjes) en er gebeurt niks
Ook inderdaad de next/previous knoppen verticaal maken zodat je wat makkelijker kan browsen

[VantageR]

Ik wilde dit ook al gaan melden, maar dat is dus al gedaan.

Nog als aanvulling voor de UI: De navigatieknoppen zou ik enkel onderin zetten, in de balk van de miniaturen. Hiermee voorkom je dat je de viewer per ongeluk sluit. (Wat Hahn ook al aangaf).

[Hero of Time]

VantageR schreef op zaterdag 04 april 2015 @ 17:16:
Ik wilde dit ook al gaan melden, maar dat is dus al gedaan.

Nog als aanvulling voor de UI: De navigatieknoppen zou ik enkel onderin zetten, in de balk van de miniaturen. Hiermee voorkom je dat je de viewer per ongeluk sluit. (Wat Hahn ook al aangaf).

Dat is waar ze stonden en dat is nou net het probleem geweest. Mobiel werd dat regelmatig buiten beeld weergegeven waardoor je er geen klap aan had.

[Hahn]

Plus dat de pijltjes naast de grote afbeelding veel logischer is, omdat je met die pijltjes een ander groot plaatje selecteert. Stop je die pijltjes naast de thumbnails, dan is het net alsof je door de thumbnails gaat scrollen.

[Room42]

Precies, de pijltjes staan prima zo, de 'hitboxes' moeten alleen groter.

[Hahn]

Over de mobiele versie gesproken:


^{Let niet op eventueel afwijkende kleuren, dat is Twilight}

De pijltjes op mobiel zijn gigantisch én zo goed als onzichtbaar op lichte afbeeldingen. En eigenlijk wil je gewoon kunnen swipen tussen plaatjes op mobiel in plaats van op pijltjes te moeten drukken.

[remyblok]

Ik heb hier ook 'last' van. Als abbonee kan ik custom CSS toevoegen aan Tweakers. Dit kan natuurlijk ook met Stylish oid voor Chrome/FF. Ik heb dus even met CSS zitten priegelen om de nieuwe image viewer iets gebruiksvriendelijker te maken. Ik deel de CSS hier zodat jullie er ook je voordeel mee kunnen doen

Wat veranderd deze CSS:

• Zorgt ervoor dat er weer een magin zichtbaar is aan de randen. Door hierop te klikken sluit de image viewer.
• De vorige/volgende knop zijn nu 40% van de image viewer breed en beslaan de gehele hoogte. Je kunt nu dus veel makkelijker op de knoppen klikken.
• De Close knop is weg

Cascading Stylesheet:

/* Zorgt ervoor dat de overlay klikbaar wordt, daarop klikken is viewer sluiten. 
   Je kunt spelen met de waarden om het klik gebied kleiner/groter te maken */
#imageViewer
{
    width: 86%;
    height: 86%;
    margin: 7%;
    background-color: rgba(18,20,20, 0.70);
}

/* Ander kleurtje, zodat het duidelijk is waar de viewer ophoud en de overlay begint */
#imageOverlay
{
    opacity: .55;
}

/* Close button in niet nodig */
#iClose
{
    display: none;
}

/* Maak de volgende/vorige knoppen groter zodat je er makkelijker op kunt klikken */
#thumbPrev, #thumbNext
{
    top: 0px;
    width: 40%;
    height: 100%;
    background: none;
}

#thumbPrev:before, #thumbNext:before
{
    font-size: 120px;
    font-family: webdings;
    color: white;
    margin: 66% -30px;
    height; 100%;
    display: block;
}

#thumbPrev:hover:before, #thumbNext:hover:before
{
   color: #72C2DA;
}

#thumbPrev:before
{
    content: "3";
}

#thumbNext:before
{
    content: "4";
    text-align: right;
}

Ohja, ik heb dit enkel getest met Chrome en IE11. Garantie tot aan de deur.

[Room42]

Heren, perfect opgelost! Dank!!

plan: Development-round-up - Iteratie #67