jQuery plugins - Slicebox
szept 19

Slicebox

Slider 3D hatással

Verzió: nincs adat
Kiadás dátuma: 2011/09/05
Fejlesztő: Pedro Botelho
Liszensz: MIT

Bevezető

Biztos sokan találkoztak már a CU3ER nevű flash slider-rel, amely a képek közti váltáshoz 3D-s hatást használ. A plugin már évek óta tarol, sok weboldalon köszön vissza ránk, azonban használata sajnálatos módon nem ingyenes (vagyis ingyenes használat esetén a lehetőségek erősen korlátozottak).

Mostantól mindez - részben - ingyenesen elérhető - jQuery nyelven is! Azért csak "részben", mert a 3D-s animációt jelenleg csak az újabb Safari és Chrome böngészők alatt élvezhetjük, mivel még csak ezek támogatják a CSS3 3D-s transzformációs képességeit.

Természetesen a többi böngészőben is működik a plugin, azonban csak egyszerű, easing effekteket támogató slider-ként - ehhez a modernizr plugin-t hívja segítségül.

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/modernizr.custom.13303.js"></script>
            <script type="text/javascript" src="js/jquery.slicebox.min.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').slicebox();
            });
          

Használat

            <div id="pelda" class="sb-slider">
              <img src="images/1.jpg" title="Cím 1" />
              <img src="images/2.jpg" title="Cím 2" />
              <img src="images/3.jpg" title="Cím 3" />
              ...
            </div>
          
          

Teljes paraméterlista

  • orientation: az animáció iránya - függőleges/vízszintes ('v' | 'h') (alapértelmezett: 'v')
  • perspective: a perspektíva 'mértéke' (azonos a -webkit-perspective CSS tulajdonsággal) (alapértelmezett: 1200)
  • slicesCount: az animációhoz használt 'szeletek' száma (páratlan szám 1 és 15 közt) (alapértelmezett: 1)
  • disperseFactor: a 'szeletek' eltolása megadott képponttal vízszintes/vagy függőleges irányban az orientation paramétertől függően (alapértelmezett: 0)
  • colorHiddenSides: az animáció során a szeletek nem látható oldalainak színe hexadecimális színkóddal (alapértelmezett: '#222')
  • sequentialRotation: a balról-jobbra/fentről-lefelé történő animáció engedélyezése/tiltása - tiltás esetén minden szelet egyszerre mozdul (true | false) (alapértelmezett: false)
  • sequentialFactor: (alapértelmezett: 0)
  • speed3d: a 3D animáció sebessége/időtartama milliszekundumban (alapértelmezett: 800)
  • speed: a 3D-s animációt nem támogató böngészők számára az alternatív animáció sebessége/időtartama (alapértelmezett: 600)
  • fallbackEasing: a 3D-s animációt nem támogató böngészők számára az alternatív animáció 'easing' hatása (alapértelmezett: 'easeOutExpo')
  • slideshow: automatikus lejátszás engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • slideshowTime: automatikus lejátszás esetén a képek közti késleltetés milliszekundumban (alapértelmezett: 2000)