123

Uwaga! Ta wi­try­na wy­ko­rzy­stu­je pli­ki cook­ies w ce­lu umoż­li­wie­nia dzia­ła­nia nie­któ­rych fun­kcji ser­wi­su (np. zmia­ny ko­lo­ru tła, wy­glą­du in­ter­fej­su, itp.) oraz w ce­lu zli­cza­nia li­czby od­wie­dzin. Wię­cej in­for­ma­cji znaj­dziesz w Po­li­ty­ce pry­wat­no­ści. Ak­tual­nie Two­ja przeg­lą­dar­ka ma wy­łą­czo­ną ob­słu­gę pli­ków co­o­kies dla tej wi­try­ny. Ten ko­mu­ni­kat bę­dzie wy­świet­la­ny, do­pó­ki nie za­ak­cep­tu­jesz pli­ków cook­ies dla tej wi­try­ny w swo­jej przeg­lą­dar­ce. Kliknięcie ikony * (w pra­wym gór­nym na­ro­żni­ku stro­ny) ozna­cza, że ak­ce­ptu­jesz pli­ki cookies na tej stro­nie. Ro­zu­miem, ak­cep­tu­ję pli­ki cook­ies!
*
:
/
o
[
]
Z
U

Ładowanie galerii

  1. Podstawy
  2. Ładowanie synchroniczne
  3. Ładowanie asynchroniczne
  1. Uruchamianie galerii na żądanie
  2. Ładowanie galerii na żądanie
  3. Kilka galerii na jednej stronie


  1. Podstawy   ^

Pli­kiem wy­ko­ny­wal­nym ga­le­rii jest skom­pre­so­wa­ny i za­ko­do­wa­ny plik vg.js. Aby uru­cho­mić ga­le­rię na ser­we­rze, na­le­ży ten plik sko­pio­wać na ser­wer (do ka­ta­lo­gu głó­wne­go lub do­wol­ne­go in­ne­go) i w ko­dzie stro­ny (w sek­cji <head>) do­dać na­stę­pu­ją­cy kod Java­Script:

(1)<script src="vg.js" charset="utf-8">​</script>

To po­le­ce­nie za­ła­du­je ga­le­rię, ale jej nie uru­cho­mi. Oczy­wiś­cie, gdy­by ga­le­ria znaj­do­wa­ła się w pod­ka­ta­lo­gu, to w atry­bu­cie src na­le­ży po­dać peł­ną ścież­kę do pli­ku vg.js, np. "galeria/vg.js".

Żeby urucho­mić za­ła­do­wa­ną ga­le­rię, na­le­ży wy­ko­nać na­stę­pu­ją­cy kod:

(2)
new VG_start(parent, 'config.js');


parent – jest obiektem (najczę­ściej typu div), wewnątrz któ­re­go ga­le­ria ma zo­stać wy­świet­lo­na,
config.js – jest na­zwą pli­ku kon­fi­gu­ru­ją­ce­go ga­le­rię.

Je­dnak­że przed­sta­wio­ne wy­żej roz­wią­za­nie nie­ko­nie­cznie mu­si za­dzia­łać, a to dla­te­go, że nie za­pe­wni­liś­my syn­chro­ni­za­cji wy­ko­na­nia po­szcze­gól­nych dzia­łań. Po­nie­waż plik ga­le­rii mo­że ła­do­wać się przez ja­kiś czas – mo­że do­jść do wy­ko­na­nia ko­du (2) za­nim plik ga­le­rii (1) zo­sta­nie za­ła­do­wa­ny. W ta­kiej sy­tua­cji oczy­wi­ście ga­le­ria nie zo­sta­nie uru­cho­mio­na. Aby te­mu za­po­biec mu­si­my za­pe­wnić, że­by kod (2) wy­ko­nał się do­pie­ro wte­dy, kie­dy kod (1) bę­dzie za­ła­do­wa­ny. Że­by to zro­bić mo­że­my kod (2) umie­ścić w zda­rze­niu, któ­re wy­ko­na się po za­ła­do­wa­niu stro­ny:

