jQuery plugins - Captify
okt 20

Captify

Egyszerű, animált képfelirat

Verzió: 1.1.3.
Kiadás dátuma: 2009/11/30
Fejlesztő: Brian Reavis
Liszensz: MIT
  • 1354
  • 5489
  • 0
  • -

Bevezető

A Captify segítségével animált címeket rendelhetünk képeinkhez, úgy, hogy azok ne foglaljanak el felesleges helyet: az egeret a kép fölé mozgatva jelenik meg a felirat. Egyszerű, könnyen kezelhető, látványos plugin, mellyel életet vihetünk honlapunkba.

Maga a plugin kicsi, ötletes és látványos, azonban van "némi" hátulütője is: hemzseg a hibáktól. Így az oldal alján szereplő Tippek bekezdés is inkább hajaz egy hibalistára, mintsem valós tanácsadásra... :(

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

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

Deklaráció

            $(document).ready(function(){
              $('img.captify').captify();              
            });
          

Használat

A plugin-t kétféleképp is használhatjuk. Az első esetben a kép alt attribútumát használjuk a kívánt szöveg megjelenítéséhez:

            <img src="kep.jpg" alt="tetszőleges szöveg" />
          

A második esetben a szöveg egy div blokkba kerül, amelyet a kép rel attribútumán keresztül kapcsolunk a képhez:

            <img src="kep.jpg" alt="" rel="azonosito" />
            <div id="azonosito">tetszőleges szöveg</div>
          

Teljes paraméterlista

  • speedOver: a címke megjelenítésének sebessége ('slow' | 'normal' | 'fast')
    (alapértelmezett: 'fast')
  • speedOut: a címke elrejtésének sebessége ('slow' | 'normal' | 'fast')
    (alapértelmezett: 'normal')
  • hideDelay: a címke elrejtésének késleltetése, milliszekundumban (alapértelmezett: 500)
  • animation: az animáció típusa ('slide' | 'fade' | 'always-on')
    (alapértelmezett: 'slide')
  • prefix: tetszőleges szöveg a cím elejére (alapértelmezett: ' ')
  • opacity: a címke áttetszősége (alapértelmezett: '0.45')
  • className: a címke CSS szelektora (alapértelmezett: 'caption-bottom')
  • position: a címke pozíciója ('bottom' | 'top')
    (alapértelmezett: 'bottom')
  • spanWidth: a címke szélessége a képhez viszonyítva, százalékban (alapértelmezett: '100%')

Tippek

  • Sajnos a plugin nem működik IE7 és IE8 alatt.
  • fade animáció esetén a címke szövege nem jelenik meg.
  • A plugin akadhat más jQuery plugin-okkal (pl. jCarousel plugin).
  • A címke felső pozícionálásakor (position: 'top') nem illeszkedik pontosan a kép felső széléhez.
  • Ha a plugin alkalmazása során a div-es megoldást választjuk, figyeljünk arra, hogy egy div csak egy képhez rendelhető, azaz ha több képhez is azonos címet szeretnénk rendelni, akkor nem adhatjuk meg mindegyik kép rel attribútumában ugyanazt a div azonosítót, sajnos mindegyikhez külön div elemet kell készítenünk.