jQuery plugins - Diapo
szept 06

Diapo

Ismét egy slider

Verzió: 1.0.1
Kiadás dátuma: 2011/08/28
Fejlesztő: Manuel Masia
Liszensz: MIT

Bevezető

A Diapo plugin segítségével könnyedén tudunk slider-t létrehozni képekhez, videókhoz, vagy egyéb HTML tartalmakhoz egyaránt. Mindehhez látványos átmenetek, valamint további hasznos funkciók társulnak.

Jellemzők

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/diapo.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
            <script type="text/javascript" src="js/jquery.mobile-1.0b2.min.js"></script>
          

Deklaráció

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

Használat

A képeket egy konténer elemen (#pelda) belül, külön div-ekben kell elhelyezni. Mint a lenti példában látható, bélyegképet a data-thumb attribútum segítségével rendelhetünk az egyes képekhez. További attribútumok is rendelkezésre állnak, ezek listája lejjebb található.

A képek címeit is div elemekben kell elhelyeznünk, amelyek viselkedését CSS osztályok hozzárendelésével tudjuk befolyásolni. A CSS osztályok listája szintén megtalálható lejjebb.

            <div id="pelda">
              <div data-thumb="images/thumbs/img1.jpg" >
                <img src="images/slides/img1.jpg" width="940" height="470" alt="" />
                <div class="caption elemHover fromLeft">Képfelirat</div>
              </div>
              ...
            </div>
          

Teljes paraméterlista

  • selector: a slider CSS szelektora (alapértelmezett: 'div')
  • fx: az átmenethez használt effekt (alapértelmezett: 'random') (lehetséges értékeit lásd lejjebb)
  • mobileFx: az átmenethez használt effekt mobil eszközön - üres érték esetén az fx paraméterben meghatározott effekt lesz érvényes (alapértelmezett: '') (lehetséges értékeit lásd lejjebb)
  • gridDifference: a képek rácsos felosztásánál az egyes szeletek lassításához a paraméter értékének kisebbnek kell lennie a transPeriod paraméterben megadottnál (alapértelmezett: 250)
  • easing: az átmenethez/effekthez használt easing hatás (alapértelmezett: 'easeInOutExpo')
  • mobileEasing: az átmenethez/effekthez használt easing hatás mobil eszközökön - üres érték esetén az easing paraméterben meghatározott effekt lesz érvényes (alapértelmezett: '')
  • loader: az előtöltő típusa (pie | bar | none) (alapértelmezett: 'pie')
  • loaderOpacity: az előtöltő áttetszősége (0..1) (alapértelmezett: .8)
  • loaderColor: az előtöltő színe - hexadecimális színkód (alapértelmezett: '#ffff00')
  • loaderBgColor: az előtöltő háttérszíne - hexadecimális színkód (alapértelmezett: '#222222')
  • pieDiameter: a körszelet-időzítő (pie) mérete (átmérője) képpontban (alapértelmezett: 50)
  • piePosition: a körszelet-időzítő (pie) pozíciója (alapértelmezett: 'top:5px; right:5px')
  • pieStroke: a körszelet-időzítő (pie) sávjának vastagsága képpontban (alapértelmezett: 8)
  • barPosition: az időzítő-sáv (bar) pozíciója ('bottom' | 'top') (alapértelmezett: 'bottom')
  • barStroke: az időzítő-sáv (bar) vastagsága képpontban (alapértelmezett: 5)
  • navigation: előző/következő gombok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • mobileNavigation: előző/következő gombok engedélyezése mobil eszközökön (true | false) (alapértelmezett: true)
  • navigationHover: navigációs gombok megjelenítésének engedélyezése/tiltása, ha az egér a slider fölött van (true | false) (alapértelmezett: true)
  • mobileNavHover: navigációs gombok megjelenítésének engedélyezése/tiltása mobil eszközökön, ha az egér a slider fölött van (true | false) (alapértelmezett: true)
  • commands: stop és play gombok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • mobileCommands: stop és play gombok engedélyezése/tiltása mobil eszközökön (true | false) (alapértelmezett: true)
  • pagination: lapozó megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
    A lapozó HTML kódja:
                    <div id="pix_pag">
                      <ul id="pix_pag_ul">
                        <li id="pag_nav_0"><span><span>0</span></span></li>
                        <li id="pag_nav_1"><span><span>1</span></span></li>
                        <li id="pag_nav_2"><span><span>2</span></span></li>
                        ...
                      </ul>
                    </div>
                  
  • mobilePagination: lapozó megjelenítésének engedélyezése/tiltása mobil eszközökön (true | false) (alapértelmezett: true)
  • thumbs: bélyegképek megjelenítésének engedélyezése/tiltása a lapozó gombjain - mobil eszközökön nem elérhető (true | false) (alapértelmezett: true)
  • hover: automatikus lejátszás szüneteltetésének engedélyezése/tiltása, ha az egér a slider fölött van (true | false) (alapértelmezett: true)
  • pauseOnClick: automatikus lejátszás megállításának engedélyezése/tiltása, ha klikkelünk a slider fölött (true | false) (alapértelmezett: true)
  • rows: képek függőleges felosztása (sorok száma) - azon effekteknél, amelyeknél a kép sorokra és oszlopokra van osztva (alapértelmezett: 4)
  • cols: képek vízszintes felosztása (oszlopok száma) - azon effekteknél, amelyeknél a kép sorokra és oszlopokra van osztva (alapértelmezett: 6)
  • slicedRows: képek függőleges felosztása (sorok száma) - azon effekteknél, amelyeknél a kép csak sorokra van osztva (alapértelmezett: 8)
  • slicedCols: képek vízszintes felosztása (oszlopok száma) - azon effekteknél, amelyeknél a kép csak oszlopokra van osztva (alapértelmezett: 12)
  • time: váltások közti késleltetés milliszekundumban (alapértelmezett: 3000)
  • transPeriod: az átmenetek/effektek sebessége/időtartama milliszekundumban
    (alapértelmezett: 1500)
  • onStartLoading: függvény meghívása a betöltés kezdetekor
  • onLoaded: függvény meghívása a betöltést követően
  • onEnterSlide: függvény meghívása a kép megjelenítését követően
  • onStartTransition: függvény meghívása az átmenet/effekt kezdetén

Metódusok

  • diapoStop(): automatikus lejátszás megállítása
  • diapoPlay(): automatikus lejátszás elindítása

HTML attribútumok

  • data-fake: a kép elérési útvonala
  • data-thumb: adott képhez tartozó bélyegkép relatív útvonala
    (a bélyegképek alapértelmezett mérete 50 x 50 képpont)
  • data-fx: az átmenethez használt effekt (megegyezik az fx paraméterrel)
  • data-mobileFx: az átmenethez használt effekt mobil eszközökön
  • data-time: két váltás közti késleltetés milliszekundumban
  • data-easing: az átmenethez/effekthez használt easing hatás (megegyezik az easing paraméterrel)

CSS osztályok a képfeliratok megjelenítéséhez (abszolút pozícionálás mellett!)

  • fromLeft: beúsztatás balról
  • fromRight: beúsztatás jobbról
  • fromTop: beúsztatás föntről
  • fromBottom: beúsztatás aluról
  • fadeIn: megjelenítés áttetsző átmenettel

Az 'fx' és 'mobileFx' paraméterek lehetséges értékei

  • 'random'
  • 'simpleFade'
  • 'curtainTopLeft'
  • 'curtainTopRight'
  • 'curtainBottomLeft'
  • 'curtainBottomRight'
  • 'curtainSliceLeft'
  • 'curtainSliceRight'
  • 'blindCurtainTopLeft'
  • 'blindCurtainTopRight'
  • 'blindCurtainBottomLeft'
  • 'blindCurtainBottomRight'
  • 'blindCurtainSliceBottom'
  • 'blindCurtainSliceTop'
  • 'stampede'
  • 'mosaic'
  • 'mosaicReverse'
  • 'mosaicRandom'
  • 'mosaicSpiral'
  • 'mosaicSpiralReverse'
  • 'topLeftBottomRight'
  • 'bottomRightTopLeft'
  • 'bottomLeftTopRight'
  • 'bottomLeftTopRight'
  • 'scrollLeft'
  • 'scrollRight'
  • 'scrollTop'
  • 'scrollBottom'
  • 'scrollHorz'