» »

Увеличение изображение в 2 клика на CSS3


Увеличение изображение в 2 клика на CSS3

Это простое увеличение изображение на сайте, которое будет происходить в два клика. При наведение и потом уже вторым идет клик. Здесь все сделано на чистых стилях, вам нужно изначально выставить размеры, которые изначально будут показывать форму. Это хорошо может подойти на комментарий, где для мобильных аппаратах картинка не будет вылазить за пределы. Когда вы просто наводите, то происходит небольшое увеличение, и здесь следует клик, и вот появляется картинка. Все будет работать на классе prostozoom, который как раз будет прикреплен к изображению.

Также для понятие, как все происходит, в самих стилях CSS все очень подробно описание, что идет и как работает, что вы можете сформировать как вам нужно для своего интернет ресурса. Также можно где то поставить не считая комментариев, это личные сообщение, где вам перекидывают картинку и она по умолчанию приходит в небольшом размере, здесь вы ее просто сами разворачиваете. Стили вы ставите к примеру в CSS и потом вам нужно только прописать класс, это может и в самом материале, и все будет работать в два клика. Как и где прописывать, можно посмотреть ниже как пример.

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

Здесь вот как раз код ссылкой и class поставлен.

Код
<img src="http://zornet.ru/Aben/Gsa/zartyn/gdesaun.jpg" class="prostozoom">


CSS:

Код
/* - Установка элемента - */
.prostozoom{
/* - Ширина начальная - */
width:170px;
/* - Высота начальная - */
height:100px;
}
/* - Установка при наведении - */
.prostozoom:hover{
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
/* - Установка при нажатии - */
.prostozoom:active{
transform: scale(2.5, 2.5);
-o-transform: scale(2.5, 2.5);
-ms-transform: scale(2.5, 2.5);
}


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

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

Код
<style type="text/css">  
CSS прописываем  
</style>


PS - представлена демонстрация на материал, здесь не чего не настраивал, так как вам самим нужно, только посмотрел на работоспособность, что так же сами можете сделать.
22.11.2016 Просмотров: 340 Комментарий: (13)

Поделиться в социальных сетях

Материал разместил

Комментарий: 13
Сафрон
Сафрон 22.11.2016 00:351
0
Под комментарий можно другой поставить, тот что на этом сайте стоит, здесь также можно, но там всего в одном клик все увеличивается.

Другое дело, если ты создаешь страницу или в модуле каком то поставить, даже сам материал не исключаю, но здесь на вкус, кому как.
Kosten
Kosten 22.11.2016 00:402
0
Полностью согласен, под комментарий есть другой, его workman писал и он получился отлично как для монитора компьютера, так для всех мобильных аппаратах. Если у вас проблема, что на мобильном вылазит из комментария изображение, то этот скрипт все исправить, сами по умолчанию выставляете.
Сафрон
Сафрон 22.11.2016 00:443
0
Все правильно про этот говорю, а что ставить как он по умолчанию должен, сейчас не помню, кто из какой поисковой системы считают размеры, да просто небольшой.
Kosten
Kosten 22.11.2016 01:154
0
Но так получается, что даже комментарий от социальных ресурсов когда ставишь, то не уменьшает, с этим скриптом можно, или с тем, что в комментарий оставил.
ucozmental
ucozmental 22.11.2016 03:035
0
Все это интересно, кто бы показал, как можно поставить, чтоб уже в коде работало, или просто как есть ставить. Просто по стилям не силен, но знаю, что можно класс поставить и он всю эту тему вытянет.
Kosten
Kosten 22.11.2016 03:166
0
Но если не понятно, можешь написать на форуме, думаю есть кто в этом понимает.
Kosten
Kosten 22.11.2016 03:177
0
Хотя на счет класса все правильно, но нужно и коды ставить, если говорить про этот материал, здесь то все понятно.
iMadeas
iMadeas 22.11.2016 08:558
+2
Подобный зум используется обычно в магазинах, для более детального просмотра товара. Более нигде он особо и не нужен. А для полного увеличения изображения вполне можно использовать ulightbox как в другой теме про форму поиска
Kosten
Kosten 22.11.2016 18:289
0
А так еще можно где то использовать .тот скрипт, к примеру фотоальбом, хотя понимаю, что там лишним будет, но кто оригинально возможно хочет сделать, чтоб смотрелось уникально по функциям.
Webmaster32
Webmaster32 23.11.2016 00:4110
0
В принципе данный скрипт можно попробовать установить через дополнительные поля, так сказать чтобы постоянно не лезть в сам код сайта.
Kosten
Kosten 23.11.2016 01:1811
0
Можно и так сделать, просто некоторые поля не задействованные, но там же ссылка полная должна, а не знаю, есть такое поле, которое по знаком может разместить.
Webmaster32
Webmaster32 23.11.2016 01:3212
0
У себя на сайте пробовал сделать всё получилось
Пример моего кода;

Код
<div class="prostozoom"/>[xfvalue_zoom]</div>/* где [xfvalue_zoom] это ссылка на изображение  */

вместо исходного;

Код
<img src="http://zornet.ru/Aben/Gsa/zartyn/gdesaun.jpg" class="prostozoom">


На юкоз естественно будет немного отличаться.
kiva
kiva 24.11.2016 23:1113
0
Посмотрел демон и кто то может объяснить, для чего два клика и вообще не корректно смотреться, как то все скомкано, здесь нужно правильно выставить размеры и лучше ближе к оригиналу ставить. Хотя понял что написано, просто если большой сирин, то здесь лучше класс установить или на то что ссылку дана, тот код намного понятнее.
avatar