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

@Egor363 · Регистрация: 01.08.2019

Author24 — интернет-сервис помощи студентам

В index.html есть

HTML5

1	<ul class="list"></ul>

В app.js есть масив картинок galleryItems.

Javascript

const galleryItems = [
  {
    url:
      'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    alt: 'White and Black Long Fur Cat',
  },
  {
    url:
      'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
}
]

/*
Нужен скрипт для создания галлереи изображений.

- Использовать массив объектов для создания тегов img вложенных в li.
- Оформление по вкусу, можно и не делать, достаточно чтобы каждое
изображение было 300px по ширине.
- Добавьте все элементы галлереи в ul.gallery.
*/

@Mr_Sergo · 01.08.2019, 16:25

Egor363,

https://codepen.io/Mr_Sergo/pen/xvroNV

HTML5

1	<ul class="list"></ul>

Javascript

const galleryItems = [
    {
        url: 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
        alt: 'White and Black Long Fur Cat',
    },
    {
        url: 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
        alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
    }
]
for(let el of galleryItems) document.querySelector('.list').insertAdjacentHTML('beforeEnd', `<li><img src="${el.url}" alt="${el.alt}"></li>`);

CSS

1
2
3

img {
    width: 300px;
}

	01.08.2019, 16:25

Опции темы

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

Решение