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.
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/
