Мобильная версияЯ создаю веб-сайт с художественным портфолио, на котором содержимое моей галереи изображений динамически добавляется с помощью JS (файл JSON), поскольку многие изображения нужно добавлять вручную с помощью html-тегов.
Когда я нажимаю на каждое миниатюрное изображение, я хочу, чтобы открывалась еще одна HTML-страница, на которой отображается исходное полноэкранное изображение с некоторой дополнительной информацией, связанной с этим конкретным изображением.
Нелогично создавать для каждого изображения сотни уникальных html-файлов. Итак, у меня есть «gallery.html», и мне просто нужен еще один HTML-код с именем «artwork.html», содержимое которого меняется в зависимости от изображения, на которое я щелкнул в «gallery.html» (точно так же, как работает artstation). Что я могу сделать? Стоит ли вообще делать так, как я сказал выше? Должен ли я изменить свой подход? Буду рад любым советам.
Я попробовал событие onclick, но невозможно манипулировать элементами второго HTML с помощью JS, пока я нажимаю на изображение в первом HTML. Я знаю, что этого можно добиться в том же html-документе, используя что-то вроде модального окна, но мне было интересно, как это делается в artstation, который открывает другую html-страницу. Я думаю, что artstation использует ajax, но я новичок и немного растерялся, поэтому не совсем знаю, как правильно сделать это с помощью ajax.
Вот упрощенный пример того, что я сделал.
Первый HTML:
галерея изображение { ширина: 200 пикселей; дисплей: блок; маржа: 3рем авто; }
Второй HTML:
галерея
JavaScript:
const imgLink = document.querySelector('.img-link'); const imgContainer = document.querySelector('.img-container'); // подход 1: щелчок по ссылке, чтобы добавить контент в div во втором HTML (не работает) imgLink.addEventListener('click', function () { imgContainer.innerHTML = `информация об изображении
`; }); // подход 2: пытаемся открыть второй HTML и затем добавляем контент (не работает) imgLink.addEventListener('click', function (e) { е.preventDefault(); window.open('index2.html',self); imgContainer.innerHTML = `информация об изображении
`; });
