Главная / Каталог скриптов для uCoz / Разное, Бесплатно

Увеличение картинки для просмотра в полном размере на css

Добавлено 19-11-2017 в 17:33

Категория Разное, Бесплатно
Авторwaak
Просмотры705
Комментарии0
Понравилось16

Увеличение картинки для просмотра в полном размере на css

Всем привет сегодня хочу показать вам как сделать увеличение картинки по клику на css
Картинка увеличится на на 100% по ширине и высоте если она будет меньше экрана то браузер её откроет по центру монитора так же по повторному клику картинка вернётся в исходное положения

данный материал создан по просьбе человека в скайпе его ник публиковать не буду а вот материал создаю так как мне показалось это решение будет полезно многим

Установка

В таблицу стилей

Код

img[tabindex="0"] {
  cursor: zoom-in;
}
img[tabindex="0"]:focus {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);
}
img[tabindex="0"]:focus, /* Строчка для того что бы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  cursor: zoom-out;
}

Вид кода картинки которую нужно увеличить

Код

Цитата

width="150"

можно не указывать это ширина картинки до клика её можно указать в css или просто убрать

Данный код написан для всех картинок у которых будет указан

Код

tabindex="0"

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души