СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
ruweb.net (19)
atom (19)
forum (19)
html book (17)
board (17)
Показать еще :
php file (16)
svg (16)
js method (16)
hosting (16)
link (15)
htaccess (13)
color (13)
osclass (13)
path (12)
table (12)
js delete (11)
icon (11)
php date (11)
jsphp (11)
notepad (11)
input (11)
online (11)
php img (10)
yandex (10)
url (10)
form (10)
mouse (9)
info (9)
comment (7)
img (7)
cookie (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

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

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

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

  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 в очередной раз, что приходится так много терять времени!

    Достало!

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

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

    что стили,

    кнопка,

    скрипт будут в одном месте!

    И окно будет создаваться с помощью скрипта!

    И также удаляться!

    Html картинки:

    Аналогично... в тег img добавляем класс → class="download"

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

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

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

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

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

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

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

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

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
скачать картинку
Скачиваем картинку и кнопка скачать в отдельном окне js
Скачиваем картинку по классу javascript

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

...
пожаловаться скопировать ссылку
23/04/2021 04:35 Марат
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинки по классу!
ответить
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb