jQuery plugins - Nivo Slider
júl 08

Nivo Slider

Slideshow többféle átmeneti hatással

Verzió: 2.0
Kiadás dátuma: 2010 május
Fejlesztő: Gilbert Pellegrom
Liszensz: MIT

Bevezető

A Nivo Slider egy igazán könnyen kezelhető kép slider, ahol a képek átúsztatásához 9 egyedi, látványos átmeneti hatásból választhatunk. A plugin navigálható billentyűzetről is, támogatja a feliratokat, illetve a képekhez linkeket lehet rendelni. Összességében elmondható, hogy egy könnyen kezelhető, igen sokat tudó slider a Nivo Slider!

Jellemzők

  • 9 egyedi átmeneti hatás
  • egyszerű, letisztult
  • könnyen testreszabható (pl. animáció típusa, sebessége, késleltetés időtartama, stb.)
  • billentyűzet-navigáció (tiltható)
  • linkelhető képek
  • feliratozható képek
  • kompatibilitás: Internet Explorer 7+, Firefox 3+, Google Chrome 4, Safari 4, Opera v10.5.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="nivo-slider.css"/>
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
          

Deklaráció

A diavetítés képeit egy div blokkban kell elhelyeznünk. Hogy egyértelműen hivatkozhassunk erre a div-re, egy egyedi azonosítót kell hozzá rendelnünk (pl. #slider), amelyet a deklaráció során meg kell adnunk:

            $(window).load(function() {
              $('#slider').nivoSlider();
            });
          

Fenti kódrészlettel egy alap slider-t hoztunk létre (alapértelmezett beállításokkal), de természetesen ennél sokkal részletesebben paraméterezhető a kinézete, működése (a lehetséges opciókat lásd lejjebb).

Használat

A képek beágyazása div blokkba:

            <div id="slider">
              <img src="images/slide1.jpg" alt="" />
              <img src="images/slide2.jpg" alt="" />
              <img src="images/slide3.jpg" alt="" />
              <img src="images/slide4.jpg" alt="" />
            </div>
          

Teljes paraméterlista:

  • effect: átmeneti hatás (alapértelmezett: random) (lehetséges értékeit lásd lejjebb)
  • slices: az átmeneti hatás oszlopainak ("szeletjeinek") száma (alapértelmezett: 15)
  • animSpeed: az átmeneti animáció sebessége (alapértelmezett: 500)
  • pauseTime: késleltetés/szünet két átmenet közt milliszekundumban (alapértelmezett: 3000)
  • startSlide: a diavetítés kezdőképének sorszáma (kezdő sorszám: 0)
  • directionNav: oldalsó navigációs gombok (következő/előző) engedélyezése/tiltása (true | false)
  • directionNavHide: navigációs gombok mutatása hover esemény esetén (true | false)
  • controlNav: alsó navigációs gombok (pl. 1,2,3,...) engedélyezése/tiltása (true | false)
  • controlNavThumbs: a számozások helyett bélyegképek használata controlNav-ként (true | false)
  • controlNavThumbsFromRel: a kép rel attribútuma, mint bélyegkép (true | false)
  • controlNavThumbsSearch: bélyegképek kiterjesztése (pl.: '.jpg')
  • controlNavThumbsReplace: a bélyegképek beazonosítása (pl.: '_thumb.jpg')
  • keyboardNav: billentyűzet navigáció engedélyezése/tiltása (true | false)
  • pauseOnHover: slider működésének megállítása, ha az egér fölötte van (true | false)
  • manualAdvance:
  • captionOpacity: a képek feliratainak áttetszősége [0..1] (alapértelmezett: 0.8)
  • beforeChange: diaváltás előtti esemény meghívása
  • afterChange: diaváltás utáni esemény meghívása
  • slideshowEnd: esemény meghívása, ha minden képjelenet (slide) lejátszódott

Az 'effect' paraméter lehetséges értékei:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • random

Tippek

  • Az egyes képek betöltése előtti villanás megszüntetése CSS-ből
                    #slider
                    {
                      position: relative;
                      background: url(images/loading.gif) no-repeat 50% 50%; 
                    }
    
                    #slider img
                    {
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      display: none;
                    }
                  
  • A slider elindítása/megállítása manuálisan:
                    $('#slider').data('nivo:vars').stop = true; // Slider indítása
                    $('#slider').data('nivo:vars').stop = false; // Slider megállítása
                  
  • Bélyegképes navigáció esetén a CSS-t a következő kóddal kell bővíteni:
                    #slider .nivo-controlNav img
                    {
                      display: inline;
                      position: relative;
                    }
                  
  • Ahhoz, hogy egy oldalon belül több Nivo Slider-t alkalmazhassunk, minimum jQuery v1.4.0 szükséges!