(3)
window.addEventListener('load', function(){
new VG_start(parent, 'config.js')})


  1. Ładowanie synchroniczne galerii   ^

Za­kła­da­jąc, że chce­my wy­świet­lić ga­le­rię at­las, któ­rą przy­go­to­wa­liś­my w ra­mach przewodnika Jak za­cząć, i że pli­kiem kon­fi­gu­ra­cyj­nym jest w związ­ku z tym plik atlas.js, peł­ny, dzia­ła­ją­cy kod stro­ny in­ter­ne­to­wej za­wie­ra­ją­cy ga­le­rię uru­cha­mia­ną w ten spo­sób wy­glą­dał­by na­stę­pu­ją­co:

(4) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script src="vg.js" charset="utf-8">​</script>
<script>
window.​addEventListener('load', function(){
new VG_start(document.​getElementById('gallery'), 'atlas.js')});
</script>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
</body>
</html>

Powyższy kod zapisany w pliku code_4.htm można tu przetestować.

Roz­wią­za­nie to dzia­ła, choć też nie jest po­zba­wio­ne wa­dy. Otóż ła­do­wa­nie ga­le­rii wg ko­du (1) od­by­wa się w spo­sób tzw. syn­chro­nicz­ny, czy­li ła­do­wa­nie ko­du ga­le­rii wstrzy­mu­je in­ne dzia­ła­nia przeg­lą­dar­ki. Oczy­wi­ście – w sy­tua­cji, gdy stro­na za­wie­ra tyl­ko ga­le­rię – nie ma to spe­cjal­nie wiel­kie­go zna­cze­nia, ale gdy­by stro­na za­wie­ra­ła in­ne ele­men­ty, to nie mog­ły­by one być wy­świet­lo­ne, do­pó­ki nie za­ła­do­wa­ła­by się ga­le­ria.


  1. Ładowanie asynchroniczne galerii   ^

Aby załadować galerię asynchronicznie (tzn. żeby strona nie czekała na załadowanie pliku galerii), należy w kodzie (1) dodać atrybut async.

W tej sy­tua­cji zda­rze­nie load wy­wo­ły­wa­ne po za­ła­do­wa­niu stro­ny nie bę­dzie już zsyn­chro­ni­zo­wa­ne z ła­do­wa­niem ga­le­rii (w su­mie o to prze­cież cho­dzi­ło). To je­dnak ro­dzi ko­lej­ny prob­lem :-). Otóż mo­że­my oczy­wi­ście zda­rze­nie load pod­piąć do skryp­tu ła­du­ją­ce­go ga­le­rię, ale wte­dy z ko­lei mo­że się zda­rzyć tak, że ga­le­ria za­ła­du­je się ja­ko pier­wsza, a obiekt, do któ­re­go bę­dzie mia­ła być ona pod­pię­ta nie bę­dzie je­szcze ist­niał.

Roz­wią­za­niem naj­pro­stszym jest za­mia­na w ko­dzie (1) atry­bu­tu async na atry­but de­fer, któ­re­go dzia­ła­nie po­le­ga na tym że opóź­nia on wy­wo­ła­nie skryp­tu do mo­men­tu za­ła­do­wa­nia ca­łej stro­ny. A więc de­fer na­le­ży ro­zu­mieć tak, że ga­le­ria ła­du­je się nie­za­leż­nie od stro­ny i je­śli jej ła­do­wa­nie się prze­dłu­ża, a stro­na (po­za ga­le­rią) jest go­to­wa do wy­świet­le­nia, to zo­sta­nie ona wy­świet­lo­na (z pu­stym po­lem w miej­scu ga­le­rii). Na­to­miast w sy­tua­cji od­wrot­nej (je­śli ga­le­ria za­ła­du­je się szyb­ciej od po­zo­sta­łej czę­ści stro­ny), to po­cze­ka ona na peł­ne za­ła­do­wa­nie stro­ny i wte­dy się uru­cho­mi. Peł­ny i dzia­ła­ją­cy kod stro­ny in­ter­ne­to­wej za­wie­ra­ją­cy ga­le­rię uru­cha­mia­ną w ten spo­sób wy­glą­dał­by na­stę­pu­ją­co:

(5) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function startGallery(){
new VG_start(document.​getElementById('gallery'), 'atlas.js');
}
</script>
<script src="vg.js" charset="utf-8" defer onload="startGallery()"></script>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
</body>
</html>

Ten kod jest za­pi­sa­ny w pli­ku code_5.htm i moż­na go prze­te­sto­wać pod tym od­noś­ni­kiem.

In­ne moż­li­we roz­wią­za­nia, to np. ła­do­wa­nie ga­le­rii asyn­chro­nicz­nym ko­dem Java­Script umie­szczo­nym na koń­cu stro­ny (przed za­mknię­ciem <body>). Wte­dy bę­dzie­my mie­li pe­wność, że obiekt, w któ­rym ma się po­ja­wić ga­le­ria bę­dzie już ist­niał. Ta­ki kod wy­glą­dał­by na­stę­pu­ją­co:

(6) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
<script>
function startGallery(){
new VG_start(document.​getElementById('gallery'), 'atlas.js');
}
</script>
<script src="vg.js" charset="utf-8" async onload="startGallery()"> </script>
</body>
</html>

Po­wyż­sze roz­wią­za­nie ma ta­ką za­le­tę, że ga­le­ria w ża­den spo­sób nie wpły­wa na opóź­nie­nie ła­do­wa­nia stro­ny. W roz­wią­za­niu z de­fer, mi­mo że ła­do­wa­nie od­by­wa się asyn­chro­nicz­nie, to je­dnak część prze­pu­sto­wo­ści łą­cza jest za­jmo­wa­na przez ga­le­rię. W ostat­nim roz­wią­za­niu ga­le­ria za­jmu­je prze­pu­sto­wość łą­cza do­pie­ro w mo­men­cie, gdy ca­ła stro­na jest już za­ła­do­wa­na i mo­że być wy­świet­lo­na. Użyt­ko­wnik mo­że już za­cząć prze­glą­dać stro­nę, a kie­dy ga­le­ria się za­ła­du­je – au­to­ma­tycz­nie się uru­cho­mi. Ten przy­kła­do­wy kod jest za­pi­sa­ny w pli­ku code_6.htm i tu jest do nie­go od­noś­nik.


  1. Uruchamianie galerii na żądanie   ^

Moż­na też nie uru­cha­miać ga­le­rii au­to­ma­tycz­nie pod­czas ła­do­wa­nia stro­ny, ale uru­cho­mić ją do­pie­ro wte­dy, kie­dy użyt­ko­wnik wy­ko­na ja­kąś ak­cję. Po­pa­trzmy na po­niż­szy kod:

(7) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function enableGallery(){
var parent=document.​getElementById('gallery');
parent.onclick=function(){
new VG_start(this, 'atlas.js');
}
}
</script>
<script src="vg.js" charset="utf-8" defer onload="enableGallery()"> </script>
</head>
<body>
<div style="position:relative; top:10px; left:10px; width:calc(100% - 20px); max-width:600px; height:calc(100% - 20px); max-height:400px;
background-color:#444444; color:#AAAAAA; text-align:center; font-size:26px; font-family:Tahoma; line-height:400px">
Kliknij tu
<div id="gallery" style="cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%"></div>
</div>
</body>
</html>

W tym ko­dzie, za­ła­do­wa­nie ga­le­rii spo­wo­du­je wy­ko­na­nie fun­kcji enab­le­Gal­le­ry, któ­ra uczu­li div-a (w któ­rym ma się zna­leźć ga­le­ria) na klik­nię­cie. Do­pie­ro je­go klik­nię­cie uak­ty­wni ga­le­rię. Po­wyż­szy kod (za­pi­sa­ny w pli­ku code_7.htm) moż­na prze­te­sto­wać na na­szym ser­we­rze.


  1. Ładowanie galerii na żądanie   ^

Kolejny przy­kład po­ka­zu­je, jak moż­na nie ła­do­wać ga­le­rii au­to­ma­tycz­nie (pod­czas ła­do­wa­nia stro­ny), ale za­ła­do­wać ją na żą­da­nie (po wy­ko­na­niu ja­kiejś ak­cji przez użyt­ko­wni­ka):

(8) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function loadAndStartGallery(parent){
var script=document.​createElement('script');
parent.appendChild(script);
script.onload=function(){
new VG_start(parent, 'atlas.js');
}
script.src="vg.js";
}
</script>
</head>
<body>
<div style="position:relative; top:10px; left:10px; width:calc(100% - 20px); max-width:600px; height:calc(100% - 20px); max-height:400px;
background-color:#444444; color:#AAAAAA; text-align:center; font-size:26px; font-family:Tahoma; line-height:400px">
Kliknij tu
<div onclick="loadAndStartGallery(this)" style="cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%"></div>
</div>
</body>
</html>

W tym ko­dzie klik­nię­cie w div-a znaj­du­ją­ce­go się nad na­pi­sem klik­nij mnie spo­wo­du­je wy­ko­na­nie fun­kcji load­And­Start­Gal­le­ry, któ­ra two­rzy dy­na­micz­nie obiekt ty­pu script, któ­ry ła­du­je ga­le­rią, a po jej za­ła­do­wa­niu au­to­ma­tycz­nie ją uru­cha­mia. Kod z tym przy­kła­dem jest za­pi­sa­ny w pli­ku code_8.htm i moż­na go prze­te­sto­wać kli­ka­jąc w ten od­noś­nik.


  1. Kilka galerii na jednej stronie   ^

W tym przykładzie pokazujemy, jak załadować i wy­świe­tlić na je­dnej stro­nie kil­ka ga­le­rii. Oczy­wiś­cie w ta­kim przy­pad­ku nie mu­si­my ła­do­wać ga­le­rii wie­lo­krot­nie. Wy­star­czy za­ła­do­wać ją raz, a po­tem utwo­rzyć kil­ka obiek­tów z te­go sa­me­go kodu:

(9) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{margin: 0; padding: 0; height: 100%; background-color:#000000}
.gal{position:relative; display:inline-block; width:500px; height:350px}
</style>
</head>
<body>
<div id="gal_1" class="gal"></div>
<div id="gal_2" class="gal"></div>
<div id="gal_3" class="gal"></div>
<div id="gal_4" class="gal"></div>
<script>
function startGallery(id, config){
new VG_start(document.​getElementById(id), config);
}
</script>
<script src="vg.js" charset="utf-8" async onload="
startGallery('gal_1', 'atlas.js');
startGallery('gal_2', 'k3d.js');
startGallery('gal_3', 'banner-pl1.js');
startGallery('gal_4', 'banner_nk.js'); ">
</script>
</body>
</html>

W tym wypadku do fun­kcji startGallery() prze­ka­zu­je­my dwa pa­ra­me­try (tj. iden­ty­fi­ka­tor div-a oraz na­zwę pli­ku kon­fi­gu­ra­cyj­ne­go – po to, aby w każ­dej ga­le­rii wy­świe­tlić inne dane). Efe­kty tych dzia­łań za­pi­sa­no w pli­ku code_9.htm i moż­na je zo­ba­czyć kli­ka­jąc w ten od­noś­nik.

Serwisy 3n

Logo Kombi
Logo Wirtualnej Galerii
Logo 3N STOCK PHOTOS
Logo Kombi PDF Tools
Logo Projektora K3D
Logo 3N Games