jQuery plugins - Camera
júl 04

Camera

Élet a Diapo után!

Verzió: 1.3.4
Kiadás dátuma: 2012/06/23
Fejlesztő: Manuel Masia
Liszensz: MIT

Bevezető

A Diapo fejlesztője felhagyott a plugin további fejlesztésével és helyette egy új projekttel jelentkezett Camera néven. A plugin a korábbi Diapo-ra épül, azonban több új funkció került bele, illetve fontos megemlíteni még (többek között) a mobil eszközök támogatását, valamint a HTML5 technológia használatát. A plugin működéséhez a jQuery v1.4, illetve annál frissebb kiadás szükséges.

Jellemzők

  • HTML5 technológia
  • reszponzív, mobil barát felület
  • jQuery.easing támogatás
  • jQuery.mobil támogatás
  • létezik WordPress verziója is

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/camera.min.js"></script>
          

Deklaráció

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

Használat

A Camera alapszintű használatához a képeket az alábbi HTML struktúra szerint kell beilleszteni egy .camera_wrap konténerbe:

            <div class="camera_wrap" id="pelda">
              <div data-src="images/img1.jpg"></div>
              <div data-src="images/img2.jpg"></div>
              <div data-src="images/img3.jpg"></div>
              ...
            </div>
          

Teljes paraméterlista

  • alignment: a slider konténerelemén túlnyúló képek pozícionálása
    ('topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight') (alapértelmezett: 'center')
  • autoAdvance: automatikus lejátszás engedélyezése/tiltása (true | false)
    (alapértelmezett: true)
  • cols: képek közti váltáskor a képek felosztásához használt oszlopok száma (alapértelmezett: 6)
  • easing: easing effekt típusa (alapértelmezett: 'easeInOutExpo')
  • mobileEasing: easeing effekt típusa mobil eszközön - ha ugyanazt szeretnénk alkalmazni,
    mint az easing opció esetén, hagyjuk üresen
    (alapértelmezett: '')
  • fx: a képek közti átváltáshoz használt effekt típusa
    ('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' | 'scrollHorz' | 'scrollBottom' | 'scrollTop')
    (alapértelmezett: 'random')
  • mobileFx: képek közti váltás típusa mobil eszközön - ha ugyanazt szeretnénk alkalmazni,
    mint az fx opció esetén, hagyjuk üresen
    (alapértelmezett: '')
  • gridDifference: négyzetrácsos felosztás esetén az egyes blokkok animációjának sebessége (fontos, hogy az érték kisebb legyen, mint a transPeriod opcióban megadott érték) (alapértelmezett: 250)
  • height: a slider magassága képpontban, vagy százalékos formában
    (ahol 100% a kép magassága) (alapértelmezett: 50%)
  • hover: automatikus lejátszás megállítása, ha az egér a slider fölé kerül (true | false)
    (alapértelmezett: true)
  • imagePath: a képeket tartalmazó mappa elérési útvonala (alapértelmezett: 'images/')
  • loader: az időzítő típusa (a pie típust az IE8 előtti böngészők nem támogatják)
    ('pie' | 'bar' | 'none') (alapértelmezett: 'pie')
  • loaderColor: az időzítő színének hexadecimális kódja (alapértelmezett: '#eeeeee')
  • loaderBgColor: az időzítő háttérszínének hexadecimális kódja (alapértelmezett: '#222222')
  • loaderOpacity: az időzítő áttetszőségének értéke [0..1] (alapértelmezett: .9)
  • loaderPadding: az időzítő és annak háttere közti térköz (padding érték) képpontban (alapértelmezett: 2)
  • loaderStroke: a pie és bar típusú időzítők vonalvastagsága képpontban (alapértelmezett: 7)
  • minHeight: a slider minimális magassága képpontban (alapértelmezett: '200px')
  • navigation: navigációs gombok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • navigationHover: navigációs gombok engedélyezése/tiltása, ha az egér a slider fölé kerül
    (true | false) (alapértelmezett: true)
  • mobileNavHover: navigációs gombok engedélyezése/tiltása hover esetén mobil eszközökön
    (true | false) (alapértelmezett: true)
  • opacityOnGrid: képek közti váltáskor a blokkok, illetve a szeletek elhalványításának engedélyezése/tiltása - nagyobb méret, illetve teljes képernyős alkalmazás esetén célszerű letiltani a finomabb átmenet érdekében (true | false) (alapértelmezett: false)
  • pagination: lapozó engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • playPause: lejátszás/szünet gombok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • pauseOnClick: automatikus lejátszás megállítása a képen történő kattintáskor
    (true | false) (alapértelmezett: true)
  • pieDiameter: a pie típusú időzítő átmérője képpontban (alapértelmezett: 38)
  • piePosition: az időzítő pozíciója ('rightTop' | 'leftTop' | 'leftBottom' | 'rightBottom')
    (alapértelmezett: 'rightTop')
  • portrait: minden kép eredeti méretben való megjelenítésének engedélyezése/tiltása (true | false)
    (alapértelmezett: false)
  • rows: képek közti váltáskor a képek felosztásához használt sorok száma (alapértelmezett: 4)
  • slicedCols: a képek 'slice' felosztása esetén az oszlopok száma (alapértelmezett: 12)
  • slicedRows: a képek 'slice' felosztása esetén a sorok száma (alapértelmezett: 8)
  • thumbnails: bélyegképek engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • time: két váltás közti szünet milliszekundumban (alapértelmezett: 7000)
  • transPeriod: a képek közti váltás időtartama/sebessége milliszekundumban
    (alapértelmezett: 1500)
  • onStartLoading: függvény meghívása a kép betöltésekor
  • onLoaded: függvény meghívása a kép betöltődését követően
  • onStartTransition: függvény meghívása a képek közti váltás kezdetén
  • onEndTransition: függvény meghívása a képek közti váltás végén

