Keresés a blogban

Betöltés...

2010. április 25.

Image zoom - JQZoom - Képnagyítás



Nagyon látványos, képrészletek kinagyítására alkalmas script a JQZoom. Készítője Renzi Marco, a Mind Projects blogon tette közzé. A JQZoom a rendkívül népszerű és elterjedt JQuery keretrendszerben íródott.
Installálása a Blogger blogokban sem nehéz.
Ha a kurzort az alábbi kép fölé viszed, láthatod, hogyan működik.



Ugye milyen jó ez az effect? Úgy gondolom különösen olyan blogokban célszerű alkalmazni, ahol fontos lehet a képek részleteinek tanulmányozhatósága. Pl. a gyöngyékszerekről készült képeknél láthatóvá lesznek az aprólékos technikák, vagy csoportképeknél végignézhetők az arcok. De sok más alkalmazási terület is lehetséges.
Mellékesen: amely kép használja a nagyítót, az jobb gombos módszerrel nem menthető le. Így tehát bizonyos védelmet nyújt a képlopások ellen (persze attól még aki nagyon akarja lementheti, de legalább egy kis kényelmetlenséget okoztunk).

Irányítópult -> Elrendezés -> HTML-kód szerkesztése
Ctrl+f
A keresőablakba írd be: /head
Közvetlenül ez elé ...
</head>
... szúrd be a script kódját:
<!--JQZOOM-STARTS-->
<script src="http://wiseladyshop.com/blogger/js/jqzoom/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://wiseladyshop.com/blogger/js/jqzoom/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://wiseladyshop.com/blogger/js/jqzoom/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{

zoomWidth: 275,
zoomHeight: 275
}
$(".jqzoom").jqzoom(options);

});
</script>
<!--http://bloggerbloggerek.blogspot.com-->
Mentsd el a változtatást.

A pirossal jelölt rész a nagyítóablak méretét jelenti, ezt megváltoztathatod - szélesség, magasság.
Mostantól használhatod. Csak azoknál a képeknél fog működni, amelyeknél te akarod. Ha a képet feltöltötted, akkor válts át HTML írásmódra és keresd meg a bejegyzésben a kép kódját. Pl. ha a Picasából szúrtál be egy képet, akkor valami ilyesmit látsz (Firefoxban kissé eltérő lehet a kód, de így is meg fogod találni):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_pHfsk7ExMQA/S9MlX4z1Y4I/AAAAAAAADZw/_G3Td1wsjnY/s1600/kitchen-1_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="http://1.bp.blogspot.com/_pHfsk7ExMQA/S9MlX4z1Y4I/AAAAAAAADZw/_G3Td1wsjnY/s320/kitchen-1_large.jpg" tt="true" width="320" /></a></div>

Ebbe kell beszúrni a következőt:
class="jqzoom" title="A kép címe"
A title mögé a kép címét írd, több szó is lehet. Ez fog megjelenni a nagyított rész felett lévő sávban.
Ide szúrd be:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_pHfsk7ExMQA/S9MlX4z1Y4I/AAAAAAAADZw/_G3Td1wsjnY/s1600/kitchen-1_large.jpg" class="jqzoom" title="Konyha" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="http://1.bp.blogspot.com/_pHfsk7ExMQA/S9MlX4z1Y4I/AAAAAAAADZw/_G3Td1wsjnY/s320/kitchen-1_large.jpg" tt="true" width="320" /></a></div>

Azaz az a href= részbe, a kép elérési útja mögé kell beírni a kiegészítést. Amelyik képnél ezt nem írod be, az továbbra is úgy viselkedik, mint ahogy addig.

A scriptnek az előbbi formája az alapmód. Van még 4 fajta mód, amelyet használhatsz. Ha ezekből akarsz választani, akkor ki kell egészíteni a script kódját a megfelelő változóval.

Az 5 féle viselkedés:
  1. Alapmód: a kép élesen látszik, a nagyítóablak áttetszően homályos
  2. Fordított mód, a kép áttetszően homályos, a nagyítóablak élesen látszik.
  3. A nagyító ablak nem látszik egyáltalán, csak a kurzor, a nagyított képrészletnek nincs címe.
  4. A kinagyított képrészlet (a felugró ablak) pozíciójának meghatározása.
  5. A kinagyított képrészlet folyamatosan elhalványodva tűnik el, folyamatosan erősödve tűnik elő.
Van egy 6. eset is, ez az IE6 verzióhoz igazítja scriptet. Azt gondolom, erre ma már nincs szükség, az IE6 használata elenyésző lehet.

Az alap scriptet ki kell egészítened a megfelelő változókkal.

2. esetben
var options2 =
{
zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
}
$(".jqzoom2").jqzoom(options2);
3. esetben
var options3 =
{
zoomWidth: 200,
zoomHeight: 200,
xOffset: 20,
title: false,
lens:false
}

$(".jqzoom3").jqzoom(options3);
4. esetben
var options4 =
{
zoomWidth: 300,
zoomHeight: 200,
position : 'right',
yOffset :-100,
xOffset :100,
title :false
}

$(".jqzoom4").jqzoom(options4);
5. esetben
var options5 =
{
zoomWidth: 250,
zoomHeight: 250,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'slow',
title :false
}

$(".jqzoom5").jqzoom(options5);
Pl. vegyük az alapscriptet, akkor a 4 újabb mód valamelyikét így kell betenned:
<script type="text/javascript">

