СКРОЛЛЕР ИЗОБРАЖЕНИЙ

+ -
0
СКРОЛЛЕР ИЗОБРАЖЕНИЙ


Плагин - CoverScroll - осуществляющий прокрутку изображений.

Разметка HTML
<div id="container">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />
</div>


CSS
Пример для верхнего варианта показанного на Демо странице
            .itemTitle{
                padding-top:30px;
            }            #container2{
                /*border:1px solid magenta;*/
                width:850px;
                height:188px;
                margin-left:25px;
            }
            #container2 img, #container2 .item{
                width:100%;
                height:100%;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -o-border-radius: 10px;
                border-radius: 10px;
                -moz-box-shadow: 0px 5px 5px #777;
                -webkit-box-shadow: 0px 5px 5px #777;
                box-shadow: 0px 5px 5px #777;
            }             /*#container2 .selectedItem{            
                border:2px solid #0071BC;
            }*/


javascript
Подключаем jQuery и плагин:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="scripts/jquery.coverscroll.min.js"></script>


И скрипт инициализации:
$('#container').coverscroll();


или же
$('#container').coverscroll({items:'img'});


Где значение "items" - это опция, селектор для потомков контейнера (аналогичо варианту: $('#container').find('img'); ). Это необходимо, только в случае, если используется не img, а другой тег, например DIV.
для верхнего примера в Демо:
$('#container').coverscroll({
     items:'.item',
     minfactor:10,
     scalethreshold:5,
     staticbelowthreshold:true,
     distribution:1
     });


Опции
Это опции по умолчанию:
  var opt = {
    'minfactor':20, // насколько следующий элемент меньше предыдущего в пикселях
    'distribution':1.5, // если это значение меньше 1, то элементы будут отделяться друг от друга
    'scalethreshold':0, // как мноо элементов нужно иметь в начале, чтобы начать масштабирование
    'staticbelowthreshold':false, // если true - когда кол-во элементов меньше, чем в "scalethreshold" - не анимировать.
    'titleclass':'itemTitle', // Название класса элемента, содержащего элемент названия
    'selectedclass':'selectedItem', // Название класса выбранного элемента
    'scrollactive':true, // прокрутка включена
    'step':{ // compressed items on the side are steps
        'limit':4, // how many steps should be shown on each side
        'width':8, // how wide is the visible section of the step in pixels
        'scale':true // scale down steps
    },
    'bendamount':2, // Параметр "bending" (изгиб) для CoverScroll (значения от 0.1 до 1 изгиб вниз, от -0.1 до -1 изгиб вверх, 2 прямо (без изгиба), 1.5 небольшой наклон)
      'movecallback':function(item){} // функция обратного вызова, вызывается после клика на элемент
  };


Методы:
Это перечень поддерживаемых методов:
- следующий - движение к следующему пункту (вперед)
$('#container').coverscroll('next');
- предыдущий - движение к предыдущему пункту (назад)
$('#container').coverscroll('prev');

Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0