Страница 1 из 11
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Как увеличить изображения на сайте через CSS
Как увеличить изображения на сайте через CSS
Kosten
Дата: Вторник, 25.04.2017, 01:31 | Сообщение # 1
Администраторы
Сообщений:14713
Награды: 47


Приветствую всех, хочу спросить и вообще разобраться, по теме как увеличить изображение по клику. Пользователь -SAM- поделился информацией, за что спасибо и вот одна ссылка шла на видео, что ниже вам предоставлю.

Там же шли стили, что тоже ниже идут. На тестовом сайте как не прописывал их, но не эффекта и не увеличение не было, идет только стандартное.

Вот думаю, может кто в курсе и прояснит.



Стили:

Код
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: 93%;
max-height: 93%;
margin: auto;
box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(59,59,59,.4);
}
img[tabindex="0"]:focus,
img[tabindex="0"]:focus ~ * {
pointer-events: none;
}


Видео урок:

Прикрепления: 3582972.png(21Kb)
Страна: (RU)
Kosten
Дата: Вторник, 25.04.2017, 02:11 | Сообщение # 2
Администраторы
Сообщений:14713
Награды: 47


Разобрался, нужно ставить не операторы, а ссылку такую.

Код
<img src="http://pluton.clan.su/_fr/0/7719615.jpg" alt="семья медведей" tabindex="0" width="150">


Где ширина выставлена на 150 и по клику изображение примет свои реальные размеры.

Только не по центру выводит, что уже в стандартных стилях нужно или убирать или править.
Страна: (RU)
waak
Дата: Вторник, 25.04.2017, 11:21 | Сообщение # 3
Vip
Сообщений:283
Награды: 7


а тот код что ты на моём сайте взял разве не такой же ?

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
-SAM-
Дата: Вторник, 25.04.2017, 20:38 | Сообщение # 4
Заблокированные
Сообщений:187
Награды: 14


waak, зачем писать про тот код, а также что вы имеете вообще какое-то отношение к этому?

Kosten, там нужно переменную на вывод изображения ставить в src, а стили на увеличение применяются исходя из прописанного атрибута tabindex.




Сообщение отредактировал
-SAM- - Вторник, 25.04.2017, 20:59
Страна: (UA)
Kosten
Дата: Вторник, 25.04.2017, 20:57 | Сообщение # 5
Администраторы
Сообщений:14713
Награды: 47


Цитата waak ()
а тот код что ты на моём сайте взял разве не такой же ?

waak, давай не преувеличивать, просто по видео перейди и все поймешь. Просто сам не ожидал, что на ютуб также стили выкладывают, и здесь твой сайт не причем, и как понял, этот стиль написал пользователь, который на видео, но если только не ты комментируешь, если ты, значит с твоего сайта.
Страна: (RU)
-SAM-
Дата: Вторник, 25.04.2017, 21:01 | Сообщение # 6
Заблокированные
Сообщений:187
Награды: 14






Сообщение отредактировал
-SAM- - Вторник, 25.04.2017, 22:25
Страна: (UA)
Kosten
Дата: Вторник, 25.04.2017, 21:37 | Сообщение # 7
Администраторы
Сообщений:14713
Награды: 47


-SAM-, у каждого стиля и кода свой автор есть, здесь без обсуждение. Но если брал какой то материал у waak, то здесь был уверен, что он им написан. Так как waak основном свой материал заливает, но как понял, это который продается у него на сайте, это точно его, который бесплатно, возможно переделан и доработан.
Страна: (RU)
Kosten
Дата: Среда, 26.04.2017, 04:39 | Сообщение # 8
Администраторы
Сообщений:14713
Награды: 47


Еще одна тема по увеличению изображение по клику.

Код
<img src="ссылка на картинку" tabindex="0" />


CSS:

Код
img {
  width: 200px;
  height: 200px;
}

img:focus {
  width: auto;
  height: auto;
  pointer-events: none;
}
Страна: (RU)
-SAM-
Дата: Среда, 26.04.2017, 07:39 | Сообщение # 9
Заблокированные
Сообщений:187
Награды: 14


Кстати, по-моему можно туда прописать еще эффектов на transition \ transform, чтобы плавно было (чисто для красоты, ясное дело - кому нужно будет, сделают... можно и просто по наводке делать, без клика - если :focus на :hover заменить).

Собственно, вот еще нарыл по этой же теме материалы:
http://zornet.ru/load/plavnoe_uvelichenie_kartinki_pri_navedenii_na_css3/81-1-0-6579
http://zornet.ru/load/uvelichenie_izobrazhenie_v_2_klika_na_css3/81-1-0-7238




Сообщение отредактировал
-SAM- - Среда, 26.04.2017, 08:45
Страна: (UA)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Как увеличить изображения на сайте через CSS
Страница 1 из 11
Поиск: