Главная » Файлы » Прочие скрипты » jQuery
Просмотр увеличенного изображения при наведении на миниатюру через плагин miniZoomPan на jQuery
23.06.14, 11:31:56

Скачать файл



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

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/miniZoomPan.js"></script>  

  <link rel="stylesheet" href="/css/miniZoomPan.css" type="text/css" media="screen" />

  <script type= "text/javascript">/*<![CDATA[*/  

  $(function() {  

$("#zoom01, #zoom02, #zoom03").miniZoomPan({  

sW: 200,  

sH: 250,  

lW: 370,  

lH: 462  

})  

$("#bacteria").miniZoomPan({  

sW: 125,  

sH: 125,  

lW: 500,  

lH: 500,  

frameColor: "#000",  

frameWidth: 60,  

loaderContent: "<img src='/images/spinner.gif' />"  

})  

$("#pano").miniZoomPan({  

sW: 515,  

sH: 100,  

lW: 3555,  

lH: 690  

})  

  });  

  /*]]>*/</script>


Сами картинки обрамляются следующим образом:

1) Для эффекта как в первых трёх картинках:
Код
<div id="zoom01">  
  <img src="Ссылка на картинку" />  
  </div>  

  <div id="zoom02">  
  <img src="Ссылка на картинку" />  
  </div>  

  <div id="zoom03">  
  <img src="Ссылка на картинку" />  
  </div>


2) Для эффекта как в четвёртой картинке:
Код
<div id="bacteria">  
  <img src="Ссылка на картинку" />  
  </div>


3) Для эффекта как в пятой картинке:
Код
<div id="pano">  
  <img src="Ссылка на картинку" />  
  </div>


Осталось лишь залить скрипт из прикреплённого архива в папку js стиль в папку css и картинку в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: при, изображения, miniZoomPan, увеличенного, Через, просмотр, плагин, на, наведении, миниатюру
Просмотров: 363 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: