Developer от Бога

DV

четверг, 6 июля 2017 г.

JavaScript. Создание, поиск и удаление элементов

Как уже отмечалось, в управлении галереей нет неких сложных алгоритмов только манипуляция отображением страницы через теги. В этом случае используются только объекты направления HTML DOOM.
Первое что попадается в файле JavaScript это глобальные переменные id_img, ln_img, и img_path. Они находятся вне всяких функций для того чтоб были видны везде. Первая функция img_up, она принимает источник изображения при нажатии на картинку. Строка :


document.getElementById("galary"); 
 
 
находит элемент по названию id и возвращает указатель на него -elem. Дальше:

elem.getElementsByTagName('img'); 
 
 
ищет и собирает в одном месте все нужные теги, в даном случае собираем все предварительно выведенные (например сервером через PHP) изображения - в что то вроде массива. В созданной функции search_img находим номер под которым в массиве находится изображение и сохраняем его в глобальную переменную id_img. В другой глобальной переменной ln_img сохраним длину массива изображений (количество изображений).
Строкой:

document.createElement('div'); 
 
к существующей странице добавляется новый div и ссылку на него сохраняет переменная div_all.


div_all.id="div_all_id"; 
 
 
дает новому элементу div имя id по которому можно его найти. Для того чтоб новый div появился на странице записана строка:

document.body.appendChild(div_all); 
 
 
и с этого момента в теле body будет внесен новый элемент.
Теми же действиями создаем внутри нового 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"; 
 
 
Функция img_cls() является обработчиком кнопки закрытия окна, и удаляет созданные элементы (div):

var remel=document.getElementById("div_image"); 
 remel.parentNode.removeChild(remel); 
 
 
... Метод ( функция ) next(), увеличивает переменную id_img в которой хранится номер изображения в массиве, тем самым выводит следующие изображения. Функция back() наоборот, уменьшает значение переменной id_img и выводит предыдущие изображения на экран. img_dwnld() играет роль кнопки download, создает новое окно в браузере и открывает картинку для загрузки в полном размере.

Комментариев нет:

Отправить комментарий