Форум

sashaslow · #1 (**permalink**) 24.08.2016, 16:58

Вот есть у меня 2 блока, в левом отображается всяческая информация (которая лежи друг под другом, например, с помощью display: none или z-indюx, неважно), а в правом – куча миниатюр. По клику на миниатюру контент в блоке слева должен меняться на выбранный, то есть клик по миниатюре 4=контент4; клик по миниатюре 1=контент1. Как такое реализовать, а то я в js совсем зеленый. Может через жиквери будет попроще, ванилла не обязательна.

И еще, может быть как-то можно сделать подгрузку контента динамической (но это не первостепенная задача)? При использовании display: none и иже с ним контент все равно грузится, хоть и не виден, что не очень хорошо. Или это уже совсем в бэк технологии?

Буду благодарен за любую наводку. Спасибо!

http://codepen.io/sashaslow/pen/AXGWoJ

рони · #2 (**permalink**) 24.08.2016, 18:37

sashaslow,
искать по открывашка и tabs
читать и использовать
делегирование
смотреть решение
https://learn.javascript.ru/task/image-gallery
http://plnkr.co/edit/5t7oDEbrx8G3UjUqtM2q?p=preview

warren buffet · #3 (**permalink**) 25.08.2016, 08:46

Сообщение от sashaslow

Может через жиквери будет попроще, ванилла не обязательна.

Что такое ванилла?

рони · #4 (**permalink**) 25.08.2016, 10:04

Сообщение от warren buffet

Что такое ванилла?

фреймворк vanilla js - шуточное название javascript.

warren buffet · #5 (**permalink**) 25.08.2016, 12:52

Я хотел узнать у ТС. А то он пишет ничего не понимаю в js, и тут же про ванилу. Не вяжется как-то.

sashaslow · #6 (**permalink**) 27.08.2016, 20:58

Да про делегирование я знаю.
Я решил делать так: по легенде, при клике на элемент обработчик должен вытаскивать его айди, после чего перебирать объект и менять разметку на значение ключа с этим айди.
Обосрался я где-то в районе перебора for, потому что не знаю как это сделать с условиями.
Этого франкинштейна можно оживить или я уже совсем с ума сошел?
Помогите с кодом, спасибо!

http://codepen.io/sashaslow/pen/YWmkrx

рони · #7 (**permalink**) 27.08.2016, 21:59

sashaslow,
медититруйте ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .gal img{
    width: 150px;
    height: 150px;
  }
  .show img{
    width: 300px;
    height: 150px;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var people = [{
        name: "Быдлокодер",
        text: "Орешки",
        big_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg",
        mini_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg"
    }, {
        name: "Петрович",
        text: "Помочь",
        big_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg",
        mini_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg"
    }];
    people.forEach(function(item,i) {
        var img = $("<img/>", {
            src: item.mini_foto,
            on: {
                click: function() {
                    $(".show").html("");
                    $("<h1/>", {
                        text: item.name
                    }).appendTo(".show");
                    $("<img/>", {
                        src: item.big_foto
                    }).appendTo(".show");
                    $("<p/>", {
                        text: item.text
                    }).appendTo(".show");
                }
            }
        }).appendTo(".gal")
      !i && img.click()
    })

});
  </script>
</head>

<body>
<div class="gal"></div>
<div class="show"></div>
</body>
</html>

sashaslow · #8 (**permalink**) 29.08.2016, 22:07

Систему понял! Спасибо!

Форум

Справочник

Discord чат

Курсы javascript