Форум

Серега187 · #1 (**permalink**) 13.02.2016, 12:44

Привет ребята, может кто поможет сделать так, как на этом сайте http://panda.su/section/sushi/ При клике на картинку увеличивается вся карточка товара. Или может есть где подобный пример кода, а то я не шарю в JS и JQ. У меня такой код. Нужно чтобы карточка увеличилась до width = 500px.

<div class="product">                 
  <img class="productImg" src="img1.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>

рони · #2 (**permalink**) 13.02.2016, 13:50

Серега187,
зарисовка на тему ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.product.big{
    -webkit-transform:scale(1.4) translateY(60px);
    -moz-transform:scale(1.4) translateY(60px);
    -o-transform:scale(1.4) translateY(60px);
    transform:scale(1.4) translateY(60px);
    z-index:10;
  }

  .product:first-child.big{
    -webkit-transform:scale(1.4) translateY(60px) translateX(40px);
    -moz-transform:scale(1.4) translateY(60px) translateX(40px);
    -o-transform:scale(1.4) translateY(60px) translateX(40px);
    transform:scale(1.4) translateY(60px) translateX(40px);
    z-index:10;
  }

  .product{
    border-radius: 12px;
    margin:6px;
    background-color:#FFFFFF;
    position:relative;
    width:150px;
    height:300px;
    float:left;
    -webkit-transition:all 1.2s ease-in-out;
    -moz-transition:all 1.2s ease-in-out;
    -o-transition:all 1.2s ease-in-out;
    -ms-transition:all 1.2s ease-in-out;
    transition:all 1.2s ease-in-out;
    font-size:15px;
    border:2px solid #8B4513;
    width:200px;
  }

  .product img{
    border-radius: 12px;
    cursor:pointer;
    width:100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
      $(".product img").on("click", function() {
      $(".product").not($(this).parent().toggleClass("big")
).removeClass("big");
      })
     $('html').click(function (event) {
          if ($(event.target).closest('.product' ).length) return;
          $(".product").removeClass("big");
      });
   })
  </script>
</head>

<body>
  <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
  <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
   <div class="product">
  <img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
  <h2>...</h2>
  <div class="opis">
    <p>...</p>
  </div>
</div>
</body>

</html>

Серега187 · #3 (**permalink**) 13.02.2016, 13:55

рони,
Спасибо большое!

destus · #4 (**permalink**) 13.02.2016, 17:33

Серега187,
ну ты че) Открывай исходный код страницы смотри как они сделали, скачивая js код. Тут даже думать не надо

рони · #5 (**permalink**) 13.02.2016, 19:16

Серега187,
не было уменьшения по клику на увеличенном блоке ... исправлено, смотрите пост 2 снова

Deff · #6 (**permalink**) 13.02.2016, 23:08

рони, Мон сделать на css (на img, обернутым в label совместно с чекбоксом до img, (чекбокс:checked+ img{width:500px})

рони · #7 (**permalink**) 13.02.2016, 23:23

Deff,
точно

Форум

Справочник

Discord чат

Курсы javascript