jQuery plugins - Orbit
dec 06

Orbit

Slider időzítővel

Verzió: 1.1
Kiadás dátuma: 2010/09/30
Fejlesztő: ZURB
Liszensz: MIT

Bevezető

Az Orbit első, szembetűnő sajátossága a jobb felső sarokban található időzítő: egyszerre látványos és hasznos.

Másik, kevésbé szembetűnő sajátossága, hogy könnyedén implementálható bármely oldalba. Ez abban nyilvánul meg, hogy (a többi slider-től eltérően) nem igényel CSS buherálást: automatikusan igazodik a beágyazott képek magasságához és szélességéhez, ezáltal pl. a manuális navigáció (következő/előző gombok), illetve a lapozó rész is automatikusan igazodik a slider-hez (természetesen ehhez elengedhetetlen, hogy azonos méretű képeket használjunk!).

Végül, de nem utolsó sorban egy olyan funkció, amit én személy szerint mindig is hiányoltam a slider-ekből: a képekhez rendelhető címek tetszőleges HTML kódok lehetnek, azaz pl. ha úgy tetszik, akkor a képhez rendelhetünk egy főcímet, egy alcímet és mondjuk egy "tovább" link-et is, melyeket egymástól függetlenül tetszőleges formára hozhatunk.

Implementálás

CSS

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

JavaScript

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

Deklaráció

            $(window).load(function(){
              $('#pelda').orbit();
            });
          

Használat

A képeket egy div blokkban kell elhelyezni, amihez a plugin-t hozzá rendeljük. A képek szerepelhetnek szimplán magukban, de akár linkeket is rendelhetünk hozzájuk.

Az Orbit, eltérve a többi slider-től, a képekhez rendelt címeket nem a linkek title, vagy a képek alt attribútumából szedi, hanem a slider után kell egyenként felsorolnunk őket. Hogy melyik képhez melyik cím tartozik, azt a kép rel attribútumával, illetve a cím azonosítójával tudjuk meghatározni.

Lényegében a címek ilyetén "szokatlan" megvalósítása teszi lehetővé, hogy azok tetszőleges HTML kódokból épüljenek fel.

            <div id="pelda">
              <a href="#"><img src="images/img1.jpg" alt="" rel="cim-1" /></a>
              <a href="#"><img src="images/img2.jpg" alt="" rel="cim-2" /></a>
              ...
            </div>

            <span class="orbit-caption" id="cim-1">Cím 1</span>
            <span class="orbit-caption" id="cim-2">Cím 2</span>
          

Teljes paraméterlista

  • animation: automatikus váltás típusa
    ('fade' | 'horizontal-slide' | 'vertical-slide') (alapértelmezett: 'fade')
  • animationSpeed: az automatikus váltás sebessége (alapértelmezett: 800)
  • advanceSpeed: automatikus lejátszás esetén a váltások közti késleltetés milliszekundumban (alapértelmezett: 4000)
  • startClockOnMouseOut: ha manuálisan váltunk a képek közt, akkor az időzítő automatikusan megáll. A paraméter segítségével engedélyezetjük/tilthatjuk, hogy az időzítő újrainduljon-e, ha az egérmutatót elmozgatjuk a slider-ről (true | false) (alapértelmezett: true)
  • startClockOnMouseOutAfter: előző opció engedélyezése esetén az időzítő újraindításának késleltetése milliszekundumban (alapértelmezett: 3000)
  • directionalNav: manuális navigáció (következő/előző gombok) engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • captions: feliratok/címek engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • captionAnimationSpeed: a feliratok becsúszásának sebessége (alapértelmezett: 800)
  • timer: időzítő engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • bullets: lapozó engedélyezése/tiltása (true | false) (alapértelmezett: false)

Tippek

  • Amennyiben szeretnénk előtöltőt használni a slider-hez, akkor a következő sort kell a CSS kódban elhelyezni (természetesen a slider azonosítóját, szélességét és magasságát aktualizálva):
                    #pelda { width: 940px; height: 450px; background: #009cff url(loading.gif) no-repeat center center; overflow: hidden; }
                  
  • Amennyiben a plugin-t a '$(document).ready(function(){ })' függvénnyel ágyaztam be, nem működött Safari, Google Chrome és IE7 alatt, azonban a '$(window).load(function(){ }' függvény használatával a problémák megoldódtak.
  • IE alatt az időzítő kijelzője nem működik!