Before – After kép effekt
Az elmúlt időben több e-mailt is kaptam, amiben kéritek, hogy nézzünk példát egy manapság népszerű képi effekt használatára, de flash nélkül. Ha nem bánjátok én egy manapság divatos, de tutorialok-ban nem szereplő effektet választottam, ez nem más, mint az előtte – utána képi effektus (before after image effect).
Ehhez nem kell semmi más, csak a népszerű jQuery. A szükséges plugin-t leszedhetitek innen. Vagy a weboldalamról zip-ben tömörítve.
A kiindulóállapotom, hogy van két képem, ami azonos méretű és tartalmilag összefüggnek. Ezeket szeretném valahogy egymásra pakolni és egy kis vezérlővel állíthatóvá tenni, hogy melyikből mit lássak. Szerencsére a plugin használatával gyakorlatilag nullára csökkenthető a kódolás.
Én a példában az alábbi képeket fogom használni az egyszerűség kedvéért.
- after kép
- before kép
- before-after képeffekt
Kezdésnek elhelyezzük a jQuery-re mutató linkeket a html fájlunkban majd meghívjuk a before-after-t. Ez nálam így néz ki:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="jquery.beforeafter-1.4.min.js"></script><script type="text/javascript" $(function(){ $('#container').beforeAfter(); }; </script>
A következő nagyon fontos dolog, hogy a képeket egy saját ID-vel rendelkező div-en belül kell elhelyeznünk.
A példámban ez így fog kinézni:
<div id="container"> <div><img src="before.jpg" alt="before" width="384" height="288" /></div> <div><img src="after.jpg" alt="after" width="384" height="288" /></div> </div>
Ha szemfülesek vagytok észre veszitek, hogy a képeknek mind a szélességét, mind a magasságát megadtam. Erre azért van szükség, mert tapasztalatom szerint egyes böngészők ezek nélkül nem jelenítik meg az effektet.
Nézzük, a legfontosabb beállításokat amivel finomhangolhatjuk a “before-after” effektünket:
- animateIntro – A vezérlő animációját kapcsolhatjuk be vele (alapértelmezésben false)
- afterLinkText – Akkor használható, ha a showFullLinks opció be van kapcsolva. Megadhatjuk vele, hogy mi legyen az “utána” kép alatt megjelenő link szövege (alapértelmezésben ‘Show only after’)
- beforeLinkText – Akkor használható, ha a showFullLinks opció be van kapcsolva. Megadhatjuk vele, hogy mi legyen az “előtte” kép alatt megjelenő link szövege (alapértelmezésben ‘Show only before’)
- cursor – A vezérlő fölé vitt egérkurzor kinézetét állíthatjuk vele (alapértelmezésben ‘pointer’)
- dividerColor – A vezérlőhöz tartozó osztócsík színét állíthatjuk vele CSS hex formában (alapértelmezésben ‘#888′)
- enableKeyboard – A segítségével bekapcsolhatjuk a billentyűzettel történő vezérlés lehetőségét a jobb és bal nyilakkal. (alapértelmezésben false)
- introDelay – Akkor használható, ha az animateIntro be van kapcsolva. Egy késleltetést állíthatunk be vele milliszekundumban, hogy a vezérlő mikor mozduljon el a képen (alapértelmezésben 1000)
- introDuration – Akkor használható, ha az animateIntro be van kapcsolva. Segítségével megadhatjuk milliszekundumban, hogy mennyi ideig tartson a vezérlő pozicionálása (alapértelmezésben 1000)
- imagePath –A vezérlőhöz szükséges képek helye (abszolút vagy relatív elérési úttal is megadható!) (alapértelmezésben ‘/js/beforeAfter/’)
- introPosition – A vezérlő kezdőpozícióját határozhatjuk meg vele, a kép baloldalától számítva (alapértelmezésben .5). Nálam a .25 a kép 1/4-ét jelöli.
- keypressAmount – Akkor használható, ha az enableKeyboard be van kapcsolva. Megadhatjuk vele, hogy a nyilak lenyomásával hány pixelnyit ugorjon a vezérlő (alapértelmezésben 20)
- showFullLinks – A képek alatt található linkek megjelenítéséért felel (alapértelmezésben true)
A teljes példa nálam így néz ki:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Before/After Plugin bemutato</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="jquery.beforeafter-1.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#container').beforeAfter({ animateIntro:true, imagePath:'https://html5.ugyesen.com/html5factory/27/img/', introDuration : 600, introPosition : .25, showFullLinks : true, beforeLinkText: 'Show before image', afterLinkText: 'Show after image', cursor: 'e-resize', enableKeyboard: true, dividerColor: '#070' }); }); </script> </head> <body> <div id="container"> <div><img alt="before" src="before.jpg" width="384" height="288" /></div> <div><img alt="after" src="after.jpg" width="384" height="288" /></div> </div> </body> </html>
A jQuery before-after példát ide kattintva kipróbálhatod.
Hát igen, már csak egy probléma van ezzel a kóddal. Táblagépen és érintő kijelzőn nem működik, de tudunk tenni érte, hogy működjön. Rengeteg weboldalon van manapság fent ez az effekt, csak ezt a lépést valahogy elfelejtik, pedig nagyon egyszerűen működőképessé lehet tenni..
Nincs semmi másra szükség mint erre a szintén jQuery plugin-ra, amit a weboldalamról letölthető zip fájlba is elhelyeztem. És meg kell hivatkoznunk a plugint, valamint plusz egy sorban leírni, hogy mozgatható legyen a vezérlő. Lássuk a táblagépeken, mobilokon is működő kódot:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Before/After Plugin bemutato + érintokepernyo</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="jquery.beforeafter-1.4.min.js"></script> <script src="jquery.ui.touch-punch.min.js"></script> <script>$('#widget').draggable();</script> <script type="text/javascript"> $(function(){ $('#container').beforeAfter({ animateIntro:true, imagePath:'https://html5.ugyesen.com/html5factory/27/img/', introDuration : 600, introPosition : .25, showFullLinks : true, beforeLinkText: 'Show before image', afterLinkText: 'Show after image', cursor: 'e-resize', enableKeyboard: true, dividerColor: '#070' }); }); </script> </head> <body> <div id="container"> <div><img alt="before" src="before.jpg" width="384" height="288" /></div> <div><img alt="after" src="after.jpg" width="384" height="288" /></div> </div> </body> </html>
A példát itt el tudjátok érni.
Forrás:
http://jquery.com/
http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/
