Javascript-форум - Как создать такого плана менюшку с выплывающей галереей?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как создать такого плана менюшку с выплывающей галереей? (https://javascript.ru/forum/dom-window/67554-kak-sozdat-takogo-plana-menyushku-s-vyplyvayushhejj-galereejj.html)

Как создать такого плана менюшку с выплывающей галереей?

Привет! Совсем недавно начала применять яву, задумала сделать себе сайт визитку и столкнулась со стеной :cray:

В общем, есть такое меню у меня через которое по идее при нажатии слов "От руки", "Зарисовки" и т.д. должно выплывать окно с соответствующими галереями.

Я смогла сделать само это окно галереи с помощью явы, а над остальным бьюсь уже очень долго... Если это нельзя сделать скриптами, то как? Помогите, плиз!!!

Код галереи:

var images = [
     
       '1z.jpg',        
       '2z.png',        
       '3z.png',        
       '4z.png',        
       '5z.png',        
       '6z.png',        
       '7z.png',        
                  
    ];
     
    var num = 0;
    function next() {
    var slider = 
    document.getElementById('slider');
    num++;
    if(num >= images.length) {
    num = 0;
  }
    slider.src = images[num];
}

    function prev() {
    var slider = 
    document.getElementById('slider');
    num--;
    if (num < 0) {
    num = images.length-1;
  }
    slider.src = images[num];

Eva Savel,
маловато информации и не

Цитата:

Сообщение от Eva Savel

яву

а javascript ...
в чём проблема, сделайте кнопки

Цитата:

Сообщение от Eva Savel

"От руки", "Зарисовки"

которые будут менять массив с картинками images

Подскажите, пожалуйста, как это правильно сделать?

Eva Savel,
попробуйте сделать минимальный html с css того что у вас на картинке.

Я имела в виду, как прописать такой код кнопке?

Eva Savel,
:-? 4 кнопки наверно li в ul.menu , стрелки это наверно span.prev и span.next и картинка наверно img#slider --- поправьте если это не так, если это тайна, то помочь как-то затруднительно :)

галерея img на js со сменой тем

Eva Savel,
надеюсь разберётесь ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  span {
    margin: 8px
  }
  img {
    height: 300px;
  }
  li, span{
    cursor: pointer;
  }

  </style>

  <script>
   window.addEventListener('DOMContentLoaded', function() {
     var content = document.querySelector('.content'),
     pictures = {hand : ["http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg", "http://cdn01.ru/files/users/images/66/f8/66f81f19420a1351d38afdd67950ff24.jpg", "http://www.mikymauz.estranky.cz/img/portrait.1.1385066842.jpeg"],
     sketch : ["http://cs309317.vk.me/v309317608/1662/mGnqKzd2LJ8.jpg", "https://cdn2.f-cdn.com/contestentries/89046/11683392/53c7a04ad21b4_thumb.jpg"],
     artwork : [],
     certificate : []},
     arr = pictures.hand,
     img = document.querySelector('#slider'),
     index = 0,
     src;
     content.addEventListener("click", function(event) {
     var el = event.target;
     if ("LI" == el.tagName) {
     arr = pictures[el.dataset.arr];
     index = 0;
     }
     else if(el.classList.contains("prev")) index--;
     else if(el.classList.contains("next")) index++;
     if(index >= arr.length) index = 0;
     if(index < 0) index = arr.length-1;
     if(src=arr[index]) img.src = src;
     });
       });
  </script>
</head>

<body>
<div class="content">
<ul class="menu">
    <li data-arr="hand">От руки</li>
    <li data-arr="sketch" >Зарисовки</li>
    <li data-arr="artwork">3</li>
    <li data-arr="certificate">4</li>
</ul>
<img src="http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg" alt="" id="slider">
<span class="prev">prev</span><span class="next">next</span>
</div>

</body>
</html>

Спасибо большое!
Немного переверстала все:)