ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Увеличение изображение на полный размер CSS

Увеличение изображение на полный размер CSS

Увеличение изображение на полный размер CSS
Это код на увеличение изображение, которое по умолчанию будет под свой размер сразу увеличиваться на сайте и также по клику на нем. Если картинка изначально идет большая, то она просто выступить за браузер и будет смотреться корректно. Если изображение небольшое, то все покажется по центру. Все работает на стилях, также по всем сторонам будут тени, если делать на светлом сайте.

Чтоб ее обратно меньше сделать, то будет клик, что жмем и она опять будет выставлено по ширине, которую вы задали. И чтоб понять, что можно увеличить, то появиться лупа, а так все по установке просто, Вы делаете ссылку и устанавливаете в код, где как раз там ширину нужно будет задать. И так вы можете сделать в любом материале и поставить несколько, а точнее сколько нужно картинок.

Приступаем к установке:

CSS:

Код
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; max-width: 100%;  
  height: auto; max-height: 100%;  
  margin: auto;  
  box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);  
-webkit-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);  
-moz-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0,0,0,.3);  
}  

img[tabindex="0"]:focus, /* Привязка на возврат фото в привычное состояние после клика на увеличенное */  
img[tabindex="0"]:focus ~ * {  
  cursor: zoom-out;  
  pointer-events: none;  
}

Теперь сам код под изображение, которое и будет увеличиваться.

Код
<img src="ССЫЛКА НА КАРТИНКУ" alt="" width="130" tabindex="0"/>

Здесь выставлено на 130 на ширину, вы можете изменить и сделать так как сами считаете.
23 Апреля 2017 Просмотров: 11553 Комментариев: (47)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 47
Сопрано
Сопрано 23 Апреля 2017 21:561
-1
Но здесь waak молодец, не поспоришь, но для чего делать такой вид увеличение, когда есть уже на сайте и на всех модулях работает.
-SAM-
-SAM- 24 Апреля 2017 06:0516
+2
Потому что waak не имеет никакого отношения к решению, он просто опубликовал его у себя (его сайт - не первоисточник).
Сопрано
Сопрано 24 Апреля 2017 19:2517
+1
Согласен с -SAM-, с тем, что если ты скрипт или стили поправил, это не означает, что этот скрипт автоматически становится твой и твой сайт первоисточник. Видел таких, кто описание перепишет, и напишет не меньше краткого своего описание и пишет, что при копирование указывать источник.
waak
waak 24 Апреля 2017 20:5321
-1
Я с вами согласен как они надоели эти псевдо авторы!!!!! сволочи!!!! и гады!!!!! но тут же хочу пояснить что если скрипт написан на css или html то тут как посмотреть! если мне нужно создать блок я пишу <div> если мне нужно ему присвоить стили я указываю ему класс или ид и если тексту нужно поменять цвет я пишу color и тут вы правы я не могу быть автором данного скрипта так как не я придумал языки html и css но я и не говору этого я просто говорю что я являюсь автором данной работы и если до меня кто то это уже делал то молодец я не спорю но и к примеру цвет текста все меняют используя color так что теперь везде указывать автором того кто придумал данный параметр в css?
FeStemBer
FeStemBer 23 Апреля 2017 22:032
0
Не помню сайт, но там можно тоже взять код и увеличение сделать под свой дизайн, с красивой рамкой обвода.
Марковичь
Марковичь 23 Апреля 2017 22:083
0
Вот вы так говорите, что есть где взять, но возьмете, вы будите пару файлов закачивать, если на счет обвода, то еще папку создавать, на многих сайтах можно увидеть увеличение, есть и другие, где на картинке ниже название или вес ее показан.

А здесь посмотрите, все очень просто, ссылку поставил и увеличивается, да есть стандартный, здесь все логично.
waak
waak 23 Апреля 2017 22:264
+1
Стандартное это хорошо! но в них картинка увеличивается не на весь экран а в других вариантах нужно плагин подключать или скрипт а тут просто цсс и нечего больше прописал класс к картинки и всё
Kosten
Kosten 23 Апреля 2017 22:555
0
Так по материалу понятно, просто кто то привык, что ему все хостинг предоставит, кто то решает, что лишнее, и стандартом может обойтись, а вот кому то как раз такая функция нужна.
First-1
First-1 23 Апреля 2017 23:036
0
А мне нравится. Поставил даже, да и рамку секунду сделать.
Kosten
Kosten 23 Апреля 2017 23:177
0
First, засвети скрин окна.
First-1
First-1 23 Апреля 2017 23:238
0
Kosten
Kosten 23 Апреля 2017 23:279
0
Прикольно, можно углы закруглить.

Можешь для пользователей поделиться, или чисто для своего ресурса.
First-1
First-1 23 Апреля 2017 23:3411
+2
да ничего я там не сделал, две строчки добавил

Код
img[tabindex="0"] {  
  cursor: zoom-in;  
}  
img[tabindex="0"]:focus {  
  position: fixed;  
  z-index: 20;  
  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);  
  opacity:1;
  border: 10px solid #1E1E1E; /* бордюр */  
  border-radius: 5px;/* радиус углов */  
}  
img[tabindex="0"]:focus, /* Строчка для того что бы при клике на увеличенное фото, оно возвращалось в исходное состояние */  
img[tabindex="0"]:focus ~ * {  
  pointer-events: none;  
  cursor: zoom-out;  
}
First-1
First-1 23 Апреля 2017 23:2810
0
Так же от себя могу добавить, что открыв картинку, к примеру как у меня в виде материалов, так все последующие можно открывать или перелистывать как слайдер, двойным нажатием на клавишу ТАБ на клаве, ну или зажимом её, но зажимом быстро очень 11a
Kosten
Kosten 23 Апреля 2017 23:4412
0
First, а можно сделать, так, чтоб при открытие была лупа, а при закрытие палец, а не клик. Просто так как то понятнее смотрится.

За доработанный скрипт от души.
First-1
First-1 23 Апреля 2017 23:5513
+2
Будет палец
Код
img[tabindex="0"] {  
  cursor: zoom-in;  
}  
img[tabindex="0"]:focus {  
  position: fixed;  
  z-index: 20;  
  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);  
  border: 10px solid #1E1E1E; /* бордюр */  
  border-radius: 5px;/* радиус углов */  
  
}  
img[tabindex="0"]:focus, /* Строчка для того что бы при клике на увеличенное фото, оно возвращалось в исходное состояние */  
img[tabindex="0"]:focus ~ * {  
/*pointer-events: none;*/  
  cursor: pointer;  
}  
  
First-1
First-1 24 Апреля 2017 00:2214
+2
Только с пальцем не будет закрываться картинка при клике по ней, а за областью.
Kosten
Kosten 24 Апреля 2017 00:3215
0
Сп, и то уже по другому, то клик, это под копирование, а как то его на закрытие не очень можно представить, имею виду стрелку.
1 2 3 »
Войдите:
avatar