Главная » jQuery » Увеличение изображений через плагин imgZoom с различными эффектами на jQuery для uCoz
00:05
Данный плагин позволит осуществить увеличение ваших изображений с одним из трёх интересных эффектов
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<link rel="stylesheet" type="text/css" media="screen" href="http://odyniec.net/projects/imgzoom/css/imgzoom.css" />
<script type="text/javascript" src="http://odyniec.net/projects/imgzoom/jquery.imgzoom.pack.js"></script>
<script type="text/javascript">
$(function () {
$('#img1').imgZoom({ showOverlay: true });
$('#img2').imgZoom({ showOverlay: true, opacity: 0 });
$('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 });
});
</script>
Картинки оформляются следующим образом:
1) Эффект увеличения с затемнением фона:
Code
<a href="Ссылка на большое изображение">
<img id="img1" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
<a href="Ссылка на большое изображение">
<img id="img1" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
2) Эффект плавного появления и угасания:
Code
<a href="Ссылка на большое изображение">
<img id="img2" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
<a href="Ссылка на большое изображение">
<img id="img2" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
3) Эффект увеличения с вращением:
Code
<a href="Ссылка на большое изображение">
<img id="img3" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
<a href="Ссылка на большое изображение">
<img id="img3" src="Ссылка на маленькое изображение" title="Zoom" />
</a>
В прикреплённом архиве находятся все файлы на тот случай, если ссылки на них станут битыми
Материал подготовлен Apocalypse
