Добавление поля под изображением модели для текста - PullRequest
Новая
       10

Добавление поля под изображением модели для текста

1 голос
/ 19 октября 2019

Я использую сетку галереи для своего приложения. Эта галерея именно то, что я хочу. Он идеально подходит для моих нужд, и я не хочу его менять. Тем не менее, мне нужно иметь ДВА изменения, без которых оно не является полным для моих целей. Но я не понимаю, как это сделать. Требуемые изменения:

  1. При нажатии на изображение в галерее, полное изображение появляется в модальном формате (похоже на загрузочный модальный). Проблема в том, что при нажатии в любом месте экрана (включая изображение) изображение закрывается. Но я не хочу, чтобы он закрывался при нажатии на область изображения. Он должен закрываться только при нажатии на внешнюю область (темная область). Как это исправить?

  2. Я хочу добавить белое текстовое поле чуть ниже изображения, которое соответствует размеру (ширине) изображения в зависимости от изображения (каждое изображение имеет разную ширину и высоту),Это поле будет использоваться для предоставления пользователю DP DP с указанием его имени пользователя, которое при нажатии переносит его на другую страницу (скажем, как временная шкала пользователя). Как создать эту коробку?

Теперь отметим, что проблема 1 связана с проблемой 2, так как имя пользователя не может быть щелкнуто, поскольку изображение закрывается при любом первом щелчке в любом месте экрана (включая изображение). после открытия полного изображения.

Фрагмент кода пера: [https://codepen.io/zoomkraft/pen/KKKNVXN] [1] 

[1]: https://www.codepen.io/zoomkraft/pen/KKKNVXN

1 Ответ

0 голосов
/ 19 октября 2019
  1. Одним из решений является добавление условия в обработчик события click, который переключает полный класс в элементе gallery-item: 
gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
    // If image is in full mode and the click event was fired by an img or a element, do not toggle the full class
    if (item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) {
      return;
    }
    item.classList.toggle("full");
  });
});

Вот отредактированный код: https://codepen.io/giuseppedeponte/pen/gOOLPya?editors=0010

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