Добавление презентации в электронный учебник

Для добавления презентации, можно воспользоваться любой js-библиотекой, которая поддерживает перелистывание изображений. В данном примере будем использовать Galleria js.

Слайды презентации#

Откройте презентацию в формате .pptx и сохраните все слайды презентации в отдельную папку Файл – Сохранить как – Рисунок в формате JPEG – Все слайды.

Чтобы не было проблем с кодировкой, сразу переименуйте папку в латиницу presentation1, а изображения (слайды) в 1.jpg, 2.jpg и т.д.

Примечание

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

Подключение библиотеки#

Чтобы презентация появилась в электронном учебнике, в его шаблон нужно подключить библиотеку Galleria js. 

Для этого перейдите в папку с шаблоном C:\Program Files (x86)\TurboSite\themes\Belle (Yellow)\tocopy. В файле blank.html, перед тегом </body> добавьте следующие строки кода:

<style>
   .galleria{ width: 100%; height: 400px; background: #000 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script>
   (function() {
      Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js');
      Galleria.run('.galleria');
   }());
</script>

Атрибуты <video>

Внимание

Если предполагается использование учебника без наличия интернета, то файлы jquery.js, galleria.min.js и galleria.classic.min.js необходимо скачать и поместить в папку tocopy. А также указать относительные ссылки на эти файлы

Подключаем слайды#

Подготовленную папку presentation1 скопируйте в папку user-files. 

Добавьте следующий код на страницу учебника используя вкладку HTML-код:

<div class="galleria">
   <img src="user-files/presentation1/1.jpg">
   <img src="user-files/presentation1/2.jpg">
   <img src="user-files/presentation1/3.jpg">
   <img src="user-files/presentation1/4.jpg">
   <img src="user-files/presentation1/5.jpg">
</div>

Каждая строка <img src="..."> это один слайд презентации. Все эти строки обёрнуты в блок <div class="galleria">, от которого и зависит рендеринг презентации. 

Пример презентации#