Мне нужно на одном небольшом сайте сделать увеличение картинки по клику. Сайт на HTML + CSS. Перелопатил кучу вариантов, ни один нормально не работает. Подскажите кто знает.
1
Как правильно сделать увеличение картинки по клику в HTML?
Автор
Thomasempip
, 24 июл 2017 12:29
В теме одно сообщение
#2
admin
-
- Администраторы
-
- 503 сообщений
Администратор
Отправлено 25 Июль 2017 - 17:31
Для начала скачайте скрипты отсюда: https://yadi.sk/d/RtBLK7Ae3LPjWF
Затем между тегами <head>....</head> вставьте:
Между тегами <body>...</body> вставляете:
и саму картинку:
Размеры width:150px; height:120px; выбираете на свое усмотрение. Это размеры уменьшеной картинки.
Затем между тегами <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>
<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>
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 анонимных
