Сегодня заметка о создании на  странице изображения, которое бы автоматически подгружалось через равные промежутки времени.

Для чего это может понадобиться?

  1. Ситуация с веб-камерой, которая выдает результат в jpg или любом другом графическом виде
  2. Ситуации, когда  изображение берется со стороннего источника, но оно каждый раз разное, причем время смены исходной картинки может быть от1 секунды, до нескольких часов.

Общий случай — частая смена изображения без обновления страницы.

Писать скрипт будем на языке JavaScript

Для начала создаем отдельный файл MyImg.html

Отрываем его в текстовом редакторе (я предпочитаю Notepad++) и вставляем в него следующий код:

<html>
<head>
<script language=»JavaScript»><!—
function refreshIt() {
if (!document.images) return;
var date = new Date();
document.images[‘MyCam’].src = ‘Путь к изображению’ + date.getTime(); // date.getTime() для того, чтобы браузер не взял изображение с  кэша
setTimeout(‘refreshIt()’,5000); // refresh every 5000ms
}
//—>
</script>
</head>
<body onLoad=» setTimeout(‘refreshIt()’,5000)»> // автообновление, в милисекундах
<img src=»путь к изображению» width=»600″ height=»450″ name=»MyCam» >
</body>
</html>

Сохраняем файл и проверяем работу странички.

Если все работает как надо, добавляем в него между тэгами <body> нужный контент.

В WordPress вставляется без проблем

Если же надо этот скрипт вставить в Joomla, начинаются небольшие нюансы.

Заходим в панель администрирования -> менеджер модулей. Создаем  модуль Wrapper, в графе позиция вписываем, ну допустим, pos_myCamImg, в параметрах модуля, URL — «Путь к файлу MyImg.html«. Изменяем по своему вкусу размеры фрейма и сохраняем.

Теперь чтобы вставить данный модуль на страницу надо в редакторе внести запись {loadposition pos_myCamImg}

Всё, можно сохранять страницу, у Вас будет рабочая область с самообновляющимся изображением.