15 мая 2023 года "Исходники.РУ" отмечают своё 23-летие!
Поздравляем всех причастных и неравнодушных с этим событием!
И огромное спасибо всем, кто был и остаётся с нами все эти годы!

Главная Форум Журнал Wiki DRKB Discuz!ML Помощь проекту

Возможна ли анимация у jpg, или Как организовать простейшее слайд-шоу.


Александр Рыбников

Как Вы все уже наверняка убедились, огромное значение для любого сайта имеет его графическое оформление. Для домашней странички (особенно это относится к девушкам) одним из лучших вариантов наполнения может служить фотогалерея. Способов организации онлайновых фотоальбомов существует бесчисленное множество, о многих из них мы уже неоднократно рассказывали в предыдущих номерах нашего журнала. Сегодня мы предлагаем Вашему вниманию один из редких способов создания такой галереи.

 

Непрерывный показ слайдов.

Предположим, что у Вас имеется несколько небольших (9Х12) фотографий и Вы хотите из них сделать хотя и небольшую, но зато весьма привлекательную галерею. Как же компенсировать количество качеством? Учитывая предположение, что фотоальбом будет небольшим, предпросмотр делать совсем не обязательно. В подобной ситуации весьма разумно выводить картинки друг за другом с некоторой периодичностью. Что же тут особенного? Дело в том, что выводиться они будут по очереди … без перерисовки окна.

Работающую версию Вы сможете увидеть здесь.

<script language="JavaScript">
pic = new Array()
for(i=0;i<3;i++)
{
pic[i] = new Image();
if(i==0) pic[i].src = "pic1.jpg";
if(i==1) pic[i].src = "pic2.jpg"; 
if(i==2) pic[i].src = "pic3.jpg";
}
n=0;
function slideShow()
{
n++; if(n>2) n=0;
document.images["tool"].src = pic[n].src;
setTimeout("slideShow()",3000);
}
</script>
<body onLoad="slideShow()"><center><IMG SRC="pic1.jpg" NAME="tool"></center>
</body>

Идея очень проста. Мы создаём архив pictures из нескольких картинок. Элементами этого архива pictures[i] являются имена соответствующих графических файлов. С помощью функции scroll_image() мы имеем возможность обновлять (с некоторой периодичностью, в нашем случае это полторы секунды) нашу галерею. Если убрать сторчку n=0, то у нас не будет зацикливания показа картинок, т.е. галерея будет показана только один раз. А что будет, если уменьшить время перехода к следующей картинке от полутора секунд до нескольких десятых долей?

 

Создание анимации без использования старого доброго ГИФА.

У многих веб-дизайнеров очень часто возникает вопрос, а что делать, если gif-изображения использовать неудобно, а анимацию создать необходимо. Как правило, такие неудобства бывают связаны с тем, что gif очень плохо сжимает фотографические изображения. Наверняка, Вы часто встречаете в Интернете анимированные gif-баннеры низкого качества в палитре 32, а то и 16 цветов, в которых делается попытка передать фотоизображение. Всё время хочется сказать создателям таких баннеров, что лучше бы они использовали jpg-компрессию, даже пожертвовав анимацией. Нередко бывает, что jpg намного лучшего качества занимает места на диске в несколько раз меньше. Но, к сожалению, у jpg есть один огромный недостаток: его нельзя сделать анимированным. К счастью, с помощью Java Script, в частности именно того скрипта, который Вы видите несколькими строчками выше, можно легко решить эту проблему. Для этого надо всего лишь на всего уменьшить время обновления галереи до нескольких десятков миллисекунд. Вы увидите последовательность из jpg-ов, обновляющихся со скоростью анимированного gif-а. Так что теперь, используя этот скрипт, Вы можете делать у себя на сайте небольшие фотографические мультики.

Работающий вариант Вы можете посмотреть здесь.

Управляемое слайд-шоу.

Вернёмся вновь к первому примеру. Если Вы ещё раз посмотрите на непрерывно меняющуюся последовательность слайдов, то у Вас в какой-то момент времени обязательно возникнет желание остановить этот просмотр. Для решения этой задачи нам понадобится кнопка “Пауза”, которая будет останавливать наше слайд-шоу. Для этого добавим на страничку две кнопки “Пауза” и “Продолжить”:

<form>
<input type=button value="Остановить" onClick="ind=0;">
<input type=button value="Продолжить" onClick="ind=1;">
</form>

Работающую версию Вы сможете увидеть здесь.

Для запоминания номера иллюстрации, которая показывалась в тот момент, когда была нажата кнопка “Пауза”, была введена переменная rec. Важно обратить внимание на то, что на сей раз функция scroll_image используется с параметром. В качестве него передаётся номер картинки в последовательности. Когда этот параметр имеет значение “-1”, функция прекращает своё выполнение, т. е. показ слайдов на этом завершается. Изменения в написании функции scroll_image Вы можете увидеть, сохранив страницу с работающим вариантом.

Создание подписей к картинкам.

Теперь, для полного совершенства, нашей галерее не хватает ещё подписей к фотографиям. Соответстующие комментарии мы будем выводить в поле формы в зависимости от значения переменной n.

Для этого создадим массив комментариев к картинкам:

comm = new Array()
for(i=0;i<3;i++)
{
comm[i] = new Image();
if(i==0) comm[i] = "картинка 1";
if(i==1) comm[i] = "картинка 2"; 
if(i==2) comm[i] = "картинка 3";
}

Затем создадим поле формы, куда мы будем выводить комментанрий с соответствующим номером:

<form name=”form1”><input type=text name=”text1” value=”Комментарии к картинкам”></form>

Обновлять значение этого поля мы будем с помощью той же самой функции scroll_image. Для этого в неё необходимо добавить строчку:

document.form1.text1.value=comm[n];

Работающую версию Вы сможете увидеть здесь.

Теперь одновременно с картинкой в поле формы будет появляться комментарий к ней. Такую галерею удобнее сделать не автоматической, а с “ручным управлением”, т. е. переходить к следующему кадру последовательности по просьбе пользователя. Для этого необходимо добавить две кнопки “назад” и “вперёд”, которые будут соответственно уменьшать и увеличивать значение переменной n. Аналогично комментариям можно задать и ссылки на картинки более крупного размера. Для этого необходимо создать подобный массив со ссылками.

Такой способ создания галерей встречается в Интернете весьма не часто, а уж использование Java Script для реализации анимированной последовательности jpg-в – это вообще большая редкость. Первый способ разумно использовать хотя бы в силу той причины, что он не требует перехода на новую страницу, что существенно увеличивает скорость работы сайта. Второй позволяет существено увеличить качество изображений при размере файлов, эквивалентном анимированному gif-у более низкого качества.

Успешного творчества!