$(function() {

var options =
{
zoomWidth: 275,
zoomHeight: 275
}

$(".jqzoom").jqzoom(options);

var options2 =
{
zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>
<!--http://bloggerbloggerek.blogspot.com-->
Ha ezeket akarod használni, akkor írj class="jqzoom2" vagy class="jqzoom3" stb. a kép URL címébe ahelyett, hogy class="jqzoom".
Azt is lehet, hogy akár az összest bemásold a scriptbe, és más képhez másik effectet választasz.

Renzi Marconál láthatod mindegyiket működés közben is.

UPDATE: megváltozott a scriptek tárhelye, javítsd a kódodban, ha használod őket.
Ezt kell átírni 3 helyen a kódban: nora-papp.extra.hu
Erre: wiseladyshop.com

Aki még nem használta eddig, annak nem kell semmit tennie, mert javítottam a kódot ebben a posztban.


Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

19 megjegyzés:

mellissina2 írta... [Válasz erre...]

Olyan alkalmazás nincs amihez nem kell az a nyüves script???

Wise Lady írta... [Válasz erre...]

Mindent kód csinál. Azaz, ha akarsz valamit, akkor azt bele kell írni a kódba. A scriptek azt tudják, hogy nem a kódot hízlaljuk a végtelenségig és átláthatatlanságig, hanem egy külön fájlba tároljuk el a kódot. Sajnos a Bloggeren nincs tárhely, ahol a scriptfájljainkat tárolhatnánk.
Úgyhogy van, amit nem script csinál, de akkor meg kell elégedni az alap Minima sablonnal, és azokkal a widgetekkel, amit a Blogger nyújt szolgáltatásként az ő saját tárhelyéről.

Gyuri írta... [Válasz erre...]

Én a konyha kép effektjét nem látom, sem Chrome-mal, sem IE8-al. Meglepetésre Renzi Marconál Chrome-mal minden effekt megy, de IE8-cal egyik sem. Ja, és a konyha képlopás védelem sem müxik IE8-cal, rákkattintva a szokásos dolog lesz, azaz ua. ablakban megjön a "http://1.bp.blogspot.com/_pHfsk7ExMQA/S9MlX4z1Y4I/AAAAAAAADZw/_G3Td1wsjnY/s1600/kitchen-1_large.jpg" kép.

Wise Lady írta... [Válasz erre...]

A képvédelem azért nem él, mert magát az effectet se látod. Gondolom, hogy böngészőbeállítás kérdése, mert én IE8, Chrome, FF és Safari alatt is látom az effektet mind Marco oldalán, mind itt.

Gyuri írta... [Válasz erre...]

Köszi, de Marco oldalán miért látom a helyes működést?

Wise Lady írta... [Válasz erre...]

Azt meg a másik böngészővel nem látod. Valami nincs feltelepítve, a rendszerhez, amiket még fel szoktunk.
De izgalmas kérdés, engem is érdekelne a megoldás, kicsit gondolkozom rajta.

hamm-mer írta... [Válasz erre...]

megmutiztam az egyik haveromnak is ezt a bejezésed. neki: http://valyoghaz.blogspot.com/2010/07/konyhabutor-teglabol-4.html

Eshte írta... [Válasz erre...]

Egy sima html oldalba próbálom ezt a kódot, de nem működik. Mit csinálhatok rosszul?

Wise Lady írta... [Válasz erre...]

@Eshte
Mit értesz sima html oldalon? Ha megírnád a címét, rá tudnék nézni.

Eshte írta... [Válasz erre...]

Egy statikus oldalon lévő üzleti honlap, html. Azért nem akartam belinkelni, hogy nehogy reklámnak gondold... Az oldalon lévő képek mintáinak kinagyítására használnám a sriptet, de eddig mélg nem sikerült megjelenítenem, pedig úgy csináltam mindent, ahogy irtad. A js és cs fájlokat átmásoltam a honlap főkönyvtárába és azután illesztettem be a kódot az adott oldalba, adott képekhez... és semmi.

http://www.hargitapolo.hu link

Előre is köszönöm, ha tudnál rá időt szakítani és megnéznéd mit teszek rosszul.

Peti írta... [Válasz erre...]

Szia!
Ezt a képnagyítós módszert nagyon szeretem, főleg mert nem lehet olyan egyszerűen "ellopni" a képeimet. Azonban a Marco oldalán valami újabb verzió került fel, úgyhogy se nálad, se nálam nem működik. Légyszíves próbáld meg összehozni megint, mert hiányzik az opció :)
Köszi: Peti

Wise Lady írta... [Válasz erre...]

@Peti
Kösz a jelzést, meg fogom nézni.

Névtelen írta... [Válasz erre...]

@Wise Lady
Köszönöm szépen a javítást :)

Ramimami írta... [Válasz erre...]

Valszeg nálam van a hiba, de nem nagyítódik ki a konyha. Megpróbálom azért a saját képeimen, hátha...

Ramimami írta... [Válasz erre...]

Feltettem, szépen, jól is működik. DE!!! Ha ez benne van a sablonomban, akkor a Featured Content Slider (nem tudom mi a normális neve), szóval a főoldalon gördülő képek, megakadnak és nem lapozzák magukat. Van erre valami jó ötleted, hogy mindkettő működjön?
Köszi

Wise Lady írta... [Válasz erre...]

Talán mindkettő a JQuery alapscriptet használja, vagy arra épül. Úgy látszik összeakad a java program valahol. Ezt nem tudom így kinyomozni, sajnos valamelyikről le kell mondanod.

STELL írta... [Válasz erre...]

Wise Lady
Koszi szépen, csak kipróbáltam ,de igen jó és működik.
Szlovak blogom

Wise Lady írta... [Válasz erre...]

@STELL
Megnéztem, nagyon jó lett. Viszont, ha van saját tárhelyed, akkor érdemes odatenni a scripteket, és az elérési utakat is átírni.

STELL írta... [Válasz erre...]

@Wise Lady
Üdv
Nem, nem írom át mert nincsen saját tárhelyem,és lusta vagyok,lehet hogy majd....

Használtam a blogodból,több tippet,,
Ezeket is,
linkek
nyomtatas
Ha akarod, akkor küldj Bannert és beteszem a magyar blogomba.
Magyar blog

Úgy hogy meg egyszer koszi.

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-