JQuery galéria megjelenési gondok(kattide)

A "Jquery Image Zoom Plugin" eredeti példáinak kissé magyarított változata, kezdők részére...

Vissza a prog.hu tesztek-re...

Alapértelmezett "ZOOM"

A nagyítás működik képen belül vagy két kép között. A két kép beállítás az ajánlott / legjobb művelet a nagyításhoz (small <-> large). A legtöbb alapbeállítást a nagyítás dobozon módosítani lehet.

KÓD MUTATÁSA
//A tesztek működéséhez szükséges fájlok meghívása
<link type="text/css" rel="stylesheet" href="prism.css" />
<link type="text/css" rel="stylesheet" href="jquery.fancybox.css" />
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='jquery.elevatezoom.js'></script>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
//ezen teszt kódja
//HTML
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1."/>
//JAVASCRIPT
$("#zoom_01").elevateZoom(
 lensColour:'green',
 lensOpacity:0.2
);

Lefedő szín

Könnyedén lehet módisítani a kép lefedő színét (#000 - #FFF) és átlátszóságát (0.0 - 1.0). A letakarásra meg lehet adni bármilyen értékeket.

Red
Black
Green
KÓD MUTATÁSA
//HTML
<img id="zoom_02" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_02").elevateZoom({
 tint:true,
 tintColour:'#F90',
 tintOpacity:0.5,
 zoomTintFadeIn:true,
 zoomTintFadeOut:true
 borderColour:'#F90'
});

Galéria & "ZOOM"

Lehet több képet is csatolni a ZOOM-hoz. Ezeket át tudja a galéria adni a ZOOM-nak.
Újdonság: Az imageCrossfade opció fadein / fadeout hatást ad a ZOOM-nak.

KÓD MUTATÁSA
//HTML
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
<a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
<img id="img_01" src="thumb/image3.jpg" />
</a>
<a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
<img id="img_01" src="thumb/image4.jpg" />
</a>
</div>
//JAVASCRIPT
$("#zoom_03").elevateZoom({
 gallery:'gallery_01',
 cursor: 'pointer',
 galleryActiveClass: 'active',
 imageCrossfade: true,
 loadingIcon::'spinner.gif'
});
//CSS>
#gallery_01 img{border:2px solid white;}
.active img{border:2px solid #333 !important;}

Ez egy DIV elem, melybe a "ZOOM" ablak pozícionálás
/
Position:"DIV-ID"

beállítású teszt
"ZOOM"-képe
kerül.
Position:1 (Alapértelmezett)
Position:3
Position:4
Position:12
Position:1, Offetx(y):10px
Position:"DIV-ID"

"ZOOM" ablak pozícionálás

A Position értékek (1-16) az elhelyezkedést határozzák meg egy-egy alapértelmezett helyzetben, melyek a zoomWindowOffetx(y) értékkel korrigálhatóak.



Vagy elhelyezhető egy bárhova pozícionált DIV-ben az ID alapján!

KÓD MUTATÁSA
//HTML
<img id="zoom_04a" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04b" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04c" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_04a").elevateZoom({zoomWindowPosition: 1});
$("#zoom_04b").elevateZoom({zoomWindowPosition: 12});
$("#zoom_04c").elevateZoom({
 zoomWindowPosition: "demo-container",
 zoomWindowHeight: 200,
 zoomWindowWidth:200,
 borderSize: 0,
 easing:true
});
$("#zoom_04d").elevateZoom({zoomWindowPosition: 1, zoomWindowOffetx: 10});

Belső "ZOOM"

A ZOOM-képet el lehet helyezni az eredeti képen belül is.

KÓD MUTATÁSA
//HTML
<img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_05").elevateZoom({zoomType: "inner", cursor: "crosshair" });

Objektív jellegű belső "ZOOM"

Használhatod a zoomType : "lens" beállítást képnagyításként.
Így a ZOOM-kép az eredeti kép fölött nagyító lencse formájú lesz.

KÓD MUTATÁSA
//HTML
<img id="zoom_07" src="small/image1.png"data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_07").elevateZoom({ zoomType : "lens", lensShape : "round", lensSize : 250});

FadeIn / FadeOut beállítás

A lencs árnyalata változik megjelenéskor / eltűnéskor a megadott értékkel.

KÓD MUTATÁSA
//HTML
<img id="zoom_08" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_08").elevateZoom({
 zoomWindowFadeIn: 3000, zoomWindowFadeOut: 3000, lensFadeIn: 500, lensFadeOut: 500}
);

