Эффекты увеличения изображений через плагин Cloud Zoom
В head на всех страницах сайта, где будет применяться данный плагин, вставляйте следующий код:
1 |
<link href="/css/cloud-zoom.css" rel="stylesheet" type="text/css" /> |
Далее после /head на тех же страницах вставляйте:
1 |
<script type="text/JavaScript" src="/js/cloud-zoom.min.js"></script> |
Теперь в то место, где будут располагаться картинки, обрабатываемые плагином zoom вставляйте: 1) Для эффекта появления увеличенного изображения справа от картинки:
1 2 3 |
<a href='Ссылка на большое изображение' class = 'cloud-zoom' id='zoom1' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10"> <img src="Ссылка на уменьшенное изображение" title="Название или описание картинки" /> </a> |
2) Для эффекта появления увеличенного изображения внутри исходной картинки:
1 2 3 |
<a href="Ссылка на большое изображение" class="cloud-zoom" id="zoom1" rel="position:'inside' , showTitle:false, adjustX:-4, adjustY:-4"> <img src="Ссылка на уменьшенное изображение" title="Название или описание картинки" /> </a> |
Теперь осталось лишь залить папки из архива в корень вашего сайта Всё! Материал подготовлен Apocalypse 🙂
Прикольно