Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Скачиваем картинку и кнопка скачать в отдельном окне js

Поддержи проект!!! smile

Скачать картинку по клику. Перед нами стоит задача - кликнуть по картинке и скачать её. Реализация скачивания картинки может быть разной!
Сегодня делал страницу и потребовалось по нажатию кнопки выходило новое окно и чтобы там была кнопка скачать картинку.

Нажать на картинку - скачать картинку.

  1. Простой способ - нажать по картинке скачать картинку
  2. Нажать по картинке - скачать картинку в новом окне.
  3. Скачать картинку по классу.

  1. Простой способ - нажать по картинке скачать картинку

    Самый простой из всех способов - "нажать по картинке - скачать картинку" - разберем в этом пункте:

    Нам понадобится, тег картинки со всем содержимым, в том числе и адресом на картинку:

    <img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">

    Далее нам понадобится ссылка html? картинку помещаем внутрь ссылки

    И добавляем атрибут download.

    Соберем весь код вместе:

    <a href=//dwweb.ru/__img/__svg/bell/bell_95.svg download>

    <img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">

    </a>

    Результат - скачать картинку нажав по ней

    Результат  - скачать картинку нажав по ней


  2. Нажать по картинке - скачать картинку в новом окне.

    Результат можно скачать в архиве : здесь

    Первый вариант - это конечно хорошо, но мне требуется немного другое.

    Мне нужно, нажать по картинке и в новом окне появилась кнопка скачать картинку!

    Давайте сделаем такой скриптик!

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

    Нажмите по любому изображению: Нажать по картинке - скачать картинку в новом окне. Нажать по картинке - скачать картинку в новом окне. Нажать по картинке - скачать картинку в новом окне. Нажать по картинке - скачать картинку в новом окне.

    Давайте совсем вкратце пробежимся, что да как работает!?

    Нажимаем по картинке.

    Скрипт определяет по какой картинке нажали.

    Получаем из атрибута "src" данные и передаем в модальное окно, где будет кнопка аналогичная, что мы разбирали в первом пункте.

    Эту ссылку разбираем с помощью javascript на массив, получаем из него последний элемент и он будет названием картинки.

    Что будем использовать:

    Нам потребуется модальное окно, которое разбирали здесь.

    Добавим внутрь две строчки:

    <h2>Название файла - <span id="url"></span></h2>
    <a id="download" href="" download>Скачать файл</a>

    По клику на картинку нам потребуется addEventListener в "Script" помещаем функцию, в которой и будем все делать

    Получаем данные из src - странно, но темы нет. Выделено красным о download ниже... пункт 5.

    download.href = suzi_quatro.target.src;

    При нажатии на картинку, открываем модальное окно, отправляем "display:block".

    zatemnenie.style="display:block";

    Одновременно оправляется(выделено красным) ссылка в 'href=""', в ' id="download" ' см. выше пункт 2.

    download.href = suzi_quatro.target.src;

    Разбираем полученную ссылку в массив:

    var array = suzi_quatro.target.src.split ("/");

    Получаем последний элемент массива - для вывода названия файла.

    url.innerHTML= array[array.length - 1];

    close_window - наверное и так понятно, что оно делает! См ниже:

    Соберем весь код вместе: Весь код html + css + javascript получился очень длинным, чтобы его здесь выкладывать, скачиваем здесь

    🞨

    Название файла -

    Скачать файл


  3. Скачать картинку по классу.

    Здесь такая история... на сайте потребовалось сделать кнопку по скачиванию картинки... опять все непонятно где... где стили, где кнопки... окно затемнения...

    В общем, я был ЗОЛ devil в очередной раз, что приходится так много терять времени!

    Достало!

    Что сделаем!?

    Будем скачивать картинку по классу! Для этого нам понадобится:

    В тег img добавляем класс → class="download"

    <img src="//dwweb.ru/__img/__svg/bell/bell_80.svg" class="download">

    Пишем скрипт, который сделает все остальное самостоятельно!

    Размещаем парочку картинок с классом "скачать картинку"

    Пример использования скрипта по скачиванию картинки по классу:

    Для демонстрации скрипта скачивания картинки по классу, нажмите по картинке...

    Скачать скрипт скачивания картинки по классу:

    Скачиваем на странице со всеми скриптами.


Последняя дата редактирования : 23.04.2021 16:33
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Комментариев : 1 COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

23/04/2021 04:35 Марат ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по классу!
Ответить
Теги:
скачать картинку Скачиваем картинку и кнопка скачать в отдельном окне js Скачиваем картинку по классу javascript

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.