jQuery plugins - Lof JSliderNews
okt 09

Lof JSliderNews

Csúcskategóriás slider

Verzió: 1.0
Kiadás dátuma: 2010/02/08
Fejlesztő: LandOfCoder
Liszensz: MIT, GNU

Bevezető

Egy slider, ami bár nem bír akkora hírnévvel, mint pl. a Coda-Slider (legalábbis jelen állás szerint), de azt hiszem tudásban simán felveszi vele a küzdelmet: az animációkhoz az easing plugin-t használja (amely nem kevés effektet sorakoztat fel), a navigációhoz akár az egér görgőjét is használhatjuk (amely kifejezetten kényelmes megoldás), illetve a plugin a rendelkezésünkre bocsájtott paramétereken keresztül könnyedén és jól személyre szabható.

Jellemzők

  • egérgörgő használata
  • easing animációk
  • automatikus lejátszás
  • könnyedén személyre szabható navigáció (gombok, számok, bélyegképek)
  • 'preload' gif használata (CSS-ből módosítható)

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.easing.js"></script>
            <script type="text/javascript" src="js/script.js"></script>
          

Deklaráció

            $('example').lofJSidernews({
              ... // paraméterek
            })
          

Használat

A HTML kód az alábbi struktúrát követi, amennyiben a paraméterek segítségével nem módosítjuk pl. a slide-ok szelektorát, vagy a navigációs részt:

            <div id="example" class="lof-slidecontent">
              <div class="preload"></div>
              <div class="lof-main-outer">
                <ul class="lof-main-wapper">
                  <li>Slide 1</li>
                  <li>Slide 2</li>
                  <li>Slide 3</li>
                  <li>Slide 4</li>
                </ul>
              </div>
              <div class="lof-navigator-wapper">
                <div class="lof-next">Következő</div>
                <div class="lof-navigator-outer">
                  <ul class="lof-navigator">
                    <li>Navigációs elem 1</li>
                    <li>Navigációs elem 2</li>
                    <li>Navigációs elem 3</li>
                    <li>Navigációs elem 4</li>
                  </ul>
                </div>
                <div class="lof-previous">Előző</div>
              </div>
            </div>
          

Bár a plugin tényleg nagyon mutatós, a dokumentációja hagy némi kívánni valót maga után. Az se semmi, hogy a plugin honlapján már a deklaráció bemutatása is el van írva, de ráadásként még a demo-k is (CSS és HTML kódokat nézve) igen összecsapottak és átláthatatlanok.

A dokumentáció hiányosságai miatt az alábbi paraméterlistában akad egy-két tisztázatlan paraméter, de ettől függetlenül a plugin gyári állapotában is kifogástalanul használható. A kódok jobb átláthatósága érdekében a példákat 'emészthető' formára hoztam, így az innen letölthető állományban ez és nem a fejlesztő által összecsapott, átláthatatlan adathalmaz találtható.

Teljes paraméterlista

  • direction: a slide-ok közti váltás típusa (opacity | alapértelmezett: jobbról balra csúsztat)
  • mainItemSelector: az egyes slide-ok szelektora (alapértelmezett: 'li')
  • navInnerSelector: (alapértelmezett: 'ul')
  • navSelector: a navigációs elemek szelektora (alapértelmezett: 'li')
  • navigatorEvent: a navigációs elemekhez rendelt esemény (alapértelmezett: 'click')
  • wapperSelector: a slide-ok konténer elemének szelektora (alapértelmezett: '.lof-main-wapper')
  • mainWidth: a slider szélessége pixel-ben (alapértelmezett: 600)
  • interval: automatikus lejátszás esetén a váltások közti időtartam milliszekundumban (alapértelmezett: 4000)
  • auto: automatikus lejátszás engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • maxItemDisplay: megjelenített navigációs elemek száma (alapértelmezett: 3)
  • startItem: a kezdő slide sorszáma - a sorszámozás nullától indul (alapértelmezett: 0)
  • navPosition: a navigáció tájolása ('vertical' | 'horizontal') (alapértelmezett: 'vertical')
  • navigatorHeight: navigációs elem magassága (alapértelmezett: 100)
  • navigatorWidth: navigációs elem szélessége (alapértelmezett: 310)
  • duration: a slide-ok közti átmenet időtartama milliszekundumban (alapértelmezett: 600)
  • navItemsSelector: a navigációs elemek szelektora (alapértelmezett: '.lof-navigator li')
  • navOuterSelector: a navigációs elemek konténer elemének szelektora
    (alapértelmezett: '.lof-navigator-outer')
  • isPreloaded: (alapértelmezett: true)
  • easing: az animáció típusa (alapértelmezett: 'easeInOutQuad')
  • buttons: gombok definiálása (használatra példa a bemutató oldalakon) (alapértelmezett: null)

Tippek

  • A plugin sajnos IE10 alatt nem működik.