Külső vezérlés

A többképes megoldás legördülő elemmel történő vezérlése is lehetséges.

Válassz!

KÓD MUTATÁSA
//HTML
<img id="zoom_09" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<select id="select"> 
 <option value="1">Front</option>
 <option value="2">Back</option>
 <option value="3">Scenery</option>
 <option value="4">Side</option>
</select>
//JAVASCRIPT
$("#zoom_09").elevateZoom({
 gallery : "gallery_09",
 galleryActiveClass: "active"
}); 
$("#select").change(function(e){
 var currentValue = $("#select").val();
 if(currentValue == 1){    
  smallImage = 'http:images/small/image1.png';
  largeImage = 'http:images/large/image1.jpg';
 }
 if(currentValue == 2){    
  smallImage = 'http:images/small/image2.png';
  largeImage = 'http:images/large/image2.jpg';
 }
 if(currentValue == 3){    
  smallImage = 'http:images/small/image3.png';
  largeImage = 'http:images/large/image3.jpg';
  }
 if(currentValue == 4){    
  smallImage = 'http:images/small/image4.png';
  largeImage = 'http:images/large/image4.jpg';
 }
 $('#gallery_09 a').removeClass('active').eq(currentValue-1).addClass('active');		
 var ez =   $('#zoom_09').data('elevateZoom');	  
 ez.swaptheimage(smallImage, largeImage); 
});

Késleltetett mozgás

Használható az alapértelmezett késleltetés vagy egy egyéni késleltetési beállítás is.
Az érték módosítható (alapértelmezett = 12). Magasabb érték nagyobb, alacsonyabb érték kisebb késleltetést állít be.

KÓD MUTATÁSA
//HTML
<img id="zoom_10" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_10").elevateZoom({easing : true});

Egérgörgővel nagyítás

A nagyítás mértékének egérgörgővel történő állítása is lehetséges a scrollZoom tulajdonság engedélyezésével.

A kép fölött próbáld meg!

KÓD MUTATÁSA
//HTML
<img id="zoom_mw" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_mw").elevateZoom({scrollZoom : true});

Nagyítási szint

A nagyítás alapértelmezés szerint 1, de ezt felül lehet bírálni. Ezt megteheted a zoomLevel értékének beállításával.
Elvileg a zoomLevel : 2 a képet kétszer kisebbre, a zoomLevel : 0.5 a képet kétszer nagyobbra alakítja át.

KÓD MUTATÁSA
//HTML
<img id="zoom_11" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_11").elevateZoom({
 zoomType : "lens",
 lensShape : "round",
 containLensZoom  : true,
 lensSize : 400,
 zoomLevel : 0.5
});

A "ZOOM" ablak méretbeállítása

A ZOOM ablak mérete beállítható bármilyen arányokkal a zoomWindowWidth és zoomWindowHeight paraméterek megadásával.

KÓD MUTATÁSA
//HTML
<img id="zoom_13" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_14" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//JAVASCRIPT
$("#zoom_13").elevateZoom({
  zoomWindowWidth:300,
  zoomWindowHeight:100
}); 
$("#zoom_14").elevateZoom({
  zoomWindowWidth:100,
  zoomWindowHeight:300
});

A "FancyBox" galériához csatolása

Ha szükséges, akkor a FancyBox-ot hozzá tudod kapcsolni a ZOOM-hoz és így át tudod adni a galéria képeit a lightboxnak.
Megtekintéshez klikk a képen!

KÓD MUTATÁSA
//HTML
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>
  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>
  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>
  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>
