Показать сообщение отдельно
  #7 (permalink)  
Старый 27.08.2016, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

большое фото по клику на маленьком jquery
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>
Ответить с цитированием