Стопка фотографий со слайдером

В данном уроке мы покажем как сделать небольшую галерею, в которой изображения  выглядят установленными в стопку. Слайдер регулирует расстояние между изображениями. При нажатии на изображение, оно поворачивается и становится в нормальную позицию, а с помощью слайдера все изображения можно раздвинуть так, что они не будут накладываться друг на друга. В проекте используются плагин 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>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/_PT2PvX9MFQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Стопка фотографий со слайдером | | 2012-06-24 16:22:35 | | Статьи Web-мастеру | | В данном уроке мы покажем как сделать небольшую галерею, в которой изображения  выглядят установленными в стопку. Слайдер регулирует расстояние между изображениями. При нажатии на изображение, оно | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: