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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlWpRuFgqbYkptJ6k6HlJPRqBZs9FAVq74lADQApQVtA4XiZio-T4UuRYDVLhDgBj3diUc3DZcYIUiK-BrAB7bKeVlt-W589SMrRs2ByVoAZRfQQ3Fm_nHXqtMdFXK8GQ9yUig2Fib6Q/s1600/kitchen-1_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlWpRuFgqbYkptJ6k6HlJPRqBZs9FAVq74lADQApQVtA4XiZio-T4UuRYDVLhDgBj3diUc3DZcYIUiK-BrAB7bKeVlt-W589SMrRs2ByVoAZRfQQ3Fm_nHXqtMdFXK8GQ9yUig2Fib6Q/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlWpRuFgqbYkptJ6k6HlJPRqBZs9FAVq74lADQApQVtA4XiZio-T4UuRYDVLhDgBj3diUc3DZcYIUiK-BrAB7bKeVlt-W589SMrRs2ByVoAZRfQQ3Fm_nHXqtMdFXK8GQ9yUig2Fib6Q/s1600/kitchen-1_large.jpg" class="jqzoom" title="Konyha" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlWpRuFgqbYkptJ6k6HlJPRqBZs9FAVq74lADQApQVtA4XiZio-T4UuRYDVLhDgBj3diUc3DZcYIUiK-BrAB7bKeVlt-W589SMrRs2ByVoAZRfQQ3Fm_nHXqtMdFXK8GQ9yUig2Fib6Q/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