Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Увеличение изображений для uCoz при помощи плагина LightGallery

Дата добавления: 19.05.2017 - 01:24
Добавил: Buger
Количество просмотров: 232
Количество комментариев: 0
Размер файла: 8.01Mb
Рейтинг материала: 5.0 / 1
Увеличение изображений для uCoz при помощи плагина LightGallery
рейтинг 5.0
/
голосов 1
Полнофункциональный графический плагин LightGallery, который служит для увеличения изображений.
Многие владельцы своих сайтов хотят использовать интересные решения для увеличения изображений и начинают задаются этим вопросом. Так вот, специально для вас, мы настроили плагин LightGallery для сайтов uCoz. Он полностью адаптивный, позволяет увеличивать уже увеличенное изображение, делиться изображением в социальных сетях, скачивать нужное изображение, позволяет скрывать и показывать блок уменьшенных превью изображений и еще много чего он умеет.

Работу данного плагина вы сможете посмотреть в демонстрации

Установка:
Загрузить папку /lightgallery/ в файловый менеджер сайта, включая папки /css/, /js/, /images/, /fonts/, вместе с их содержимым.

На странице, где у вас должен работать данный плагин (например: "Страница материалов и комментариев к нему")
Между
Код
<head>  

...

</head>

Подключаем стили
Код
<link rel="stylesheet" href="/lightgallery/css/vendor.css">
<link rel="stylesheet" href="/lightgallery/css/main.css">


Отлично! Теперь нам нужно подключить необходимые скрипты.
Делаем это следующим образом:
В самом низу (например: "Страница материалов и комментариев к нему")
перед
Код

...

</body>
</html>

Подключаем скрипты:
Код
<script src="/lightgallery/js/jquery.mousewheel.min.js"></script>
<script src="/lightgallery/js/vendor.js"></script>
<script src="/lightgallery/js/main.js"></script>

На этом все, с подключениями стилей и скриптов разобрались. Теперь необходимо указать HTML разметку для вывода содержимого на "Страница материалов и комментариев к нему" в нужном вам месте:
Код
<?if($IMG_URL1$)?>
<a class="animate-element" title="$ENTRY_TITLE$" data-pinterest-text="$ENTRY_TITLE$" data-tweet-text="$ENTRY_TITLE$" href="$IMG_URL1$">
<img class="img-responsive" src="$IMG_URL1$">
<div class="demo-gallery-poster"><img src="lightgallery/images/zoom.png"></div>
</a>
<?endif?>

Где:
$ENTRY_TITLE$ - выводит название материала
$IMG_URL1$ - первое загруженное изображение

Для вывода большего количества изображений, необходимо продублировать вышеуказанный HTML код и заменить $IMG_URL1$ на $IMG_URL2$, $IMG_URL3$ и так далее.

На этом все!
Если у вас возникнут вопросы, обращайтесь в личку с примечанием "LightGallery", постараемся вам помочь как можно быстрее.

Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.