</div>
//JAVASCRIPT
$("#zoom_03").elevateZoom({
 constrainType:"height",
 constrainSize:274,
 zoomType: "lens",
 containLensZoom: true,
 gallery:'gallery_01',
 cursor: 'pointer',
 galleryActiveClass: "active"
}); 
$("#zoom_03").bind("click", function(e) { 
 var ez =   $('#zoom_03').data('elevateZoom'); 
 $.fancybox(ez.getGalleryList());
 return false;
});
//CSS
#gallery_01 img{border:2px solid white;}
.active img{border:2px solid #333 !important;}


Beállítási lehetőségek

Opció Alapértelmezett érték Leírás
responsive false Ha van olyan sablon, amely megváltoztathatja a "ZOOM" méretét vagy tájolását, erre szükség van. Lehetséges értékek: "true", "false"
scrollZoom false A "nagyítás egér scrollal" aktiválására alkalmas.   Lehetséges értékek: "true", "false"
imageCrossfade false A "fadein / fadeout hatás" aktiválására alkalmas.   Lehetséges értékek: "true", "false"
loadingIcon false A képbetöltődés alatt megjelenő kép.   Lehetséges értékek: "spinner.gif", "false"
easing false Aktíválja a feloldást.   Lehetséges értékek: "true", "false"
lensSize 200 A lencse méretét határozza meg, ha zoomType "lens"
Ha nincs megadva a "lensSize", akkor a lencse mérete automatikusan számított lesz.
zoomWindowWidth 400 A ZoomAblak szélességét határozza meg.   Megjegyzés: zoomType legyen "window"
zoomWindowHeight 400 A ZoomAblak magasságát határozza meg.   Megjegyzés: zoomType legyen "window"
zoomWindowOffetx 0 Az x-tengely eltolása a nagyítási ablaknak.
zoomWindowOffety 0 Az y-tengely eltolása a nagyítási ablaknak.
zoomWindowPosition 1 A ZOOM-ablak beépített pozícióinak megadására szolgál
Korrigálásra használható a zoomWindowOffsetx & zoomWindowOffsety beállítás!
Lehetséges értékek: 1-16
lensFadeIn false True érték a lencse megjelenési árnyalatváltozásának beállítására szolgál (sebesség=200).
lensFadeOut false True érték a lencse eltűnési árnyalatváltozásának beállítására szolgál (sebesség=200).
zoomWindowFadeIn false True érték a képabalak megjelenési árnyalatváltozásának beállítására szolgál (sebesség=200).
zoomWindowFadeOut false True érték a képabalak eltűnési árnyalatváltozásának beállítására szolgál (sebesség=200).
zoomTintFadeIn false True érték a lefedő szín megjelenési árnyalatváltozásának beállítására szolgál (sebesség=200).
zoomTintFadeOut false True érték a lefedő szín eltűnési árnyalatváltozásának beállítására szolgál (sebesség=200).
borderSize 4 A "ZoomBox" keret vastagságának beállítására szolgál (borderSize:0 nincs keret).
borderColour #888 A "ZoomBox" keret színének beállítására szolgál.
lensShape square A lencs formáját határozza meg (lensShape:"round").
(Csak modern böngészők támogatják, régebbi böngészőknél alapértelmezett kell!)
zoomType window A zoom-kép helyét határozza meg. Lehetséges értékek: "lens", "window", "inner"
containLensZoom false A true érték használható a zoomType:"lens" beállításhoz.
Ez biztosítja, hogy a lencse nem essen kívül a képen.
lensColour white A lencse háttérszínét adja meg.
lensOpacity 0.4 A lencse átlátszóságát adja meg. Együtt használd a lensColour megadással!
tint false Képet lefedő szín beállításának engedélyezése.
tintColour #333 Képet lefedő szín értékének megadása. Lehet #hex, névvel:red vagy rgb(x, x, x).
tintOpacity 0.4 Képet lefedő szín átlátszóságának megadása.
gallery null Galéria blokk hozzárendelése a ZOOM-képhez, ID alapján.
cursor default Az alapértelmezett kurzor a nyíl (arrow), ha beállítasz másikat, az lesz.
Lehetséges értékek: "default", "pointer", "crosshair"...