Carli – ilraC

jQuery image title plugin

No zasledil sem podoben efekt, ki ponuja prikaz title vrednosti na sliki. Gre za efekt, kjer se slika približa, čez sliko pa se pokaže polje s tekstom, ki ima določeno prosojnost in je tako slika še vidna v ozadju. Plugin ima možnost nastavljanja prosojnosti, tako da je le to mogoče izključiti. Omogoča še druge nastavitve, ki so od hitrosti prikaza okvirja, globine zooma, vključevanje animacije torej približevanja.

Torej kako deluje.

<div class="imgt">
<img src="img.jpg" title="Nek opis fotografije" />
</div>

HTML izgleda povsem preprosto, slika v div elementu, slednji je potreben zaradi kasnejšega prikaza okvirja, lahko bi se izvedlo tudi kasnejše dodajanje tega elementa, vendar je taka rešitev dovolj elegantna.

CSS datoteka v tem primeru več ali manj postavi celoten izgled, kot lahko vidite v primeru. Div z classom .caption ima nastavljeno opacity 0, kar je nekako pomembno zaradi fade efekta, ima nastavljeno višino in širino, ki pa je stvar stila prikaza. Lahko se okvir prikaže čez celotno sliko, kar pomeni, da bo height: 100%, ali v px, kolikor je višina .imgt elementa. Prav tako mora biti pozicija .imgt elementa relativna, za potrebe okvirja, ki se nato prikazuje absolutno na ta element.

Možnosti:

animation: 1 // (Vključena animacija torej zoom) default je 1
aniopacity: 1 // (prozornost fotografije) default je 1 | 0.8 = 80% do 0 ki je popolnoma prozorna
fadetovalue: 0.8 //(prozornost okvirja) default je 0.8 | do 0 ki je popolnoma prozoren
zoom: 120 // (globina zooma) default je 120, kar pomeni da se fotografija poveča na 120%
fadespeed: “fast” // (hitrost fade efekta) default je fast, v IE brskalnikih je fade efekt nekoliko drugačen.

Primer:

$(function() {
$('div.imgt').titleimg({animation: 1, aniopacity: 1, fadetovalue: 0.6, zoom: 140, fadespeed: "fast"});
});

Kako izgleda končni rezultat:

Okvir 100% x 100%

Okvir 100% x 20% spodaj

Okvir 100% x 20% zgoraj

Prenos plugina jQuery image title plugin (save as – shrani kot).

Tagi: animacija, JavaScript, jQuery, plugin

Še ni komentarjev.

Komentiraj ...