В данном уроке мы покажем как сделать небольшую галерею, в которой изображения выглядят установленными в стопку. Слайдер регулирует расстояние между изображениями. При нажатии на изображение, оно поворачивается и становится в нормальную позицию, а с помощью слайдера все изображения можно раздвинуть так, что они не будут накладываться друг на друга. В проекте используются плагин jQuery rotate3Di и слайдер JQuery UI.

В основе лежит HTML код ( в демонстрации используется 8 изображений):

<div id="container">
    <div id="slider"></div>
    <br/>
    <div id="images">
        <img class="img_main" src="img/01.jpg"/>
        <img class="img" src="img/02.jpg"/>
        <img class="img" src="img/03.jpg"/>
        <img class="img" src="img/04.jpg"/>
        <img class="img" src="img/05.jpg"/>
        <img class="img" src="img/06.jpg"/>
        <img class="img" src="img/07.jpg"/>
        <img class="img" src="img/08.jpg"/>
    </div>
</div>

Стиль CSS для создания стопки изображений:

#container {
    padding: 50px;
    margin-top: 20px;
}
#images {
    padding: 40px;
}
#images img {
    margin-left: -100px;
    background: #e9e9e9;
    padding: 10px;
    cursor: pointer;
}
#images img:hover {
    background: #333;
}
#slider {
    width: 380px;
}

Слайдер используется для изменения поля для каждого изображения, исключая первое изображение. При нажатии на изображение оно поворачивается либо в нормальное положение, либо в положение в стопке.

$(function() {
    $( "#slider" ).slider({
        value: -100,
        min: -100,
        max: 0,
        step: 1,
        slide: function( event, ui ) {
            $(".img").css("margin-left", ui.value + "px");
        }
    });
  
    $("img").rotate3Di(45);
  
    $("img").click(function() {
        var str = $(this).attr("style");
        var index = str.indexOf("skew");
        var substr = str.substr(index+5, 10);
        var split = substr.split(", ");
        var val = parseFloat(split[1])
        if ((val == 0)) {
            $(this).rotate3Di(45, 1000);
        } else {
            $(this).rotate3Di(0, 1000);
        }
    });
});

И обязательно нужно включить плагины и стили для них:

<link rel="stylesheet" href="js/theme/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>

Добавлено: 08 Мая 2018 10:37:22 Добавил: Андрей Ковальчук Нравится 0

Добавить