Search

Romua1d.ru
Категории: Скрипты

Wow book, jquery слайдер в стиле листания книги (1.0.1)

В недавних заданиях была настройка слайдера на jQuery wow book. Достаточно интересное расширение, которое имеет отличнейшую документацию, доступную по ссылке, кому она не понятна, отпишите в комментарии и я обязательно выложу руссифицированную документацию.

Все просто.

Подключение:

<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />

Вывод объектов книги:

<div id="mybook">
  <div> This is the cover  </div>
  <div> This is the page 1 </div>
  <div> This is the page 2 </div>
  <div> This is the page 3 </div>
  <div> the end </div>
</div>

лично я реализовывал вывод изображений специальным скриптом, который обходит все файлы в папке и выводит их на сайт:

<?php
$dir    = 'images/slider';
$files = scandir($dir);
$i = 0;
foreach ($files as $value)
{
    if ($value !='.' and $value !='..' )
    {?>
        <div <? if($i===0){print 'id="cover"';}else{print 'class="responsive"';}?>>
            <img src="images/slider/<?=$value?>" width="100%" height="100%"/>
        </div>
    <?
        $i++;
    }
    else{}
}
?>

Скрипт настройки книги:

<script type="text/javascript"> 
  $(document).ready(function() {
    $('#mybook').wowBook({
      height : 500,
      width  : 600
    });
  });
</script>
[sociallocker id=1274]

Backup Wow book, jquery слайдер в стиле листания книги

Размер: 6.18 MB
Скачано (раз): 4722
Версия: 1.0.0
ФайлДействие
script.zipСкачать
[/sociallocker]
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Romuald Shmidtelson

Web Developer. I have expirience in FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть комментарии

  • Здравствуйте! Не получается добавить ссылку .чтоб выйти из этой галлереи на другую страницу. Ссылки на странице блокируются.

  • "Здравствуйте! Содержание добавляется через отдельный блок"
    Просто замечательный ответ!
    И код наблюдается в тексте и место где рыть. Исчерпывающая инфа!

    • Ладно! Мне нравится Ваш напор. Помогу.
      В демо я добавил содержание.
      bookOptions - это настройки книги, есть возможность добавить массив элементов, вида:


      ,toc: [ // table of contents in the format
      [ "Introduction", 2 ], // [ "title", page number ]
      [ "First chapter", 5 ],
      [ "Go to site.ru", "http://site.ru" ] // or [ "title", "url" ]
      ]

      Это и будет Вашем сожержанием

      • Спасибо Роман! За предоставленный код, содержание для данного скрипта получилось сделать сразу.
        Признаю твой опыт и мастерство на высоком уровне. Ты мне очень помог.
        Еще раз спасибо!

  • Не уверен что это скрип этого автора так как автор этой статьи молчит как здесь так и в соц. сетях.

    • Здравствуйте! Содержание добавляется через отдельный блок

  • Здравствуйте!
    Спасибо за скрип он просто шикарно переделан.
    Подскажите пожалуйста как организовать содержание с переходом на указанную страницу?
    Содержание в скрипте открывается но оно пустое.

Недавние Посты

Как получить первый заказ на фрилансе

Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…

1 год назад

Топ 7 css фреймворков 2021 года

Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…

3 года назад

Что такое семантическое ядро и как его использовать для продвижения сайта?

Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…

3 года назад

Что такое адаптивные изображения? Как правильно использовать srcset.

Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…

3 года назад

Что такое Политика конфиденциальности для сайта и для чего она нужна?

Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…

3 года назад

Кто такой вебмастер?

В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…

3 года назад