Создать код JavaScript для просмотра изображений

@Игорь Князь · Регистрация: 04.10.2017

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

Создать код JavaScript для просмотра изображений, который в параметрах веб-страницы получает имена файлов, как массив в формате JSON (например,

var a = [ 'file1.jpg "," file2.gif "," file34.gif']

И показывает одно выбранное изображение. Выбор изображений происходит с помощью нажатия на иконки - уменьшенные копии изображений.

Помогите с заданиям нужно написать код на JavaScript, для просмотра изображений, если у кого-то есть пример или теория подскажите как.
Вот Html и css пример веб-страницы. К примеру при заходе в галерею должнены быть изображения, не знаю чесно говоря как это сделать в javascroipt буду благодарен за помощь

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name ="description" content "is test stories">
   <meta name = "keywords" content "test,ediction">
   <meta name = "author" content "Ihor">
  <title>Images test</title>
  <link rel="icon" href="img/favicon.png" type="image/x-icon" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
 <style type="text/css">
  
  </style>
 </head>
 <body>
 <table width="100%" cellspacing="0" cellpadding="0">
 
      <tr>
        <td class="header">
       <ul>
  <li><a href="index.html">Главная страница</a></li>
  <li><a href="gallery.html">Галерея</a></li>
  <li><a href="contacts.html">Контакты</a></li>
  <li><a href="help.html">Справка и помощь</a></li>
 </ul>
        </td>
 
         
     </tr>
 </table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
 
  body
  {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
   td.header {
  box-shadow: 0 0 10px rgba(0,0,0,0.5); 
  background: linear-gradient(to top, red, orange);
  height: 80px;
  width: 100%;
   } 
 
 
 
    
 
/*navbar*/
 
 
.header ul {
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding: 0;
    padding-left: 10%;
    padding-top: .7em;
    overflow: hidden;
}
 
.header ul li {
    float: left;
}
 
.header ul li a {
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    transition: .6s ease;
    text-decoration: none;
    cursor: pointer;
}
.header ul li a:after {
    background-color: #FF5050;
    display: block;
    border-radius: 5%;
    content: "";
    margin-top: .2em;
    height: 2px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.header ul li a:hover:after,
.header ul li a:focus:after {
    width: 100%;
}
 
.footer {
   box-shadow: 0 0 10px rgba(0,0,0,0.5); 
  background: linear-gradient(to bottom, yellow, red);
  width: 100%;
  height: 80px;
}
 
.footer p {
  text-align: center;
  margin-top: 1em;
}
 
 
 
 
@media(max-width: 768px) {
  td {
    width: 100%!important;
  }
}

Добавлено через 4 минуты
Сорри случайно не там создал тему, просьба перенести или удалить

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .