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
Готово!
2016-01-26 Загрузок: 7 Просмотров: 1659 Комментарий: (14)

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

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

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

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

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

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

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