Metódusok

  • cameraStop(): automatikus lejátszás megállítása
  • cameraPlay(): automatikus lejátszás indítása
  • cameraPause(): automatikus lejátszás szüneteltetése
  • cameraResume(): automatikus lejátszás folytatása

DATA attribútumok

A HTML5 adta lehetőséget kihasználva a plugin működését nem csak a deklaráció során definiálhatjuk, hanem akár a DATA attribútumok segítségével is befolyásolhatjuk:

  • data-alignment: a slider konténerelemén túlnyúló képek pozícionálása
    ('topLeft' | 'topCenter' | 'topRight' | 'centerLeft' | 'center' | 'centerRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight')
  • data-easing: easing effekt típusa
  • data-mobileEasing: easeing effekt típusa mobil eszközön
  • data-fx: a képek közti átváltáshoz használt effekt típusa
    ('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' | 'scrollHorz' | 'scrollBottom' | 'scrollTop')
  • data-link: adott képhez rendelt URL (klikkelés esetén)
  • data-portrait: minden kép eredeti méretben való megjelenítésének engedélyezése/tiltása
    (true | false)
  • data-src: aktuális kép elérési útvonala
  • data-target: a data-link attribútumban megadott URL megnyitásának módja
    ('_blank' | '_new' | '_parent' | '_self' | '_top')
  • data-thumb: adott képhez tartozó bélyegkép elérési útvonala (abban az esetben, ha a deklaráció során a thumbnail opció engedélyezve van)
  • data-time: két váltás közti szünet milliszekundumban
  • data-transPeriod: a képek közti váltás időtartama/sebessége milliszekundumban
  • data-video="hide": ez a paraméter kizárólag csak a hide értéket veheti fel! Akkor használjuk, ha videót jelenítünk meg és szeretnénk, hogy a videó lejátszása ne induljon el automatikusan az átváltást követően, hanem csak miután a képre kattintottunk.

Tippek

  • Az egyes képekhez feliratkozat is fűzhetünk:
                    <div data-src="images/img1.jpg">
                      <div class="camera_caption">Felirat szövege 1</div>
                    </div>
                    <div data-src="images/img2.jpg">
                      <div class="camera_caption">Felirat szövege 2</div>
                    </div>
                  
    Az egyes feliratok megjelenítése előre definiált animációk segítségével még látványosabbá tehetők. Ez a megfelelő CSS osztályok hozzárendelésével történik:
                    <div data-src="images/img1.jpg">
                      <div class="camera_caption  moveFomRight">Felirat szövege 1</div>
                    </div>
                  

    Effektek listája:
    'moveFromLeft', 'moveFomRight', 'moveFromTop', 'moveFromBottom', 'fadeIn', 'fadeFromLeft', 'fadeFromRight', 'fadeFromTop', 'fadeFromBottom'

  • A plugin-hoz 32db előre definiált téma (skin) is jár, ezek használatához a konténer elem CSS osztályát kell az adott téma nevével kiegészíteni, pl. camera_brown_skin esetén:
                    <div class="camera_wrap camera_brown_skin" id="pelda">
                      ...
                    </div>
                  

    Témák listája:

    • camera_amber_skin
    • camera_ash_skin
    • camera_azure_skin
    • camera_beige_skin
    • camera_black_skin
    • camera_blue_skin
    • camera_brown_skin
    • camera_burgundy_skin
    • camera_charcoal_skin
    • camera_chocolate_skin
    • camera_coffee_skin
    • camera_cyan_skin
    • camera_fuchsia_skin
    • camera_gold_skin
    • camera_green_skin
    • camera_grey_skin
    • camera_indigo_skin
    • camera_khaki_skin
    • camera_lime_skin
    • camera_magenta_skin
    • camera_maroon_skin
    • camera_orange_skin
    • camera_olive_skin
    • camera_pink_skin
    • camera_pistachio_skin
    • camera_pink_skin
    • camera_red_skin
    • camera_tangerine_skin
    • camera_turquoise_skin
    • camera_violet_skin
    • camera_white_skin
    • camera_yellow_skin