Журнал Ашрама

[ Автор ], а до 22 сентября я свободна и тоже смогу Вам помочь, так что меня включайте тоже в переписку)

 

Дополнил архив недостающими библиотеками, совсем немного переписал.
Рабочий вариант перелистывания страниц на jQuery: https://yadi.sk/d/Bu0jU9DavBF3q
Если нужна будет помощь с этим, разберусь в скриптах

Сборка:
Внутри архива есть 2 файла: index.html и slider.html
index.html содержит обычный вариант журнала, без нижнего слайдера
slider.html дополнен нижним слайдером под журналом
Особенности скрипта:
- Перелистывание возможно при нажатии на один из углов журнала, словно читаешь настоящий журнал и перелистываешь страницы
- Есть возможность увеличения изображения при нажатии непосредственно на область журнала
- Сбоку, справа от журнала, есть огромный блок-стрелка, с помощью которого можно листать страницы, если с углом неудобно

Тонкость при создании журнала:
Чтобы увеличение журнала работало, необходимо изображения делать в 2х размерах:
- Большом (1115x1443)
- Маленьком (500x650)

Как вариант: Изначальное изображение делать размером 1115x1443, затем создать второе изображение уже 500x650. В фотошопе не сложно это сделать

В перспективе разберусь со скриптами и удалю лишние, чтобы архив поменьше был

 

[ Автор ], спасибо огромное за участие! На данный момент журнал уже делается в другой хорошей программе. Но если понадобится помощь, то мы будем иметь ввиду Ваше мастерство.

 

[ Автор ], отлично!

А в каком формате нужно сохранить журнал, чтобы затем применить Ваш скрипт?

 

[ Автор ], отлично!

А в каком формате нужно сохранить журнал, чтобы затем применить Ваш скрипт?

Скрипт не мой, Ом Шанти рекомендовал его в начале темы
Итак. Изменю ранее сказанную информацию:

Тонкость при создании журнала:
Чтобы увеличение журнала работало, необходимо изображения делать в 2х размерах:
- Большом (1115x1443)
- Маленьком (500x650)

- Большом (1115x1443)
- Среднем (500x650)
- Маленьком (77x100)

Для добавления новой страницы журнала необходимо:

1. В папке "pages" создать 4 файла. А именно: 13.jpg(500x650), 13-large.jpg(1115x1443), 13-thumb.jpg(77x100), 13-regions.json. В данной ситуации мы работаем с добавлением 13 страницы. Тринадцать(13) в названии говорит о номере страницы(!). В скриптах прописан поиск файлов по имени, поэтому имя файла играет важную роль.
2. Открыть файл index.html тестовым редактором. Лучше использовать nodepad++, либо sublime text. Найти блок кода:

<!-- Thumbnails -->
<div class="thumbnails">
    <div>
        <ul>
            <li class="i">
                <img src="pages/1-thumb.jpg" width="76" height="100" class="page-1">
                <span>1</span>
            </li>
            <li class="d">
                <img src="pages/2-thumb.jpg" width="76" height="100" class="page-2">
                <img src="pages/3-thumb.jpg" width="76" height="100" class="page-3">
                <span>2-3</span>
            </li>
            <li class="d">
                <img src="pages/4-thumb.jpg" width="76" height="100" class="page-4">
                <img src="pages/5-thumb.jpg" width="76" height="100" class="page-5">
                <span>4-5</span>
            </li>
            <li class="d">
                <img src="pages/6-thumb.jpg" width="76" height="100" class="page-6">
                <img src="pages/7-thumb.jpg" width="76" height="100" class="page-7">
                <span>6-7</span>
            </li>
            <li class="d">
                <img src="pages/8-thumb.jpg" width="76" height="100" class="page-8">
                <img src="pages/9-thumb.jpg" width="76" height="100" class="page-9">
                <span>8-9</span>
            </li>
            <li class="d">
                <img src="pages/10-thumb.jpg" width="76" height="100" class="page-10">
                <img src="pages/11-thumb.jpg" width="76" height="100" class="page-11">
                <span>10-11</span>
            </li>
            <li class="i">
                <img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
                <span>12</span>
            </li>
        <ul>
    </div>
</div>

• В данной ситуации видно, что страниц 12. Чтобы добавить новую страницу, необходимо отредактировать часть кода:

            <li class="i">
                <img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
                <span>12</span>
            </li>

Следующим образом:

            <li class="d">
                <img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
                <img src="pages/13-thumb.jpg" width="76" height="100" class="page-13">
                <span>12-13</span>
            </li>

• Что изменилось?
  • Класс блока, а именно: был <li class="i">, стал <li class="d">
  • Добавлена строка:

    <img src="pages/13-thumb.jpg" width="76" height="100" class="page-13">

  • Изменено свойство: было <span>12</span>, стало <span>12-13</span>

3. Меняем общее количество страниц в документе. Для этого:

• Ищем код:

    flipbook.turn({
      
            // Magazine width

            width: 922,

            // Magazine height

            height: 600,

            // Duration in millisecond

            duration: 1000,

            // Hardware acceleration

            acceleration: !isChrome(),

            // Enables gradients

            gradients: true,
      
            // Auto center this flipbook

            autoCenter: true,

            // Elevation from the edge of the flipbook when turning a page

            elevation: 50,

            // The number of pages

            pages: 12,

• В этой части кода перечислены переменные, с которыми работает скрипт. Нам необходимо установить общее количество страниц равное 13. Для этого среди ранее приведённого кода ищем:

// The number of pages

            pages: 12,

• Изменяем на:

// The number of pages

            pages: 13,

• Сохраняем документ, перезагружаем страницу.

​

Если вам это сложно осилить, пишите мне, я всё сделаю

P.S. Сделаю важное дополнение: файл 13-regions.json содержит информацию о ссылках на другие страницы/сайты. На каждой странице можно разместить ссылку на любой ресурс. Это корректно работает в Mozilla Firefox, но в Chrome у меня они не отображаются.
Если ссылки на другие источники не нужны, заполнение 13-regions.json выглядит следующим образом: []
Да, именно 2 скобочки и больше ничего