NIVO SLIDER - ПЛАГИН СЛАЙДШОУ

NIVO SLIDER - ПЛАГИН СЛАЙДШОУ


Ещё один простенький плагин с 16 вариантами всевозможных эффектов. Тестировался на Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+

В шапке подключаем CSS, jQuery и сам плагин:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>


Разметка HTML
            <div id="slider" class="nivoSlider">
                <img src="images/megamind.jpg" alt="" />
                <a href="http://pcvector.net"><img src="images/up.jpg" alt="" title="Это пример описания" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>Это</strong> пример <em>HTML</em> описания со <a href="#">ссылкой</a>.
            </div>


Обратите внимание, что только в DIV slider могут находится только изображения, или изображения-ссылки. Любые другие теги сломают слайдер.
Чтобы добавить описание к изображению нужно просто добавить к нему атрибут title="Текст описания".
Чтобы добавить html описание к изображению, нужно установить для него атрибут title="#htmlcaption" (идентификатор может быть любой, но обязательно перед ним должен быть символ "#") и создать новый DIV с id="#htmlcaption" (с тем же идентификатором, который задан в title) и классом class="nivo-html-caption". Внутри этого DIV помещаем оформленное с использованием html тегов описание картинки. Данный DIV должен находится за пределами DIV slider.

CSS
#slider {
    position:relative;
    width:618px; /* ширина изображения */
    height:246px; /* высота изображения */
    background:url('images/loading.gif') no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}


javascript
И нам нужно вызвать наш плагин:
$(window).load(function() {
    $('#slider').nivoSlider();
});


Nivo slider имеет множество вариантов различных эффектов. Вот пример использования всех возможностей с установленным по умолчанию значениями:
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // Выберите эффекты: 'fold,fade,sliceDown'
        slices:15, // Для slice animations
        boxCols: 8, // Для box animations
        boxRows: 4, // Для box animations
        animSpeed:500, // Скорость смены слайдов
        pauseTime:3000, // Время показа одного слайда
        startSlide:0, // Настройка запуска Slide (0 index)
        directionNav:true, // Использование навигации Вперед, Назад
        directionNavHide:true, // Показывать только при наведении мыши
        controlNav:true, // 1,2,3... навигация
        controlNavThumbs:false, // Использовать миниатюры для навигации
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Использовать стрелки Влево и Вправо
        pauseOnHover:true, // Остановка навигации при наведении
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Прозрачность описания
        prevText: 'Назад', // Назад directionNav текст
        nextText: 'Вперед', // Вперед directionNav текст
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});


Следующие эффекты могут быть использованы:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse

Скачать исходник:
Скачать файл: nivo_slider.rar [216,81 Kb] (cкачиваний: 16)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.