Перейти к содержимому


Как правильно сделать увеличение картинки по клику в HTML?


  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 Thomasempip

Thomasempip

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений
  • ГородWillemstad

Отправлено 24 Июль 2017 - 12:29

Мне нужно на одном небольшом сайте сделать увеличение картинки по клику. Сайт на HTML + CSS. Перелопатил кучу вариантов, ни один нормально не работает. Подскажите кто знает.

#2 admin

admin

    Администратор

  • Администраторы
  • 502 сообщений

Отправлено 25 Июль 2017 - 17:31

Для начала скачайте скрипты отсюда: https://yadi.sk/d/RtBLK7Ae3LPjWF

Затем между тегами <head>....</head> вставьте:

Цитата

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnifier.js"></script>


Между тегами <body>...</body> вставляете:

Цитата

<script type="text/javascript">

var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["images/amster1.jpg", "images/amster2.jpg", "images/amster3.jpg", "images/amster4.jpg"]

imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 3
})
}
}

</script>

и саму картинку:

Цитата

<img src="images/portrait.jpg" class="magnify" alt="" style="width:150px; height:120px;">

Размеры width:150px; height:120px; выбираете на свое усмотрение. Это размеры уменьшеной картинки.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных