HTML5 és CSS3 programozás

Before – After kép effekt

by · Published · Updated

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:'http://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:'http://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/

Creative Commons Licenc
Before – After kép effekt   a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.

Tags:

You may also like...