jQuery plugins - Choco-Slider
nov 11

Choco-Slider

Egy "ízletes" slider

Verzió: 2.0
Kiadás dátuma: 2010
Fejlesztő: Alan G. Dawidowicz
Liszensz: MIT

Bevezető

Ismét egy slider, ami igazából nem hoz semmiféle megváltást, azonban böngészőfüggetlen, paraméterezhető, kis méretű (~7KB) és megbízhatóan működik.

Azonban fontos megemlíteni, hogy a plugin fejlesztője eléggé megzavarta a dolgokat:

  • az auto paraméternél a két érték fel van cserélve: az automatikus lejátszás funkció engedélyezése a false, tiltása a true értékkel történik!
  • az autoPause paraméterhez azt írja a honlapján, hogy segítségével a képre klikkelve megállítható a vetítés menete, azonban a tesztelés során kiderült, hogy a klikkelés helyett a hover eseményre gondol, azaz arra az esetre, amikor az egeret a slider (a kép) fölé visszük.

A választható átmeneti hatások sem kényeztetnek el minket túlzottan, csupán három lehetőség áll rendelkezésünkre:

  • effect1: a megjelenítendő képet meghatározott számú (paraméterből szabályozható) oszlopra osztja fel, amelyeket balról jobbra jelenít meg
  • effect2: egyszerű fade in/fade out hatás
  • random: az effect1 és effect2 hatások véletlenszerű alkalmazása

Implementálás

CSS

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

JavaScript

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

Deklaráció

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

Használat

            <div id="pelda">
              <a href="#"><img src="image1.jpg" alt="kép" title="1. kép címe" /></a>
              <a href="#"><img src="image2.jpg" alt="kép" title="2. kép címe" /></a>
              <a href="#"><img src="image3.jpg" alt="kép" title="" /></a>
              ...
            </div>
          

Teljes paraméterlista

  • auto: az automatikus lejátszás engedélyezése/tiltása (true | false)
    (Figyelem! A két paraméter fel van cserélve, lásd. a 'Bevezető'-t)
    (alapértelmezett: true)
  • autoPause: a lejátszás megállításának engedélyezése/tiltása,
    ha az egér a slider fölött van (true | false) (alapértelmezett: true)
  • speedStrip: az átmeneti effekt sebessége (alapértelmezett: 500)
  • effect: az átmeneti effekt típusa ('effect1' | 'effect2' | 'random') (alapértelmezett: 'random')
  • numberStrips: az átmeneti effektben használt oszlopok száma (alapértelmezett: 15)
  • sliderDelay: a képek közti váltás késleltetése milliszekundumban (alapértelmezett: 3000)
  • transparencytitle: a cím hátterének áttetszősége [0..1] (alapértelmezett: 0.8)
  • bChange: függvény meghívása a képek közti váltás kezdetén
  • aChange: függvény meghívása a képek közti váltás végén
  • chocoEnd: függvény meghívása, ha a slider megjelenítendő képek végére ért
  • controlNavigation: a slider alján lévő lapozó engedélyezése/tiltása (true | false)
    (alapértelmezett: true)