Увеличение изображения при щелчке мышью. Jquery Image Magnify v1.11. (Продолжение)

Дополнительный вариант

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

Реализация с помощью кода

Шаг 1.  Изображения загружаем в папку images.

Шаг 2.  Этот код копируем и вставляем в раздел head или body (если библиотека jQuery подключена и код подключения скрипта уже присутствует на странице, этот шаг нужно пропустить!):

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

Шаг 3.  Код для вставки в раздел body:

<form action="/">
 <select id="imageselect">
 <option>Выберите изображение и нажмите, 
 чтобы увеличить</option>
 <option>Amsterdam 1</option>
 <option>Amsterdam 2</option>
 <option>Amsterdam 3</option>
 <option>Amsterdam 4</option>
 </select>
 </form>

 <img id="imagebox" src="images/amster1.jpg" alt="" class="magnify" 
 data-magnifyby="3" style="width: 200px;">

 <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>

Пояснения:

          Степень увеличения первой картинки. В нашем случае значение = 3.

          Размер картинки-превью. В примере = 200px.

          Перечень представляемых изображений.

          Степень увеличения последующих картинок. Значение должно соответствовать data-magnifyby="3".

В этом уроке мы рассмотрели работу скрипта по увеличению изображения. Надеюсь, урок Вам понравился, всё было понятно и просто. Это всё. Посещайте мой сайт, оставляйте комментарии. Успехов во всех начинаниях! Удачи! Ваш L.M.