Как уже отмечалось,
в управлении галереей нет неких сложных алгоритмов только манипуляция отображением страницы через теги. В этом случае
используются только объекты направления HTML DOOM.
Первое что попадается в файле JavaScript это глобальные переменные id_img, ln_img, и img_path. Они находятся вне всяких функций для того чтоб были видны везде. Первая функция img_up, она принимает источник изображения при нажатии на картинку. Строка :
находит элемент по названию id и возвращает указатель на него -elem. Дальше:
ищет и собирает в одном месте все нужные теги, в даном случае собираем все предварительно выведенные (например сервером
через PHP) изображения - в что то вроде массива. В созданной функции search_img находим номер под которым в массиве
находится изображение и сохраняем его в глобальную переменную id_img. В другой глобальной переменной ln_img сохраним
длину массива изображений (количество изображений).
Строкой:
к существующей странице добавляется новый div и ссылку на него сохраняет переменная div_all.
дает новому элементу div имя id по которому можно его найти. Для того чтоб новый div появился на странице записана
строка:
и с этого момента в теле body будет внесен новый элемент.
Теми же действиями создаем внутри нового div еще один div с уникальным именем id, специально для открытия выбранного в галереи изображения.
Вычисленное ранее местоположение изображения в массиве images[id_img], через:
img_path=document.images[id_img].src;
извлекаем и сохраняем путь к нему.
выводит выбранное изображение в большом размере поверх галереи.
Также создается дополнительный div в котором будут размещены кнопки:
Функция img_cls() является обработчиком кнопки закрытия окна, и удаляет созданные элементы (div):
...
Метод ( функция ) next(), увеличивает переменную id_img в которой хранится номер изображения в массиве, тем самым выводит
следующие изображения.
Функция back() наоборот, уменьшает значение переменной id_img и выводит предыдущие изображения на экран.
img_dwnld() играет роль кнопки download, создает новое окно в браузере и открывает картинку для загрузки в полном размере.
Первое что попадается в файле JavaScript это глобальные переменные id_img, ln_img, и img_path. Они находятся вне всяких функций для того чтоб были видны везде. Первая функция img_up, она принимает источник изображения при нажатии на картинку. Строка :
document.getElementById("galary");
elem.getElementsByTagName('img');
Строкой:
document.createElement('div');
div_all.id="div_all_id";
document.body.appendChild(div_all);
Теми же действиями создаем внутри нового div еще один div с уникальным именем id, специально для открытия выбранного в галереи изображения.
Вычисленное ранее местоположение изображения в массиве images[id_img], через:
img_path=document.images[id_img].src;
извлекаем и сохраняем путь к нему.
src="+" ' "+document.images[id_img].src+" ' >";
Также создается дополнительный div в котором будут размещены кнопки:
var div_button = document.createElement('div');
div_button.id="div_bt";
var remel=document.getElementById("div_image");
remel.parentNode.removeChild(remel);
Комментариев нет:
Отправить комментарий