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

dropoff,
css
<!DOCTYPE html>

<html>
<head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <style type="text/css">

.info-images{
        display: flex;
        width: 370px;
        border: 1px solid #0000FF;
        margin: 20px;

}
.info-images-wrap {
        background:red;
       flex: 1;
}

.info-image-wrap {
        width: 85%;
        background-color: green;
}

.info-image-wrap img {
        max-width: 100%;
        height:  auto;
        margin: 0;
        margin-bottom: -4px;
}


.info-images-thumbnails {
        text-align: center;
        padding: 0;
        list-style-type: none;
         display: flex;
         flex-direction: column;
         margin-top: 4px;

}

.info-images-thumbnails li {
        width: 90%;
        margin: 0px auto;
        padding: 0;
        max-height: 70px;
}

.info-images-thumbnails li img {
        max-width: 100%;
        height:  auto;
}

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <script>
$(function() {
    $(".info-images").each(function() {
        var el = $(this),
            parentImg = $(".info-image-wrap", el),
            img = $("img", parentImg),
            parentThumbnails = $(".info-images-wrap", el);
        parentThumbnails.on("click", "a", function(e) {
            e.preventDefault();
            img.attr("src", $(this).data("image"))
        }).find("a:first").click()
    })
});
        </script>
</head>

<body>
<div class="info-images">
        <div class="info-images-wrap">
                <ul class="info-images-thumbnails">
                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1-350x455.jpg"></a></li>
                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-350x455.jpg"></a></li>

                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"></a></li>

                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-350x455.jpg"></a></li>
                </ul>
        </div>
        <div class="info-image-wrap">
                <a href="#"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"></a>
        </div>
</div>

<div class="info-images">
        <div class="info-images-wrap">
                <ul class="info-images-thumbnails">
                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1-350x455.jpg"></a></li>
                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-350x455.jpg"></a></li>

                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"></a></li>

                        <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-350x455.jpg"></a></li>
                </ul>
        </div>
        <div class="info-image-wrap">
                <a href="#"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"></a>
        </div>
</div>
</body>
</html>

Последний раз редактировалось рони, 26.12.2018 в 01:27.
Ответить с цитированием