Галерея в виде записной книжки на Ucoz

Опубликовано 30.12.2018 автором otlichnica

Продолжаем разбирать различные галереи. Сегодня остановимся на галереи в виде записной книжки. Файлы исходники можно скачать отсюда , пример галереи можно посмотреть тут.Итак, идем по порядку.1. Создаем информер, который будет выводить материалы в слайдшоуЕго код будет следующий:<div> <img src=»$IMG_URL1$» alt=»»/> <h1>$TITLE$</h1> <p>$MESSAGE$</p> <a href=»$ENTRY_URL$» class=»article»>Урок</a> <a href=»$CATEGORY_URL$» class=»demo»>Раздел</a></div>

Тут обратите внимание, что предполагается, что в кратком описании
материала у Вас нет картинок. У меня, например, есть. Причем с самого
начала, поэтому я немного изменила код шаблона информера, начиная
выводить текст только после картинки, следующим образом:

<div>

<h1>$TITLE$</h1>

<a href="$CATEGORY_URL$" class="demo">Раздел</a>

</div>

2. Все. Теперь нам нужно закинуть исходники на сайт. Воспользуйтесь
файловым менеджером. Создайте папку, например, script_notebook

и скопируйте в нее содержимое архива, предварительно его распаковав. Там
будут 4 папки booklet, css, images и cufon

3. Создаем страничку, на которой будет выводиться галерея, нажимаем на
Html (редактирование кода) и вставляем следующий код:

<div id="loading" class="loading">Загружаем
страницы…</div>

<div id="mybook" style="display:none;"><div
class="b-load"> $MYINF_номер информера$ </div></div></div>

<!— JavaScript —>

$(function() {

var $mybook = $(‘#mybook’);

var $bttn_next = $(‘#next_page_button’);

var $bttn_prev = $(‘#prev_page_button’);

var $loading = $(‘#loading’);

var $mybook_images = $mybook.find(‘img’);

var cnt_images = $mybook_images.length;

var loaded = 0;

//Предварительно загружаем все страницы в книжке,

//а затем вызываем плагин Booklet

$mybook_images.each(function(){

var $img = $(this);

var source = $img.attr(‘src’);

$(‘<img/>’).load(function(){

++loaded;

if(loaded == cnt_images){

$loading.hide();

$bttn_next.show();

$bttn_prev.show();

$mybook.show().booklet({

name: null, // Имя буклета, которое выводится в
заголовке документа

width: 800, // Ширина контейнера

height: 500, // Высота контейнера

speed: 600, // Скорость перехода между страницами

direction: ‘LTR’, // Направление организации
контента, по умолчанию LTR (left to right — слева направо), может
быть RTL (справа налево)

startingPage: 0, // Индекс страницы, которая будет
выводиться первой

easing: ‘easeInOutQuad’, // Метод сглаживания для
завершения трансформации

easeIn: ‘easeInQuad’, // Метод сглаживания для
первой половины трансформации

easeOut: ‘easeOutQuad’, // Метод сглаживания для
второй половины трансформации

closed: true, // Запускаем книгу "закрытой", будут
добавлены пустые страницы в начало и конец

closedFrontTitle: null, // Используется с опциями
"closed", "menu" и "pageSelector", определяет заголовок пустой
начальной старницы

closedFrontChapter: null, // Используется с
опциями "closed", "menu" и "chapterSelector", определяет имя главы
пустой начальной страницы

closedBackTitle: null, // Используется с опциями
"closed", "menu" и "pageSelector", определяет заголовок пустой
последней страницы

closedBackChapter: null, // Используется с опциями
"closed", "menu" и "chapterSelector", определяет имя главы пустой
конечной страницы

covers: false, // Используется с опцией "closed",
делает первую и последнюю страницу обложками, без нумерации страниц
(если возможно)

pagePadding: 10, // Отступ для обертки каждой
страницы

pageNumbers: true, // Выводит номер на каждой
странице

hovers: false, // Разрешает анимацию
предварительного просмотра страниц при наведени курсора мыши,
выводятся маленькие изображения предыдущей и следующей страницы

overlays: false, // Разрешает навигацию с
использованием слоя перекрытия, когда разрешено — ссылки в контексте
не будут реагировать на нажатия кнопки мыши

tabs: false, // Добавляет закладки вдоль верха
страницы

tabWidth: 60, // Определяем ширину закладок

tabHeight: 20, // Определяем высоту закладок

arrows: false, // Добавляем стрелки поверх кромок
книжки

cursor: ‘pointer’, // Установка css для курсора
для боковой области книжки

hash: false, // Разрешает навигацию с
использованием хэш строки, например: #/page/1 для страницы 1, будет
действовать на все книжки с разрешенной опцией ‘hash’

keyboard: true, // Разрешает навигацию с
использованием клавиш стрелок(влево: предыдущая страница, вправо:
следующая)

next: $bttn_next, // Селектор для элемента,
который используется как выключатель перехода к следующей странице

prev: $bttn_prev, // Селектор для элемента,
который используется как выключатель перехода к предыдущей странице

menu: null, // Селектор элемента, который
используется как область меню, требуется для ‘pageSelector’

pageSelector: false, // Разрешает навигацию с
помощью выпадающего меню для страниц, требует опции ‘menu’

chapterSelector: false, // Разрешает навигацию с
помощью выпадающего меню глав, определяется атрибутом "rel", требует
опции ‘menu’

shadows: true, // Выводить тени при анимации
страниц

shadowTopFwdWidth: 166, // Ширина тени для верха
анимации вперед

shadowTopBackWidth: 166, // Ширина тени для верха
анимации назад

shadowBtmWidth: 50, // Ширина тени для низа
анимации

before: function(){}, // Возвратная функция,
которая вызывается перед выполенением каждой анимации

after: function(){} // Возвратная функция, которая
вызывается после выполнения каждой анимации

});

Cufon.refresh();

}

}).attr(‘src’,source);

});

</script>

в коде http://otlichnica.ucoz.ru заменяем на свой сайт, и если есть желание
меняем настройки. Все, наша записная книжка готова.

Комментарии на Facebook

В тренде