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/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="scripts/jquery.nivo.slider.pack.js"></script>

HTML

<div id="slider" class="nivoSlider">
   <img src="images/megamind.jpg" alt="" />
   <a href="https://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;
}

JS

И нам нужно вызвать наш плагин:

$(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