Увеличение картинки 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 Готово! |
Поделиться в социальных сетях
Материал разместил
Комментарии: 14 | |
| |
1 2 » | |