Блог о программировании, сайтах, пассивном доходе, обо всем, что мне интересно!

Галерея – Отложенная загрузка Колобок

Плавным продолжением темы «Отложенной загрузки» и ускорения загрузки страниц, сделанных на Adobe Muse, становится виджет «Галерея – Отложенная загрузка Колобок».

Данный виджет позволяет вывести на странице миниатюры фотографий, а при клике на них вывести во всплывающем окне большое изображение. Подгрузка всех фотографий происходит на лету, то есть по мере пролистывания до миниатюры и при клике на соответствующей миниатюре.

Виджет не зависит от сторонних серверов, нет никаких посредников, всё работает с вашего хостинга.

После оплаты вам на почту придет файл с архивом «Колобка», его необходимо распаковать на вашем хостинге в корне сайта, файл скрипта для отложенной подгрузки картинок, его необходимо прикрепить в проекте для передачи на сервер и MuLib файл с виджетами. Но обо всём по порядку.

Итак, файл 121scolobok.zip необходимо загрузить через FTP на ваш хостинг в корень сайта и распаковать его.

Файл jquery.lazyload.min.js необходимо прикрепить для передачи на сервер с помощью команды «Файл» -> «Добавить файлы для передачи» и произвести выгрузку данных на сервер с помощью команды «Файл» -> «Передача на FTP-сервер» для того, чтобы данный скрипт появился у вас на сайте.

Далее забираем к себе в проект файл MuLib, в нем 2 виджета, конфиг и сама картинка.

В конфиге меняем размеры всплывающего окна, подгоняйте под свои картинки и стиль лайт-бокса, образцы в конце данной инструкции. Класс нужен для объединения разных картинок в одну галерею. С помощью данного набора виджетов на одной странице можно создать неограниченное количество галерей с разным набором изображений. Данный класс как раз и говорит о том, какие изображения попадут в данную галерею. Для создания еще одной галереи, нужно вытащить на рабочее поле вашей страницы еще один виджет «Конфига» и там установить новое название класса, например gs121sslider1 или gs121sslider2 и так далее, данное имя класса необходимо будет чуть позже, об этом далее.

Вытаскиваем на страницу второй виджет «Картинка для галереи». В настройках выбираем изображение, которое будет миниатюрой, то есть будет являться ссылкой, по которой необходимо кликнуть, чтобы вызвать всплывающее окно с большим изображением. В поле «Заголовок изображения» вписываем необходимый заголовок, который будет показываться во всплывающем окне, либо просто очищаем данное поле, чтобы не показывать заголовок. Далее настройки каким образом подгонять миниатюру, данные настройки идентичны настройкам самой программы Muse для заливки картинкой.

Далее заходим в «Стили графики» и создаем новый класс с именем, которое у нас прописано в конфиге, а именно в образце gs121sslider и устанавливаем данный класс для только что созданной миниатюры.

После чего открываем всплывающее меню «Гиперссылки» и выбираем картинку, которая будет открываться во всплывающем окне. Все, на этом создание первой миниатюры с картинкой закончено.

Можно просто скопировать только что созданную миниатюру и заменив в ней картинку миниатюры и большую картинку создать еще одно изображение в галерею gs121sslider. И так далее.

Для создания новой галереи, вытаскиваем новый конфиг, настраиваем его, ставим имя класса допустим gs121sslider1, далее можно просто скопировать миниатюру, только что созданную и в «Стили графики» создать новый класс gs121sslider1, как в новом конфиге и привязать данный класс к новой миниатюре. Далее, для добавления новых картинок в эту галерею, копируйте эту миниатюру с новым классом и меняйте в ней картинки. Все очень просто.

Образцы оформления всплывающего окна

Темный

Темный полосатый

Светлый

Светлый простой

Серый

Купить виджет

Стоимость данного виджета 550 руб.

Пожалуйста, не забывайте указывать адрес вашего сайта, где вы будете использовать данный виджет, это поле Комментарий. Если вы не укажите адрес сайта, то виджет не придет вам на почту автоматически и нужно будет связываться со мной, чтобы я руками вписал адрес вашего сайта и выслал вам на почту виджеты.

Последнее изменениеСреда, 06 июня 2018 15:07
Денис

Занимаюсь программированием с 1993 года, ищу пути достижения финансовой свободы. Люблю возиться с тачками, активный отдых.

Сайт: 121s.ru

Оставить комментарий

Убедитесь, что Вы ввели всю требуемую информацию, в поля, помеченные звёздочкой (*). HTML код не допустим.