C# - Képek nagyított mása egy új böngészőablakban

forráskód letöltése
Webes áruházakban találkozhatunk azzal az esettel, amikor a megvásárolható termék leírása mellett találunk egy kis képet a termékről, melyre csak rá kell kattintanunk ahhoz, hogy nagyobb változatban betöltődjön egy új ablakban. Cikkünkben bemutatjuk, hogyan hozható létre egy ilyen információs ablak a szükséges tartalommal. Az ablak érdekessége, hogy megjelenítése testre szabható.
Mellékelt példa megnyitása előtt szükséges egy ShowImage nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A mellékelt példában elhelyeztünk egy képet a Web lapunkon, mely kis méretű, így tartalma olvashatatlan. Azonban ezzel elegendő helyet takaríthatunk meg más információk számára. Amennyiben a felhasználó kíváncsi a képre teljes életnagyságban, lehetővé tesszük, hogy rákattintva megtekinthesse. A módszer használható tetszőleges tartalom betöltésére, mi most a kép nagyobb változatát választottuk.
A megvalósításhoz fel kell használnunk a window javascript objektum open metódusát, megfelelően paraméterezve. Szintaxisa a következő:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
Paraméterei valamennyien opcionálisak, amennyiben nem specifikáljuk az ablak tulajdonságait, akkor az alapértelmezéseket használva nyílik meg, „about:blank” tartalommal.
Első paraméterében megadhatjuk a betöltendő tartalom URL-jét.
Második paraméterben adhatunk egy nevet az ablaknak. A név-paraméterben adhatjuk meg, hogy az ablak milyen célhelyen nyíljon meg. Az alapbeállítás egy önálló, üres ablak, mintha a _blank kulcsszót adnánk meg. Választhatjuk a _parent, _self, _search, _top kulcsszavakat ennek megadásához úgyszintén.
Harmadik paramétere tartalmazza az ablak tulajdonságait egy karakterláncban felsorolva. Megadhatjuk az ablak méreteit, specifikálhatjuk megjelenését, eszközsorának láthatóságát, pozícióját.
A negyedik paraméterben határozhatjuk meg egy logikai paraméterrel, hogy ha a tartalom a forrás lappal azonos ablakba töltődik be, akkor hogyan jelenjen meg a címe a böngésző Előzmények listájában. TRUE érték esetén a dokumentum kicseréli az aktuális bejegyzést a History listában, FALSE esetén egy új bejegyzés keletkezik ott.
Ennek megfelelően a következőképpen hívhatjuk meg a metódust:
window.open("Sample.htm",null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
Példánkban sem járunk el másként. A WebForm1.aspx lapon elhelyezett kis kép egy Image objektumban kapott helyet, melynek onclick eseményét kezelendő, meghívjuk a fenti függvényt. Az ablakba a WebForm2.apx lap töltődik be, melyen szintén egy Image objektumban helyeztük el a kép nagyobb változatát.
A metódus meghívása a következő paraméterezéssel történt:
...
window.open('http://localhost/ShowImage/WebForm2.aspx','','height=470,width=600');
Az ablakba betöltött lapon helyezhetjük el az ablak bezárását lehetővé tevő linket is, melyre rákattintva a window objektum close metódusa hívódik meg.