2017 altex.ro

Imagine "Inainte si Dupa" cu jQuiery


Dacă ai un blog de design, machiaj, sau dacă utilizezi fotografii comparative sa fi sigur că acest script este foarte utilidad.Poti vedea o imagine cum arata "inainte / dupa", este un script care funcţionează cu jQuery şi afişează dinamic două imagini simultan prin comparare. Pe cele doua imagini de mai jos apare o bara verticala cu ajutorul ei se poate schimba o imagine cu alta.


before

after
http://www.blogger.com/img/blank.gif




before

after



Pentru adaugare acestui efect mergi la Desing --> Editare HTML si exact inaintea liniei </head> adauga urmatorul cod:
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/3521870/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : false});
$(&#39;#antesydespues2&#39;).beforeAfter({showFullLinks : false});
});
</script>
Salveaza modificarile, acum mergi la o postare noua unde adaugi codul de mai jos.
<div id='antesydespues1'>
<div><img alt='before' src='URL_imagine UNU' width='500' height='291'/></div>
<div><img alt='after' src='URL_imagine DOI' width='500' height='291'/></div>
</div>
Schimba URL_imagine UNU si URL_imagine DOI cu url-ul imaginilor ce doresi sa apara.

2 comentarios:

  1. frate mie nu-mi merge, da-mi un mail si zi-mi mai clar... am facut exact ce ai scris tu aici, dar degeaba...

    RăspundețiȘtergere
  2. Salut Daniel, mai clar de atat nu exista prietene.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc