java

Image reflection cu javascript - integrare WordPress

Am mai trecut in revista o metoda destul de interesanta care folosea un java applet pentru a realiza efectul de reflexie pe suprafata apei a unei imagini. Trebuie sa recunosc ca efectul anterior este destul de sensibil la parsing-ul browserelor IE, Safari, Opera (sensibil in sensul ca daca nu este folosit intr-o maniera stricta acesta ori nu este vizibil ori blocheaza browser-ul la incarcarea paginii respective).

Am sa va propun o alta metoda care nu e la fel de “mofturoasa”. Si de data asta vom folosi javascript. Chestia interesanta este ca metoda asta poate fi implementata si pe blog-urile care folosesc engine-ul Wordpress sub forma de plugin. Mai jos veti observa o varianta de folosire plain and simple.

Descarcati fisierul reflection.js pe care-l veti apela prin intermediul codului urmator:

1

<script src="reflection.js" type="text/javascript"></script>

In cazul de mai sus fisierul reflection.js trebuie sa fie in acelasi director cu fisierul html in care va fi apelat.
Pentru a aplica efectul unei poze anume nu trebuie decat sa adaugam tag-ul class=”reflect” imaginii corespunzatoare, spre exemplu:

1

<img src="poza.jpg" class="reflect" alt="reflection.js" />

Mai exista posibilitatea personalizarii efectului, si anume:

• class=”reflect rheight33″ => inaltimea reflexiei va fi de 33% din inaltimea originala a imaginii.

• class=”reflect ropacity30″ => opacitatea reflexiei va fi de 30%.

Puteti observa efectul obtinut aici

Browser-ele care suporta acest efect sunt:

• Internet Explorer 5.5+

• Mozilla Firefox 1.5+

• Opera 9+

• Safari 2+

Puteti descarca de aici plugin-ul pentru Wordpress (>2.x) pe care-l instalati la fel ca oricare alt plugin folosind codul de mai sus pentru adaugarea efectului dorit la o anumita poza.
Partea frumoasa e ca acest script se poate integra frumos in forumurile phpbb, invision board putandu-se crea un combo si cu celebrul script Lightbox.

Sper ca ati inteles despre ce era vorba si mai sper ca va va fi de folos cele de mai sus. Bafta si nu ezitati sa puneti intrebari daca va impotmoliti pe traseu !