Shfaq fotot me Captify (jQuery) - AlbDEVs

×
Albanian Forums, Zerion Zeri yt Zeri Info, Forumi Shqiptar Al Virtual, Diskutime, Biseda, Chat Njofje, Informatika, Teknologjia, Gazeta Tema, Gazetat Shqiptare, Bota Sot, www Channel Albania, Telegrafi Kosovo, Ballkani Web, Gazeta Lajme shqip, Lajmet e Fundit Shqiperia Kosova, Dita, Panorama, Kryeartikull, Faqja Kryesore, Video Shqip, Muzike Shqipe, Njoftime, Lajmerime, Temat Online, Gazetat, Kosovare, Shtypi Ditor, Sporti Shqiptar, Dashuria, Pyetje Pergjigje, Keshilla, Ndihme, Webmaster Shqiptar, Familja, Shqiptaria, Muzika, Receta Gatimi, Imazhe, Vipat-shqiptar, Aktualiteti
Media Sociale
Mesazhe Private
Shqiptaret duke lexuar tema interesante dhe te ndryshme
Tema re

Shfaq fotot me Captify (jQuery)

Shfaq fotot me Captify (jQuery)

· 2 · 628

  • Postime: 92
  • Karma: +0/-0
  • Gjinia: Mashkull

ne: 05-03-2009, 13:58:15
Captify është një mundësi më tepër për ti shfaqur imazhet më bukur dhe në mënyrë interaktive, kjo bëhet duke përdorur jQuery një librari e re nga JavaScript e cila përmban efekte dhe shtesa të reja, të përdorura nga kompanitë më gjigande botërore.
Duhet ta keni parasysh se Captify funksionon vetëm në shfletuesit Firefox, Safari, Chrome dhe në verzionet e reja të Internet Explorer.
Faqen e autorit dhe të demonstrimit mund ta gjeni këtu, ja edhe një demonstrim me foto:


Si të përdoret?


Së pari nëse nuk e keni shkarkuar më parë ju duhet ta shkarkoni Captify, mund ta bëni atë duke klikuar këtu.
Pasi ta keni shkarkuar ç'paketojeni me WinRar, hapni dokumentin tuaj shembull ballina.html me ndonjë editor dhe vendoseni këtë kod brenda <head> këtu kodi</head>:
Kodi: [Zgjidh]
<link rel="stylesheet" type="text/css" href="sample.css?t=1" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/captify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('img.captify').captify({
        // all of these options are... optional
        // ---
        // speed of the mouseover effect
        speedOver: 'fast',
        // speed of the mouseout effect
        speedOut: 'normal',
        // how long to delay the hiding of the caption after mouseout (ms)
        hideDelay: 500,   
        // 'fade', 'slide', 'always-on'
        animation: 'slide',       
        // text/html to be placed at the beginning of every caption
        prefix: '',       
        // opacity of the caption on mouse over
        opacity: '0.3',                   
        // the name of the CSS class to apply to the caption box
        className: 'caption-bottom',   
        // position of the caption (top or bottom)
        position: 'bottom',
        // caption span % of the image
        spanWidth: '100%'
    });
});
</script>

Për dokumentat jquery.js dhe captify.js krijoni një folder të quajtur js dhe ngarkoni aty, ndërsa dokumentin sample.css ngarkojeni në direktorinë ku gjenden dokumentat e faqes suaj.

Hapni përsëri ballina.html me një editor dhe shtoni ndonjë imazh në faqe duke vepruar kështu:
Citim
<img src="imazhi_ketu.jpg" class="captify" alt="Teksti që del" />

pra, brenda alt shkruani tekstin që do të dal kur shigjeta e mausit të afrohet te imazhi, ndërsa captify është dizejnimi i fotos që nuk bën ta largoni asesi, përndryshe imazhi nuk do të marr efektin që po flasim.

ndërsa metoda tjetër është kjo:
Citim
<img src="imazhi_ketu.jpg" class="captify rel="caption1" />
      <div id="caption1"> Flickr // Teksti i imazhit ketu </div>

Këtu vëreni se teksti Flickr // u bë lidhje, pra ju çon në www.flickr.com, dhe të gjitha atributet e tjera janë të njëjta me të parën, unë ju këshilloj të përdorni të parën se është më praktike dhe më e lehtë.

« Editimi i fundit: 05-03-2009, 14:58:20 nga Syrgjyn »

  • Postime: 28589
  • Karma: +48/-5
  • Gjinia: Mashkull

#1 ne: 05-03-2009, 14:05:48
Duket shume interesante. Une e pashe ne perdorim kete ne disa themes per Wordpress. Eshte metode shume premtuese per te bere faqe te lezetshme.

Temat e fundit