» »

Увеличение картинки 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.01.2016 Загрузок: 5 Просмотров: 602 Комментарий: (14)

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

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

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

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

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

Я подумаю cool
AnTron
AnTron 27.01.2016 00:1512
0
Круто смотрится такой вид материала, пожалуйста решайте скорей.
КиношаHD
КиношаHD 26.01.2016 15:178
0
Выкладываешь тут а плюсиков не-дают biggrin
kredit-oformi
kredit-oformi 26.01.2016 15:209
0
Цитата КиношаHD
Выкладываешь тут а плюсиков не-дают

дело сугубо добровольное biggrin
КиношаHD
КиношаHD 26.01.2016 15:2310
0
smile
Kosten
Kosten 26.01.2016 16:3511
0
А тут как бы быстрей скопировать и ноги унести.)
Melisa
Melisa 05.02.2016 20:2413
0
У меня антивирусник ругается на архив cry cry cry
Сопрано
Сопрано 05.02.2016 21:0114
0
У меня нод и нормально не матерится.
avatar