jQuery plugins - ChopSlider
aug 04

ChopSlider

Slider brutális effektekkel!

Verzió: 1.1.0
Kiadás dátuma: 2011/07/09
Fejlesztő: iDangero.us
Liszensz: MIT

Bevezető

A ChopSlider olyan brutális effektekkel támad, hogy mindenképp be kellett kerülnie az oldalra. Azért írom ezt így, mert a plugin nem túl felhasználó barát, hisz az átlagos gépeket valószínűleg keményen megizzasztja egy-egy képváltáskor. Mindenesetre mindenki maga döntse el, hogy érdemes-e a slider-t beépítenie az oldalába, vagy sem. Egy biztos, eddig nem sok ilyen slider-rel lehetett találkozni, így mindenképp unikumnak számít e téren.

A legjobb az egészben az, hogy ezek az effektek nem előre definiált animációk, hanem paraméterek tömkelege áll rendelkezésünkre, hogy apró, részletekbe menően alakíthassuk ki az animációkat - ezáltal a lehetőségek száma igen nagy.

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.id.chopslider-1.1.0.js"></script>
          

Deklaráció

Sajnos a plugin deklarációjánál majdnem minden paramétert kötelező megadni, így ez külön nem kerül résztelezésre, működő példa a bemutató oldalon található.

Teljes paraméterlista

  • loader: a 'slider loader' elem szelektora
  • loaderIndex: a 'slider loader' z-index értéke (alapértelmezett: 20000)
  • slide: az egyes képek konténer elemének szelektora
  • nextTrigger: a 'következő' gomb szelektora
  • prevTrigger: az 'előző' gomb szelektora
  • hideControls: a képek közti váltás idejére a navigációs gombok elrejtésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • useCaptions: a képek feliratának engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • everyCaptionIn: a képfeliratok konténerelemének szelektora
  • showCaptionIn: a képfelirat konténer elemének szelektora
  • captionTransform: (alapértelmezett: )
  • type: az átmenet típusa ('vertical' | 'horizontal' | 'multi') (alapértelmezett: 'vertical')
  • hPieces: vízszintes felosztás mértéke - 'horizontal' és 'multi' típus esetén (alapértelmezett: 10)
  • vPieces: függőleges felosztás mértéke - 'vertical' és 'multi' típus esetén (alapértelmezett: 10)
  • xOffset: váltás során a szétdarabolt kép elemeinek vízszintes eltolása képpontban
    (alapértelmezett: 0)
  • yOffset: váltás során a szétdarabolt kép elemeinek függőleges eltolása képpontban (alapértelmezett: 0)
  • rotate: váltás során a szétdarabolt kép elemeinek elforgatása fokban (alapértelmezett: 0)
  • rotateSymmetric: true érték esetén mindegyik képdarab elforgatása azonos mértékű
    (rotate paraméternek megfelelően), míg false érték esetében az elforgatás szimmetrikusan megy végbe a kép két szélén (true | false) (alapértelmezett: true)
  • scaleX: a képdarabok vízszintes nyújtása százalékban (alapértelmezett: 1)
  • scaleY: a képdarabok függőleges nyújtása százalékban (alapértelmezett: 1)
  • translateX: váltáskor az egész kép vízszintes eltolásának mértéke képpontban (alapértelmezett: 0)
  • translateY: váltáskor az egész kép függőleges eltolásának mértéke képpontban (alapértelmezett: 0)
  • ease1: az átviteli animáció első részének easing típusa (alapértelmezett: ease)
  • ease2: az átviteli animáció harmadik részének easing típusa (alapértelmezett: ease)
  • origin: eredeti CSS3 tulajdonságok átalakítása minden egyes képdarabra
    (alapértelmezett: '50% 50%')
  • dur1: a képdarabok úsztatásának sebessége (időtartama) milliszekundumban
    (alapértelmezett: 1000)
  • dur2: az eredeti képdarabok új képdarabokká váltásának (fade effekt) sebessége
    (alapértelmezett: 600)
  • dur3: az animáció harmadik részében az új képdarabok vissza úsztatásának sebessége (időtartama) milliszekundumban (alapértelmezett: 1000)
  • pieceDelay: késleltetés mértéke milliszekundumban az egyes képdarabok animációja közt (alapértelmezett: 50)
  • xFadeDelay: a képdarabok késleltetése milliszekundumban az animáció első és második szakasza közt (alapértelmezett: 300)
  • autoplay: automatikus lejátszás engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • autoplayDelay: automatikus lejátszás esetén a képek közti késleltetés időtartama milliszekundumban (alapértelmezett: 10000)
  • onStart: egyéni funkció az animáció kezdetekor
  • onEnd: egyéni funkció az animáció végén
  • disableCSS3: CSS3 támogatta effektek használatának engedélyezése/tiltása
    (alapértelmezett: false)
  • prevTransition: egyéni funkció az "előző" gombhoz
  • mobile: paraméterek definiálása mobil eszköz használata esetén
  • noCSS3: paraméterek definiálása a régebbi böngészők számára, melyek nem kezelik még a CSS3-at