Camera

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