Скачиваем картинку и кнопка скачать в отдельном окне js
Сегодня делал страницу и потребовалось по нажатию кнопки выходило новое окно и чтобы там была кнопка скачать картинку.
Нажать на картинку - скачать картинку.
- Простой способ - нажать по картинке скачать картинку
- Нажать по картинке - скачать картинку в новом окне.
Простой способ - нажать по картинке скачать картинку
Самый простой из всех способов - "нажать по картинке - скачать картинку" - разберем в этом пункте:Нам понадобится, тег картинки со всем содержимым, в том числе и адресом на картинку:
Далее нам понадобится ссылка html? картинку помещаем внутрь ссылки
И добавляем атрибут download.
Соберем весь код вместе:
<a href=//dwweb.ru/__img/__svg/bell/bell_95.svg download>
<img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">
</a>
Результат - скачать картинку нажав по ней
Нажать по картинке - скачать картинку в новом окне.
Результат можно скачать в архиве : здесьПервый вариант - это конечно хорошо, но мне требуется немного другое.
Мне нужно, нажать по картинке и в новом окне появилась кнопка скачать картинку!
Давайте сделаем такой скриптик!
Поскольку... будет много кода, разного, не будем в подробностях... по минималка, что мы хотим получить:
Давайте совсем вкратце пробежимся, что да как работает!?
Нажимаем по картинке.
Скрипт определяет по какой картинке нажали.
Получаем из атрибута "src" данные и передаем в модальное окно, где будет кнопка аналогичная, что мы разбирали в первом пункте.
Эту ссылку разбираем с помощью javascript на массив, получаем из него последний элемент и он будет названием картинки.
Нам потребуется модальное окно, которое разбирали здесь.
Добавим внутрь две строчки:
<a id="download" href="" download>Скачать файл</a>
По клику на картинку нам потребуется addEventListener в "Script" помещаем функцию, в которой и будем все делать
Получаем данные из src - странно, но темы нет. Выделено красным о download ниже... пункт 5.
При нажатии на картинку, открываем модальное окно, отправляем "display:block".
Одновременно оправляется(выделено красным) ссылка в '
Разбираем полученную ссылку в массив:
Получаем последний элемент массива - для вывода названия файла.
close_window - наверное и так понятно, что оно делает! См ниже:
<script>
var close_next;
document.addEventListener("click", function(suzi_quatro) {
if (suzi_quatro.target.className =="w_h_70")
{
download.href = suzi_quatro.target.src;
zatemnenie.style="display:block";
var array = suzi_quatro.target.src.split ("/");
url.innerHTML= array[array.length - 1] ;
}
if (suzi_quatro.target.className =="close_window")
{
zatemnenie.style="display:none";
}
});
</script>