ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Увеличение картинки Lumos при клике на JQuery

Увеличение картинки Lumos при клике на JQuery

Увеличение картинки Lumos при клике на JQuery
JQuery скрипт Lumos увеличение картинки при нажатие. Можно сделать как галерею фотографий и просто увеличение одной фото, красивые кнопки вперед, назад, подгруздка самой картинки.
Установка скрипта.
1.Переходим в шаблон и вставляем в Верхние часть сайта код:
Код
<link rel="stylesheet" href="/uCode-lumos.css">

2.Следующий код это сама картинка, в то место где она будет расположена:
Код
<a class="lumos-link" data-lumos="gallery1" href="Ссылка на картинку">  
<img src="Ссылка на картинку" alt="Источник материала www.uCode.at.ua">  
</a>  
<a class="lumos-link" data-lumos="gallery1" href="Ссылка на картинку №2">  
<img src="Ссылка на картинку №2" alt="Источник материала www.uCode.at.ua">  
</a>

3.Теперь нужно подключить js скрипт, перед вставляем код:
Код
<script src="/uCode-lumos.js"></script>  
<script type="text/javascript">  

var lumosContainer = $(".lumos-container");  
var lumosImage = $(".lumos-img");  
var altText = $(".lumos-alt-text");  
var prevButton = $(".lumos-prev");  
var nextButton = $(".lumos-next");  
var closeButton = $(".lumos-close");  
var linkSelector = ".lumos-link";  
var lumos<a href="http://www.uCode.at.ua/">Увеличение картинки</a>Name = $(".lumos-name");  
var allButtons = ".lumos-next, .lumos-prev, .lumos-close, .lumos-alt-text";  
var spinner = $(".lumos-container .spinner");  
var animationSpeed = 250;  
var fadeInSpeed = 750;  
var mouseIsOnImage = false;  
var isSingleImage = false;  
var isFirst = false;  
var isLast = false;  
</script>

4. и последнее что Вам нужно это загрузить файлы на сайт.
uCode-lumos.js и uCode-lumos.css
Готово!
26 Января 2016 Загрузок: 8 Просмотров: 1975 Комментариев: (14)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 14
КиношаHD
КиношаHD 26 Января 2016 12:161
0
kredit-oformi
kredit-oformi 26 Января 2016 14:092
0
ну тоже иногда необходимым бывает такая штука
Kosten
Kosten 26 Января 2016 14:373
0
Норм, но вид материала больше понравился.
КиношаHD
КиношаHD 26 Января 2016 14:494
0
Цитата Kosten
Норм, но вид материала больше понравился.

Какой?
Kosten
Kosten 26 Января 2016 14:545
0
Вид материала файлов, который на сайте, с его эффектами при наведение.
Kosten
Kosten 26 Января 2016 14:566
0
Про этот говорю, который на сайте.

КиношаHD
КиношаHD 26 Января 2016 15:167
0
Цитата Kosten
Про этот говорю, который на сайте.

Я подумаю cool
AnTron
AnTron 27 Января 2016 00:1512
0
Круто смотрится такой вид материала, пожалуйста решайте скорей.
КиношаHD
КиношаHD 26 Января 2016 15:178
0
Выкладываешь тут а плюсиков не-дают biggrin
1 2 »
avatar