Cлайд-шоу модели vk24obj как объект на сайте, Виктор Кон

5. Cлайд-шоу модели vk24obj как объект на сайте

Мотивация

Модель слайд-шоу, описанная в статье номер 3, удобна тем, что очень быстро делается. А раз так, то может наступить момент, когда захочется поставить на сайт не одно, а сразу два или больше окон анимации. Например, как на главной странице этого проекта, где одновременно крутятся сразу 4 окна анимации. Проблема установки на сайт нескольких анимаций такого типа должна решаться специально, потому что нельзя просто два раза поставить один и тот же код анимации. Такой код работать не будет. Дело в том, что в коде анимации, которая была описана в статье 3, используются глобальные переменные, то есть переменные общие для всех функций. А такие переменные должы быть уникальными для каждой анимации. Их нельзя просто копировать. Для того, чтобы обойти эту проблему есть два пути: первый -- это не использовать глобальные переменные, а второй -- использовать разные переменные. Первый путь выглядит более красивым, но он медленнее, код становится более сложным, да и не всегда это возможно в принципе. Второй путь выглядит не очень красиво в смысле красоты кода и многие знатоки и любители красивого javascript кода его не приветствуют. Но он быстрый, стабильный и вполне удобный для использования. В этом способе есть много решений. Один из них состоит в том, что названия всех переменных, функций и имен пишутся только буквами со специальным редким символом на конце, например, вот этим (`). Достаточно сделать несколько копий кода и поменять символ (`) на разные числа в разных копиях и мы получаем разные имена переменных и так далее в разных анимациях.

Я реализовал эту программу и приготовил систему из 6 файлов. Три файла с расширениями htm, css и js содержат код, общий для страницы сайта. И три файла с такими же расширениями содержат заготовку кода одной анимации. Последние файлы нельзя использовать непосредственно, их надо скопировать столько раз, сколько нужно окон анимации и затем сделать замену спец. символа на разные числа. Zip архив размером 4 Кб (в нем 6 файлов) скачиваем себе на компьютер, кликая на этой ссылке. В нем дана только версия для сервера Народ, в которой переходы с 9 по 12 заменены на 21 переход. Естественно на других серверах тоже все будет замечательно работать. Кому захочется полную версию, может поменять параметры переходов по образцу кода статьи 3.

Описание

Структура окна анимации практически такая же, как и в статье 3, но проигрываетель музыки надо ставить только один, поэтому он не входит в объект слайд-шоу. В него входят кнопки, строка с именами файлов и текст комментария. Однако их часто тоже не разумно ставить, тогда их можно убрать. Размещение окон анимации и других объектов на сайте на ваше усмотрение. Ясно, что такой код годится только для тех, кто умеет делать сайты и знает хотя бы html. Поэтому для таких людей можно много не объяснять. В принципе достаточно около окна анимации оставить только кнопки, как сделано на главной странице проекта, а можно и кнопки убрать, это кому как интересно.

Что надо делать

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

Шаг 1-й: Все файлы, то есть с расширениями css,htm,js и с буквой S на конце имени нужно скопировать в файлы с названиями, в которых вместо буквы S будут числа 1, 2 и так далее ровно столько сколько анимаций планируется поставить на сайт.

Шаг 2-й: В файлах с числом 1 на конце имени надо выполнить замену символа (`) (аски-код 96) на символ (1) с помощью любого текстового редактора, который делает глобальные замены (то есть за один клик). Точно также в файлах с числом 2 на конце имени надо заменить (`) на (2) и так далее. Лично я пользуюсь редактором Notepad2.

Шаг 3-й: В файлах с расширением js и с числом на конце имени надо заменить комментарий (4я строка) на интернет адреса картинок для данной анимации через запятую. Если адреса длинные, то разумно помещать каждый адрес на отдельную строку, но это не обязательно. При этом в файлах с разными номерами (1, 2 и так далее) могут быть разные адреса картинок. Также необходимо настроить параметры каждой анимации. В описании ниже я использую только общие части имен параметров, то есть без чисел на конце. Параметр im должен быть равен полному числу картинок минус 1. Параметры w и h указывают ширину и высоту области показа. В идеале они должны соответсвовать ширине и высоте картинок, но это не обязательно. Если такого соответствия нет, то картинки будут автоматически промасштабированы на указанные размеры. Параметр pau указывает длительность паузы между переходами в миллисекундах. Логический параметр ona указывает на режим автоматического запуска анимации если он равен true или на запуск по кнопке, если он равен false. В последнем случае стартовое положение окна пустое. Это не очень удобно, но так уж получилось.

Шаг 4-й: Нужно объединить тексты всех файлов с одинаковыми расширениями, то есть css и js в один файл. В эти же файлы в самом начале надо добавить тексты из файлов, у которых нет буквы S на конце имени.

Шаг 5-й: Делаем сборку вэб-сайта беря за основу файл с расширением htm и без буквы S на конце имени. В нем в теге <link> (4я строка) надо указать имя полного css файла, а в теге <script> (предпоследняя строка) надо указать имя полного js файла. Внутри текста файла указан код плейера музыки. При желании код плейера можно заменить на любой другой. Код html для различных анимаций находится в пронумерованных файлах с расширением htm. Этот код надо поставить и отредактировать по вкусу.

Замечание 1: Если уже проведена сборка кода на две или три анимации, то в последующем можно использовать копии готовых сборок просто заменяя в них адреса картинок и настраивая указанные выше параметры.

Замечание 2: Каждый модуль имеет пять кнопок и комментарий к ним, а также поля для записи номера картинки и адреса (тег <p id="tit">) и комментария (тег <p id="com">). Если вам необходимо убрать кнопки, то просто их не ставим. Но в этом случае надо задавать автоматический запуск анимации и ее нельзя будет остановить. Если необходимо убрать тексты, то просто не ставим соответствующие теги. Но в этом случае надо в js файле закоментировать строки текста, в которых встречаются имена para и parb, то есть в начале строки, где есть такие имена надо поставить (//) , то есть два знака деления..

Все, работа закончена, можно проверить новый сайт на вшивость. А если у вас есть свой сайт и вы хотите поставить слайд-шоу туда, то просто копируем приготовленные файлы на сервер и все дела. О том, как использовать разработанный javascript код в более сложных анимациях, а также о том как он работает, я расскажу в других статьях.

Виктор Кон, 06.10.2011