
Camera
Élet a Diapo után!
Verzió: | 1.3.4 |
Kiadás dátuma: | 2012/06/23 |
Fejlesztő: | Manuel Masia |
Liszensz: | MIT |
- kategória:
- Animációk, effektek
- Média
- Layout
- 1861
- 10400
- 0
- -
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