Увеличение изображений LightGallery для uCoz
| Категория | Мои файлы |
| Добавил | andruha061 |
| Дата | 15.06.2017 |
Увеличение изображений LightGallery для uCoz
Полнофункциональный графический плагин LightGallery, который служит для увеличения изображений.
Многие владельцы своих сайтов хотят использовать интересные решения для увеличения изображений и начинают задаются этим вопросом. Так вот, специально для вас, мы настроили плагин LightGallery для сайтов uCoz.
Он полностью адаптивный, позволяет увеличивать уже увеличенное изображение, делиться изображением в социальных сетях, скачивать нужное изображение, позволяет скрывать и показывать блок уменьшенных превью изображений и еще много чего он умеет.
Установка:
1. Загрузить папку /lightgallery/ в файловый менеджер сайта, включая папки /css/, /js/, /images/, /fonts/, вместе с их содержимым.
2. На странице, где у вас должен работать данный плагин (например: "Страница материалов и комментариев к нему") между <head></head> подключаем стили :
<link rel="stylesheet" href="/lightgallery/css/main.css">
3. Теперь нам нужно подключить необходимые скрипты.
Делаем это следующим образом:
В самом низу (например: "Страница материалов и комментариев к нему") перед </body></html> подключаем скрипты:
<script src="/lightgallery/js/vendor.js"></script>
<script src="/lightgallery/js/main.js"></script>
На этом все, с подключениями стилей и скриптов разобрались. Теперь необходимо указать HTML разметку для вывода содержимого на "Страница материалов и комментариев к нему" в нужном вам месте:
<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$ и так далее.
| Всего комментариев: 1 | |
|
| |
0
