Как считаете нужно ли в галерее у расскрытой навесь экран картинки приделать какой-нибудь крестик (закрыть)?

Question

[Андрей Федоров]

Делаю галерею. Картика из миниатюры открывается по клику. Раскрытая картинка закрывает так же по клику. Мучает вопрос: дойдет ли до пользователя, что для закрытия картинки нужно еще раз кликнуть или имеет смысл как-то обозначить возможность закрытия? Если последнее, но как лучше обозначить? Нарисовать фальшивую кнопку закрытия? Или может просто title добавить раскрытой картинке?

Пример

Comments

[Антон Середний]

Обязательно сделайте. Есть юзеры, которые не зная как закрыть всплывашку (нет крестика) - закрывают окно бразуера...

[Андрей Федоров]

Антон Середний: О! Действительно аргумент. Спасибо.

Answer 1

[Sanan Yuzb]

Лучше, конечно, сделать. Поставьте знак крестика в правый верхний угол.

Answer 2

[Алексей Струков]

Для закрытия картинки параллельно с крестиком (или вместо) можно использовать закрытие при касании (клике) юзера по экрану вне картинки. Думаю так будет лучше ибо на мобильных устройствах при касании крестика операционная система будет ждать некоторое время в ожидании продолжения жеста, а только потом закроет окно. Иными словами и клики и касания и по крестику и вне картинки желательно обработать. Это мое скромное мнение.

Comments

[Андрей Федоров]

Логику понимаю, но так не получится. Большая картинка - это бекграунд, без повторений, настоящего размера, с позицией по центру. Остальная область заполнена цветом бекграунда. Т.е. это один элемент размером во все окно браузера. По другому сделать нельзя так как потребуется JS. А у меня галерея только на HTML+CSS. Относительно крестика - он ничего не будет делать, нажимай или нет. Нужен чтобы пользователь знал, что можно закрыть. А закрываться картинка будет по клику в любой области экрана. Этакая фиктивная кнопка.

[Алексей Струков]

Андрей Федоров: А если пользователь попытается приблизить картинку или просто случайно коснется экрана телефона, то картинка закроется?

[Андрей Федоров]

Алексей Струков: У меня в хроме на андроиде - нет.

[Алексей Струков]

Андрей Федоров: попробуй протестировать на других устройствах. В хроме на компе есть возможность включить эмуляцию всяких устройств. Но вообще сайт без js делать не очень правильно. Так и так захочется потом добавить некий функционал (или заказчик попросит) так что может имеет смысл сразу реализовать показ этих картинок в виде модального окна. Решать тебе конечно.

[Андрей Федоров]

Алексей Струков: заказчик наоборот простит убрать всякие левые либы с сайта. даже на jq косо смотрит. собственно сейчас галерея сделана на js, просили изучить возможность сделать аналог на css

[Алексей Струков]

Андрей Федоров: Ну тогда протестируй на других устройствах и отдавай )
Есть вероятность что даже будет работать везде и так, но по идее там есть нюансы с тач-скринами которые могут интерпретировать одиночные нажатия как hover или ждать окончания жеста

Answer 3

[Z-r]

Да, лишним определенно не будет. А главное — на забудьте сделать, чтоб она клавишей «escape» закрывалась.

Comments

[Андрей Федоров]

Да... Ценная фича. Жаль что без js не получится.... (

[Z-r]

Андрей Федоров, пардон, не уловил, а как вы без яваскрипта вообще намерены делать все то, описанное в вопросе?

[Андрей Федоров]

Z-r: Я очень рад, что вы обратили внимание. У меня прям улыбка до ушей. ))) Я так надеялся, что кто-нибудь заметит, что галерея на чистом css - нетривиальная задача. Я сам думал, что так нельзя. Однако... К сожалению идея не моя - input:checked + label.