Загрузка изображения лайтбокса

Я использую Lightbox 2 в нескольких галереях изображений. Я хотел бы предоставить своим пользователям возможность загружать изображения в галерее, пока они просматривают их в лайтбоксе. Кнопка «Скачать» была бы идеальной, и я представляю ее рядом с заголовком.

Проблема в том, что я плохо разбираюсь в Javascript (этот проект является внутренним инструментом, используемым нечасто, и я вызвался его вместе взломать. Это не моя область знаний). Я нашел несколько неплохих начал для получения нужной мне функции, но я не знаю, как сшить их вместе. Вот то, на что я смотрю, и я был бы признателен за более полные инструкции (например, вставьте эти строки кода... после этой строки... в lightbox.js).

Что я нашел, но не могу использовать:

1.) Работающий плагин WordPress, но я не использую WordPress

Здесь вы можете найти модифицированную версию Lightbox, предлагаемую в качестве плагина WordPress. этот сайт использует его (посмотрите на фотографии детей в движении- захватные костюмы). Я думаю, что ссылка для загрузки, которую он вставил, идеальна, но я бы не хотел менять свою разметку для работы с плагином WordPress. Я хочу следовать шаблону Lightbox 2 с data-lightbox.

2.) Этот фрагмент, который я не понимаю. Ему была предоставлена ​​загадочная инструкция «изменить файл lightbox.js». Но где?:

$('<div/>', { "class": 'lb-saveContainer' }).append($('<a/>', { "href": '', "target":"_blank" }).append($('<img/>', { src: this.options.fileSaveImage })))


javascript lightbox lightbox2
person dodgertodd    schedule 06.01.2014    source источник
comment
Попробуйте добавить $('.lb-number').append('<a href="' + _this.album[imageNumber].link + '">Download</a>') в строку 172... I сам не пробовал, но это может сработать. Возможно, вам нужно стилизовать его немного по-другому... Кстати, это хак...   -  person kentcdodds    schedule 06.01.2014

Ответы (3)


arrow_upward
0
arrow_downward

Добавьте свою разметку для кнопки загрузки в шаблон, который использует лайтбокс. Lightbox перехватывает все клики на плагин, поэтому вам нужно добавить обработчик событий в вашу новую разметку. Сделайте это в той же функции запуска, в которую вы добавили свою разметку. Вы можете использовать

window.open()

чтобы открыть ссылку в новой вкладке.

Затем вы можете заполнить ссылку на основе

this.album[this.currentImageIndex].link

позже в функции updateDetails.

person Porter Hoskins    schedule 06.01.2014

arrow_upward
1
arrow_downward

Я знаю, что это старый пост, но я потратил много времени на поиск ответа на этот самый вопрос.

Если вы добавите следующий код в конец файла lightbox.css. Вы сможете щелкнуть правой кнопкой мыши по изображению и выбрать «сохранить изображение как…».

    .lb-nav {
       pointer-events: none;
    }

    .lb-prev, .lb-next {
       pointer-events: auto;
    }
person rlgjr    schedule 24.05.2016

arrow_upward
0
arrow_downward

фрагмент не изменяет файл, но jQuery добавляет часть html-кода в html в текущий класс div, у которого установлен класс lb-saveContainer, если есть

  div class="lb-saveContainer"
      a href ..... img1  /a
      a href   ....  img2  /a
      .
      a href ...  imgn /a
  /div

где серия тега «a» — это серия, используемая для просмотра лайтбокса, класс добавляется в div, добавляется для каждой «a», когда фрагмент запускает ссылку, чтобы открыть сохраненное изображение при просмотре.

person archetipo    schedule 06.01.2014
comment
Спасибо за помощь. Я ценю это. - person dodgertodd; 07.01.2014