Nem is olyan régen megjelent egy kis böngészőkiterjesztés, amellyel a webes galériák (de akár a saját gépünkön tárolt fileok) nézegetése új értelmet kapott. Bár sokan nem szeretik, és idegenkednek mindenféle ugráló, csilivili programocskától, meg kell hagyni, a Piclens igazán "pofás" kis alkalmazás lett.
Kétkedőknek ajánlom , hogy nézzék meg a youtube-ot piclenssel: keressenek rá címekre, majd amint látják a firefoxban/explorerben a kis kék ikont, akkor indítsák el a Piclenset : az összes keresésnek megfelelő videó ott lesz a 3D falon, nem kell lapozgatni:)
Segítségével képeket és videókat lehet "sallangmentesen" galériaszerűen egy 3D falon nézegetni. Egérmozgatással tudunk navigálni , nagyítani , "lapozni" .
Jelenleg Firefox, IE és MAc-es safari alá létezik a kiterjesztés , a fejlesztők szerint Operás és Windowsos Safaris piclens pluginra még várni kell (azt mondják azért, mert bár elismerik , hogy ezek a böngészők is jók, de nem használják elegen.)
Itthoni oldalak közül az Index és a WIW az ismertebb, amely már kihasználja a Piclens nyújtotta lehetőséget, a külföldiek közül pedig talán a Flickr, Photobucket, Smugmug, Picasa, Google Images a legismertebb, amelyet szintén 3D falon nézegethetünk.
Node mire is van szükségünk, hogy ezt akár a saját galériánknál is elérhetővé tegyük Piclenses módon??
Tudni kell, hogy a Piclens használatához szükségünk van egy RSS/XML filera, amely meghatározott módon épül fel.
A file lehet statikus , ámde dinamikusan generált is ( Ez utóbbi esetben PHP és egyéb (script)nyelvek használatával generálhatjuk le a megjeleníteni kívánt xml-t . Smarty és egyéb Template rendszerek is használhatók).
Első lépés: RSS készítés
Kezdjük az elején:
Létre kell hoznunk egy RSS filet az alábbi módon:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0"
xmlns:media="http://search.yahoo.com/mrss"
xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<item>
<title>Példa piclensre 1.</title>
<link></link>
<description>Piclens példa galéria</description>
<media:thumbnail url="pl_images/181641tmb.jpg"/>
<media:content url="pl_images/181641.jpg"/>
</item>
.
.
.
<item>
<title>Példa Piclensre 3</title>
<link></link>
<description>Piclens példa galéria</description>
<media:thumbnail url="pl_images/181642tmb.jpg"/>
<media:content url="pl_images/181642.jpg"/>
</item>
</channel>
</rss>
Ügyelni kell arra, hogy az RSS-sünk well-formed legyen, ne legyen benne hiba, lezáró tagek meglegyenek. Ezenkívűl fontos , hogy UTF-8 encodingot használjunk , különben nem fog működni , nem fogja megjeleníteni a képeket. Mint már írtam a fenti filet generálhatjuk is, de akár el is menthetjük pl. index.xml , index.rss néven.
2. lépés: HTML kódban hivatkozás elhelyezése az elkészített RSS-re
Következő lépés a HTML oldalunkba beilleszteni egy rövidke kis kódot:
<html>
<head>
<link rel="alternate" href="index.rss"
type="application/rss+xml" title="" id="gallery" />
</head>
<body> ... </body>
</html>
Itt természetesen a Href-es résznél a megfelelő elérési utat kell megadnunk, azt a helyet, ahol az előbb elkészített (vagy generált) rss-ünk található.
3. Lépés : Link párosítás
Ezt a funkciót nem kötelező használni ámde lehetséges.
Amikor a látogató az oldalon egy képre mozgatja az egeret ,a Piclensnek tudnia kell,mely bélyegkép mely képre hivatkozik , így a képre kattintva azt fogja megjeleníteni ,
A Piclens <item> -eken belül <link>, <media:thumbnail> és <media:content> tageket végigszkenneli , és megkeresi <a href> tag-beli párját a HTML-ben.
Az URL lehet relatíve vagy abszolúte.
Példa
Az elem az RSSünkben az alábbi link taggel rendelkezik :
<link>pl_images/A.jpg</link>
Ez párosítva lesz a HTMLben ezzel: :
<a href="pl_images/A.jpg"><img src="images/A.jpg"></a>
Az Index.hu pl. nem használja a link taget (üresen adja meg)
4. Lépés : mutassuk meg, hogy oldalunkon használható a Piclens!
Oldalunkra tévedő gyanútlan felhasználókat értesíthetjük róla, hogy bizony az oldalunk már PicLens Ready, használják csak nyugodtan:D
<a href="http://piclens.com" target="_blank">
<img src="http://yourwebsite.com/images/piclens_badge.gif">
</a>
És mi van , ha mondjuk Operát használunk, vagy nincs Piclens kiterjesztésünk?
Használhatjuk az ún. Piclens Lite-ot.
1. lépés -Javascript kód hozzáadása
<head>
<title></title>
<link rel="alternate" href="index.rss" type="application/rss+xml"
title="" id="gallery" />
<script type="text/javascript"
src="http://lite.piclens.com/current/piclens.js"></script>
</head>
A vastagon szedett részt rakjuk bele a HTML fejlécbe.
2. lépés -Start Slideshow gomb hozzáadása
A <body> tagek közti részbe illesszük be az alábbi kódot:
<a href="javascript:PicLensLite.start();">Start Slideshow
<img src="http://lite.piclens.com/images/PicLensButton.png"
alt="PicLens" width="16" height="12" border="0"
align="absmiddle"></a>
Vannak még apróbb "fogások" amelyekre azonban jelen írásomban nem térnék ki.
Ezek elolvashatók a Piclens oldalán, amely alapján mind a cikket, mind az első piclenses oldalamat elkészítettem.
Ami miatt nem mehet elsőre ...
-dinamikusan generált az RSS-nél, templaterendszereknél össze kell hangolni, megfelelően felparaméterezni a fileokat ahhoz, hogy bármelyik galériával tudjon működni a modul . El kell készíteni az RSS generáláshoz szükséges modulkódot is.
- mindenképp UTF-8 kódolás kell az rss-be, anélkül egyébként nem működik!
- még egy fontos: ne legyen a kép elérési útjában = és & karakter, én úgy vettem észre , ilyen elérési utaknál nem működik a piclens:
<media:thumbnail url="http://kepfeltolto.hu/i/?181641&t=thb"/>
<media:content url="http://kepfeltolto.hu/i/?181641&t=img"/>
Nos remélem tudtam nektek segíteni, használjátok egészséggel a kis összefoglalómat:)
Irodalom, angol nyelvű leírás: Piclens
Firefox kiterjesztés
Egy kis videó
És ami hasznos volt: az index.hu galériájának rss-e
