Hirdetés

2019. április 23., kedd

Gyorskeresés

Piclens-es galéria készítése

  • (f)
  • (p)
Írta: |

Nem is olyan régen megjelent egy kis böngészőkiterjesztés, amellyel a webes galériák nézegetése új értelmet kapott.

[ ÚJ TESZT ]

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).

Példa piclens használatra

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.

Példa piclens használatra

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ó.

Példa piclens használatra

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.

Piclens lite

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

Hirdetés

Copyright © 2000-2019 PROHARDVER Informatikai Kft.