Эффект увеличительного стекла через плагин iZoom на jQuery
Интересный плагин, который создаёт эффект увеличительного стекла при наведении курсора на картинку. Вы можете рассмотреть самые мелкие детали любого изображения, используя данное творение
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставляйте:
|
1 2 |
.iZoom {height:155px;} .imgWrapper {margin:10px 10px 10px 50px; padding:5px; float:left; border:1px solid #777; background:#fff;} |
2#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 |
<script type="text/javascript" src="/js/iZoom.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#myPic1').iZoom({diameter:200}); }); </script> |
3#: Картинка с эффектом оформляется так:
|
1 2 3 4 |
<div class="imgWrapper"> <img class="iZoom" id="myPic1" src="Ссылка на картинку" /> </div> <br clear="all" /> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
