Uruchamianie galerii

1. Funkcja VG_start()   ^

W przy­kła­dach na stro­nie Ła­do­wa­nie ga­le­rii wi­dzi­my, że do fun­kcji VG_start() są prze­ka­zy­wa­ne dwa pa­ra­me­try. Te dwa (pier­wsze) pa­ra­me­try są obo­wiąz­ko­we, ale mo­że­my prze­ka­zać ich wię­cej. For­mal­nie fun­kcja uru­cha­mia­ją­ca ga­le­rię ma na­stę­pu­ją­cą skła­dnię:

(1)^var VG=new VG_start(parent, config, lang=0, sld_num=0, cfg_back=null, vg_data_name="vg_data", is_root=1, directory="");

VG jest zmien­ną (o do­wol­nej naz­wie), któ­ra rep­re­zen­tu­je obiekt ty­pu VG_start zwra­ca­ny przez fun­kcję uru­cha­mia­ją­cą ga­le­rię. Obiekt VG_start ma na­stę­pu­ją­ce skła­do­we:

er­ror	–	kod błę­du. Po­le error, mo­że przy­jmo­wać na­stę­pu­ją­ce war­to­ści:  0 – ini­cja­li­za­cja roz­po­czę­ta, 1 – nie zna­le­zio­no pli­ku vg_fs.js. Plik ten jest od­po­wie­dzial­ny za ob­słu­gę wy­świet­la­nia ga­le­rii w try­bie peł­ne­go ekra­nu i jest stan­dar­do­wo ła­do­wa­ny z ka­ta­lo­gu vg_data. Je­śli chce­my zmie­nić naz­wę te­go ka­ta­lo­gu, to mu­si­my no­wą naz­wę po­dać w pa­ra­me­trze vg_data_name, 2 – pa­rent ma już przy­pi­sa­ną ga­le­rię i pró­bo­wa­no te­mu sa­me­mu pa­ren­to­wi przy­pi­sać po­no­wnie in­ną ga­le­rię, 3 – nie zna­le­zio­no pli­ku con­fig, 4 – nie zna­le­zio­no pli­ku z li­stą wy­świet­la­nych slaj­dów, 5 – nie zna­le­zio­no pli­ku z od­noś­ni­ka­mi, 6 – nie zna­le­zio­no pli­ku z opi­sa­mi slaj­dów, 7 – nie zna­le­zio­no pli­ku vg.css, 8 – obiekt pa­rent nie ist­nie­je, 9 – nie zna­le­zio­no pli­ku z pod­po­wie­dzia­mi, 10 – uru­cho­mio­no ga­le­rię bez błę­dów. Uwaga, jeśli w pli­kach wy­mie­nio­nych wy­żej, któ­re ge­ne­ru­ją błę­dy: 3, 4, 5, 6 i 9 wy­stą­pi błąd skła­dni, to ta­ki plik nie zo­sta­nie za­ła­do­wa­ny i ga­le­ria wy­ge­ne­ru­je błąd bra­ku pli­ku. W ta­kiej sy­tu­acji na­le­ży spra­wdzić skła­dnię w pli­ku (bra­ku­jące lub nad­mia­ro­we prze­cin­ki, cu­dzy­sło­wy, itp.).
error_file	–	naz­wa pli­ku, któ­ry wy­wo­łał błąd. In­for­ma­cje o błę­dach są rów­nież wy­sy­ła­ne do kon­so­li Java­Script.
num_back	–	fun­kcja zwrot­na zwra­ca­ją­ca in­for­ma­cje nu­me­rycz­ne. Fun­kcja przy­jmu­je dwa pa­ra­me­try. Pa­ra­metr pier­wszy jest kon­tek­stem wy­wo­ła­nia. Moż­li­we kon­tek­sty to:  0 – pa­ra­metr dru­gi za­wie­ra in­for­ma­cję o błę­dach,  1 – pa­ra­metr dru­gi za­wie­ra nu­mer wy­świet­la­ne­go slaj­du. Jeśli ta war­tość jest ró­wna -1, to zn­aczy, że roz­po­czę­ła się zmia­na slaj­du i nu­mer slaj­du jest nie­okre­ślo­ny,  2 – pa­ra­metr dru­gi za­wie­ra kod ak­cji wy­ko­na­nej przez użyt­ko­wni­ka. Moż­li­we ak­cje:  0 – wy­ko­na­no fun­kcję stop,  1 – wy­ko­na­no fun­kcję start,  2 – wy­bra­no po­prze­dni slajd,  3 – wy­bra­no na­stęp­ny slajd,  4 – wy­bra­no pierwszy slajd za po­mo­cą kla­wi­sza Home,  5 – wy­bra­no ostatni slajd za po­mo­cą kla­wi­sza End,  6 – użytkownik wszedł do try­bu peł­ne­go ekra­nu,  7 – użytkownik wy­szedł z try­bu peł­ne­go ekra­nu,  8 – użytkownik włączył od­twa­rza­nie dźwięku,  9 – użytkownik wyłączył od­twa­rza­nie dźwięku,  10 – użytkownik otworzył panel z mi­nia­tu­ra­mi,  11 – użytkownik zamknął panel z mi­nia­tu­ra­mi,  12 – użytkownik kliknął slajd (w cen­tral­nym po­lu ga­le­rii). Je­śli fun­kcja num_back zwróci true, to do­myśl­na ak­cja nie zo­sta­nie wy­ko­na­na,  13 – użytkownik włączył od­twa­rza­nie fil­mu,  14 – użytkownik zatrzymał od­twa­rza­nie fil­mu,  15 – film do­biegł koń­ca.
txt_back	–	fun­kcja zwrot­na zwra­ca­ją­ca in­for­ma­cje tek­sto­we po wy­stą­pie­niu błę­du. Fun­kcja przy­jmu­je je­den pa­ra­metr.
VG	–	we­wnę­trzny obiekt ga­le­rii two­rzo­ny przez kon­struk­tor VG_start(). Ten obiekt udo­stę­pnia na­stę­pu­ją­ce fun­kcje skła­do­we: _del() – usu­wa ga­le­rię przy­pi­sa­ną da­ne­mu pa­ren­to­wi, _first() – wyświetla pierw­szy slajd, _fs(btn=0*) – włą­cza lub wy­łą­cza tryb peł­ne­go ekra­nu, _getN() – zwra­ca licz­bę slaj­dów, _getSelected() – zwra­ca nu­mer wy­świe­tla­ne­go slaj­du, _last() – wyświetla ostatni slajd, _next() – wyświetla na­stęp­ny slajd i zwra­ca nu­mer slaj­du, któ­ry bę­dzie wy­świe­tla­ny, _play(btn=0*) – uruchamia auto­ma­tycz­ne od­twa­rza­nie slaj­dów, _playVideo() – uruchamia od­twa­rza­nie vi­deo, któ­re jest ak­tu­al­nym slaj­dem, _prev() – wyświetla po­prze­dni slajd i zwra­ca nu­mer slaj­du, któ­ry bę­dzie wy­świe­tla­ny, _stop(btn=0*) – za­trzy­mu­je auto­ma­tycz­ne od­twa­rza­nie slajdów, _stopAll() – za­trzy­mu­je wszys­tkie ze­ga­ry ga­le­rii oraz wstrzy­mu­je od­twa­rza­nie dźwię­ków i od­twa­rza­nie vi­deo. Za­le­ca się wy­ko­na­nie tej fun­kcji przed usu­nię­ciem wę­zła za­wie­ra­ją­ce­go ga­le­rię, aby za­po­biec ewen­tu­al­ne­mu od­twa­rza­niu dźwię­ków mi­mo bra­ku otwar­tej ga­le­rii, _select(n) – wybiera slajd o nu­me­rze n, _setBtnFS(o) – przypisuje obiekt do funkcji włącz/​wy­łącz peł­ny ekran, _setBtnPlay(o) – przypisuje obiekt do funkcji włącz/​wy­łącz auto­ma­tycz­ną zmia­nę slaj­dów, _setBtnSnd(o) – przypisuje obiekt do funkcji włącz/​wy­łącz od­twa­rza­nie dźwię­ku, _snd(btn=0*) – włącza lub wy­łą­cza od­twa­rza­nie dźwię­ku, _sndOff(btn=0*) – wyłącza od­twa­rza­nie dźwię­ku, _sndOn(btn=0*) – włącza od­twa­rza­nie dźwię­ku, _sndVideo() – włącza lub wy­łą­cza od­twa­rza­nie dźwię­ku w od­twa­rza­nym video, _showAll() – wyświetla panel z mi­nia­tu­ra­mi, _stopVideo() – zatrzymuje od­twa­rza­nie vi­deo, któ­re jest aktual­nym slaj­dem, _waitForSlide(n, callback_fnc) – czeka na inicjali­za­cję slaj­du o nu­me­rze n. Je­śli slajd jest go­to­wy (np. video zo­sta­ło za­ła­do­wa­ne), to wy­wo­ły­wa­na jest fun­kcja call­back_fnc, któ­ra przy­jmu­je je­den pa­ra­metr bę­dą­cy obie­ktem typu VG. * – parametr btn jest opcjo­nal­ny. Je­że­li prze­ka­że­my ten pa­ra­metr, to ga­le­ria zmie­ni iko­nę przy­pi­sa­ną obie­kto­wi prze­ka­za­ne­mu tym pa­ra­me­trem (patrz Iko­ny w ga­le­rii).

W związ­ku z tym, że fun­kcja VG_start() zwra­ca obiekt, któ­ry za­wie­ra skła­do­wą er­ror mog­ło­by się wy­da­wać, że moż­na by­ło­by wy­ko­nać ta­ki kod:

(2)^
var VG=new VG_start(parent, con­fig);
alert(VG.error);

by do­wie­dzieć się, czy ga­le­ria zo­sta­ła pra­wid­ło­wo uru­cho­mio­na. To roz­wią­za­nie je­dnak nie za­dzia­ła, dla­te­go że fun­kcja uru­cha­mia­ją­ca ga­le­rię uak­ty­wni pe­wne pro­ce­sy, po czym na­tych­miast po­wró­ci z ko­dem 0 (ini­cja­li­za­cja roz­po­czę­ta). Na­to­miast za­i­ni­cjo­wa­ny pro­ces (jak np. za­ła­do­wa­nie pli­ku kon­fi­gu­ra­cyj­ne­go) mo­że za­koń­czyć się nie­po­wo­dze­niem. Wte­dy zo­sta­nie wy­wo­ła­na fun­kcja num_back lub txt_back i do­pie­ro wte­dy do­wie­my się, ja­ka jest przy­czy­na ewen­tual­ne­go nie­po­wo­dze­nia.

Zo­ba­czmy jak to dzia­ła na przy­kła­dach. Po­ni­żej wi­dzi­my pro­sto­kąt (pro­sto­kąt ten po uru­cho­mie­niu przy­kła­du bę­dzie au­to­ma­tycz­nie prze­su­wa­ny w ob­szar wi­do­czny na ekra­nie):

Prostokąt ten został zdefiniowany następującym kodem html:

(3)^<div id="gal_0" style="background-color:#AAAAAA; width:100%; height:300px"></div>

Do te­go pro­sto­ką­ta bę­dzie­my pod­pi­nać ko­lej­ne przy­kła­dy. Nasz kod uru­cha­mia­ją­cy ga­le­rię i wy­ko­rzy­stu­ją­cy fun­kcję num_back (z kontekstem 0) mo­że wy­glą­dać np. tak:

(4)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==0){
alert('Kontekst: '+­c+', war­tość: '+v)
}
};

Plik atlas_0.js jest tym sa­mym pli­kiem co at­las.js (przy­go­to­wa­nym wg po­ra­dni­ka Jak za­cząć), ale ma wy­łą­czo­ną czo­łów­kę. Klik­nij kod (4), aby go wy­ko­nać (je­śli na stro­nie są pre­zen­to­wa­ne ko­dy, któ­re moż­na uru­cho­mić, to uru­cho­misz je kli­ka­jąc w nu­mer ko­du w na­wia­sie po pra­wej stro­nie). Je­śli wszyst­ko za­dzia­ła – zo­sta­nie wy­świet­lo­ny ko­mu­ni­kat Kon­tekst: 0, war­tość: 10. To ozna­cza, że w pod­sy­ste­mie błę­dów (kon­tekst 0) od­no­to­wa­no po­pra­wne za­ła­do­wa­nie wszyst­kich pli­ków i ga­le­ria za chwi­lę roz­po­cznie pra­cę (kod 10).

Klik­nij po­no­wnie kod (4). Po­wi­nie­neś zo­ba­czyć ko­mu­ni­kat Kon­tekst: 0, war­tość: 2, któ­ry ozna­cza, że pod­sy­stem mo­ni­to­ro­wa­nia błę­dów (kon­tekst 0) wy­wo­łał błąd nu­mer 2, któ­ry ozna­cza, że da­ny pa­rent (w tym wy­pad­ku div z id="gal_0") ma już przy­pię­tą ga­le­rię.

Czy możemy to jakoś wykorzystać. Zobaczmy na ten kod:

(5)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==0 && v==2){
this.VG._del();
}
};

Klik­nij kod (5), aby wy­ko­nać po­wyż­szy kod. Je­śli ga­le­ria jest uru­cho­mio­na, to pier­wsze klik­nię­cie spo­wo­du­je wy­wo­ła­nie ko­mu­ni­ka­tu Kon­tekst: 0, war­tość: 2, a na­stęp­nie na­stą­pi przy­pi­sa­nie no­wej fun­kcji num_back=function(c, v){if(c==0 && v==2) this.VG._del()}. Ta fun­kcja spraw­dza, czy w kon­tek­ście 0, jest błąd 2 (któ­ry ozna­cza, że ga­le­ria jest za­ła­do­wa­na) i je­śli tak, to wy­ko­nu­je fun­kcję _del(), któ­ra usu­wa za­ła­do­wa­ną ga­le­rię. Od tej chwi­li mo­żesz kli­kać od­noś­nik do ko­du 5 i on bę­dzie nap­rze­mien­nie ła­do­wał ga­le­rię i ją usu­wał.

Po­nad­to obiekt pa­rent po pra­wid­ło­wym za­i­ni­cja­li­zo­wa­niu ga­le­rii prze­cho­wu­je wskaź­nik na obiekt VG. Moż­na więc wy­ko­nać ta­ki kod:

(6)^
function del(){
if(document.​getElementById('gal_0').​VG){
document.​getElementById('gal_0').​VG._del();
}
};

aby od­piąć ga­le­rię od obiek­tu pa­rent. Ta fun­kcjo­nal­ność przyda się nam do dal­szych te­stów i przed każ­dym ko­lej­nym wy­ko­na­niem ko­du uru­cha­mia­ją­ce­go ga­le­rię, fun­kcja _del() bę­dzie wy­ko­ny­wa­na.

Zo­ba­czmy te­raz jak wykorzystać kontekst 1. Spój­rzmy na ten kod:

(7)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==1){
alert(v);
}
};

Klik­nij (7), aby wy­ko­nać po­wyż­szy kod. Po uru­cho­mie­niu ga­le­rii wi­dzi­my po­ja­wia­ją­ce się ko­mu­ni­ka­ty z nu­me­rem ko­lej­nych slaj­dów. Mo­że­my więc kon­tekst nr 1 wy­ko­rzy­stać do zmia­ny za­war­to­ści stro­ny w za­leż­no­ści od te­go, któ­ry slajd jest wy­bra­ny. Do­daj­my ko­lej­ne­go div-a:

zde­fi­nio­wa­ne­go ta­kim ko­dem:

(8)^<div style="border:1px solid #AAAAAA; width:100%; height:50px">
<div id="txt_0" style="width:100%; height:100%; transition:opacity 0.5s"></div>
</div>

i przygotujmy taki kod:

(9)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==1){
document.​getElementById('txt_0').​innerHTML='Opis slajdu nr: '+v;
}
};

Klik­nij (9), aby wy­ko­nać po­wyż­szy kod. Pod­su­mo­wu­jąc – kon­tekst nr 1 zwra­ca po­przez fun­kcję num_back nu­mer ak­tual­nie wy­świet­la­ne­go slaj­du. War­tość -1 po­ja­wia­jąca się mię­dzy ko­lej­ny­mi slaj­da­mi ozna­cza, że roz­po­czę­ła się zmia­na slaj­dów. War­tość tę można wy­ko­rzy­stać do ob­słu­gi płyn­nej zmia­ny opisów, jak to po­ka­za­no w po­niż­szym przy­kła­dzie:

(10)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==1){
if(v==-1){
document.​getElementById('txt_0').​style.opacity=0;
}else{
document.​getElementById('txt_0').​style.opacity=1;
document.​getElementById('txt_0').​innerHTML='Opis slajdu nr: '+v;
}
}
};

Kon­tekst nr 2 in­for­mu­je nas o ak­cjach użyt­ko­wni­ka zgo­dnie z tym ze­sta­wie­niem. Spraw­dźmy to na po­niż­szym przy­kła­dzie:

(11)^
(new VG_start(document.​getElementById('gal_0'), 'atlas_0.js')).num_back=
function(c, v){
if(c==2){
if(v==0){
alert('Użytkownik kliknął Stop.');
}else if(v==1){
alert('Użytkownik kliknął Start.');
}else if(v==12){
return confirm('Użytkownik kliknął slajd nr: '+this.VG._getSelected()+'. Odpowiedź Tak (Ok) oznacza, że obsłużyłeś tę funkcję samodzielnie i akcja domyślna nie zostanie wykonana.');
}else{
alert('Użytkownik wykonał akcję nr: '+v);
}
}
};

Klik­nij (11), aby wy­ko­nać po­wyż­szy kod, a na­stęp­nie za­trzy­maj po­kaz slaj­dów. Od­po­wie­dni ko­mu­ni­kat po­in­for­mu­je Cię o ak­cji, któ­rą wy­ko­na­łeś. Klik­nij w slajd w ga­le­rii. Zwra­ca­ny kod ma war­tość 12. Fun­kcja _getSelect() zwra­ca nu­mer ak­tu­al­nie wy­bra­ne­go slaj­du. Jeś­li w od­po­wie­dzi na ten kod zwró­cisz true (czy­li w na­szym przy­kła­dzie wy­bie­rzesz od­po­wiedź Ok), to ga­le­ria uzna, że obsłu­ży­łeś to zda­rze­nie samo­dziel­nie i do­myśl­na ak­cja nie zo­sta­nie wy­ko­na­na. W ten spo­sób mo­żesz w zupeł­nie do­wol­ny spo­sób ob­słu­żyć klik­nię­cie w slajd.

Pod­su­mo­wu­jąc – kon­tekst nr 2 po­przez fun­kcję num_back zwra­ca kod wy­ko­na­nej ak­cji. Nie­któ­re ak­cje mo­gą zwra­cać kil­ka ko­dów. Je­śli np. wy­bra­na jest op­cja za­trzy­ma­nia po­ka­zu slaj­dów po wy­bra­niu in­ne­go slaj­du i klik­niesz strzał­kę w pra­wo, to otrzy­masz ko­dy: wy­bra­no fun­kcję stop i wy­bra­no na­stęp­ny slajd. Nie­któ­re ak­cje mo­gą spraw­dzać war­tość zwra­ca­ną przez fun­kcję num_back i w zależ­no­ści od tej warto­ści wy­ko­ny­wać (lub nie) akcję do­myś­lną.

Wy­ko­rzy­stu­jąc fun­kcję num_back mo­że­my w peł­ni zin­te­gro­wać ga­le­rię ze swo­ją stro­ną i je­dy­nie od Two­jej in­wen­cji za­le­ży jak wy­ko­rzy­stasz te moż­li­wo­ści. Ze strony Do po­bra­nia mo­żesz po­brać dwa przy­kła­dy ga­le­rii (Owo­ce i Obie­kty) wy­ko­rzy­stu­ją­cych omó­wio­ne wy­żej rozwią­za­nia. Fun­kcja _waitForSlide zo­sta­ła wy­ko­rzy­sta­na w tym przy­kła­dzie. Otwórz go i zo­bacz kod źró­dło­wy tej stro­ny.

2. Parametr parent   ^

Jak już wspo­mnie­liś­my, pier­wszym pa­ra­me­trem fun­kcji VG_start() jest obiekt pa­rent, do któ­re­go jest przy­pi­na­na ga­le­ria. W naj­pro­stszym roz­wią­za­niu, obiek­tem tym jest zwyk­ły div. Je­śli wy­ko­nasz kod (4), ale przez po­mył­kę na stro­nie nie bę­dzie obiek­tu o iden­ty­fi­ka­to­rze gal_0, to fun­kcja num_back zwró­ci kod 8 w kon­tek­ście 0 i oczy­wi­ście ga­le­ria nie zo­sta­nie uru­cho­mio­na (przy­kład).

Po­nie­waż ga­le­ria jest w peł­ni re­spon­sy­wna i przy­jmu­je zaw­sze wy­mia­ry obiek­tu wska­za­ne­go ja­ko pa­rent, czę­stą po­trze­bą jest ta­kie je­go zde­fi­nio­wa­nie, aby przy zmia­nie wy­mia­rów za­cho­wy­wał się jak zdję­cie, tzn. że­by zmie­nia­jąc sze­ro­kość – wy­so­kość zmie­nia­ła się au­to­ma­tycz­nie za­cho­wu­jąc pro­por­cje. Mo­że­my to zro­bić w na­stę­pu­ją­cy spo­sób:

(12)^<div style="position:relative; line-height:0">
<img alt="" style="width:100%"
src="data:image/jpeg;
base64,/9j/4AAQSkZJRgABA
QEASABIAAD//gATQ3JlYXRl
ZCB3aXRoIEdJTVD/2wBDAP
/////////////////////////////////
/////////////////////////////////
/////////////////////2wBDAf//
/////////////////////////////////
/////////////////////////////////
/////////////////wAARCAAjA
GQDASIAAhEBAxEB/8QAF
QABAQAAAAAAAAAAAAAA
AAAAAAP/xAAUEAEAAAAA
AAAAAAAAAAAAAAAA/8QA
FAEBAAAAAAAAAAAAAAAA
AAAAAP/EABQRAQAAAAAA
AAAAAAAAAAAAAAD/2gAM
AwEAAhEDEQA/AJgAAAAA
AAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAA/9k=">
<div id="gal_img" style="position:absolute; top:0; width:100%; height:100%"></div>
</div>

W tym przy­kła­dzie ga­le­rię do­pnie­my do div-a o id rów­nym gal_img. Ten div jest z ko­lei do­pię­ty do div-a nad­rzę­dne­go, któ­ry ma ró­wnież przy­pię­te zdję­cie o pro­por­cjach 100:35. Ca­łość dzia­ła tak, że przy zmia­nach wy­mia­rów ok­na przeg­lą­dar­ki zdję­cie się przes­ka­lo­wu­je pro­por­cjo­nal­nie trzy­ma­jąc współ­czyn­nik pro­por­cji 100:35, div nad­rzę­dny ota­cza zdję­cie, a div z id="gal_img" do­pa­so­wu­je się do div-a ota­cza­ją­ce­go zdję­cie. W kon­sek­wen­cji ga­le­ria trzy­ma pro­por­cje 100:35 przy zmia­nach wy­mia­rów ok­na przeg­lą­dar­ki. Oczy­wi­ście zmie­nia­jąc wy­mia­ry pod­pię­te­go zdję­cia mo­że­my usta­lić do­wol­ne pro­por­cje div-a trzy­ma­ją­ce­go ga­le­rię.

(13)^
new VG_start(document.​getElementById('gal_img'), 'atlas_0.js');

Klik­nij kod (13), aby uru­cho­mić ten przy­kład, a na­stęp­nie zmie­niaj wy­mia­ry ok­na i za­ob­ser­wuj za­cho­wa­nie ga­le­rii.

3. Parametr config   ^

Parametr config jest pli­kiem kon­fi­gu­ru­ją­cym ga­le­rię. Szcze­gó­ło­wy opis bu­do­wy i pa­ra­me­trów za­war­tych w tym pli­ku znaj­du­je się na stro­nie Plik kon­fi­gu­ra­cyj­ny.

4. Parametr lang   ^

Pa­ra­metr lang usta­la ję­zyk in­ter­fej­su ga­le­rii. W tej chwi­li do­stęp­ne są dwa ję­zy­ki:

0 –	język polski,
1 –	język angielski.

(14)^
new VG_start(document.​getElementById('gal_0'), 'atlas_0.js', 1);

Kliknij kod (14), aby uru­cho­mić ga­le­rię z angiel­skim ję­zy­kiem in­ter­fej­su.

5. Parametr sld_num   ^

Pa­ra­metr sld_num usta­la, od któ­re­go slaj­du roz­po­cznie się pre­zen­ta­cja. Je­śli pa­ra­metr nie zo­sta­nie wy­szcze­gól­nio­ny, to pre­zen­ta­cja roz­po­cznie się od slaj­du pier­wsze­go (czy­li o nu­me­rze 0), je­śli sld_num bę­dzie li­czbą więk­szą od ze­ra, to pre­zen­ta­cja roz­po­cznie się od slaj­du o tym nu­me­rze, je­śli na­to­miast sld_num bę­dzie rów­ne -1, to pre­zen­ta­cja roz­po­cznie się od lo­so­wo wy­bra­ne­go slaj­du.

(15)^
new VG_start(document.​getElementById('gal_0'), 'atlas_0.js', 0, -1);

Kli­kaj w kod (15) i zwróć uwa­gę, że za każ­dym ra­zem pre­zen­ta­cja roz­po­czy­na się od lo­so­wo wy­bra­ne­go slaj­du.

6. Parametr cfg_back   ^

Pa­ra­metr cfg_back jest fun­kcją wy­wo­ły­wa­ną zwrot­nie bez­po­śre­dnio po za­ła­do­wa­niu pli­ku con­fig. Fun­kcja cfg_back przy­jmu­je je­den pa­ra­metr i jest nim fun­kcja za­pi­sa­na w pli­ku kon­fi­gu­ra­cyj­nym. Dzię­ki tej fun­kcji mo­że­my zmie­niać dy­na­micz­nie wszyst­kie pa­ra­me­try kon­fi­gu­ra­cyj­ne. Spój­rzmy na kod (16):

(16)^
function cfg_back1(config){
config.my_trans_type=1;
config.my_show_animate=0;
config.my_show_time=1000;
}

function cfg_back2(config){
config.my_trans_type=2;
config.my_show_animate=0;
config.my_show_time=1000;
}

Wi­dzi­my w nim dwie fun­kcje cfg_back.

W je­dnej z nich ma­my usta­wio­ny spo­sób zmia­ny slaj­dów na Prze­su­wa­nie, a w dru­giej na Na­jazd/Od­jazd. W obu wy­łą­czy­liś­my też ani­ma­cję i skró­ci­liś­my czas wy­świet­la­nia po­je­dyn­cze­go slaj­du do 1 se­kun­dy. W ten spo­sób z je­dne­go pli­ku kon­fi­gu­ra­cyj­ne­go mo­że­my uru­cha­miać róż­ne ga­le­rie róż­nią­ce się nie­któ­ry­mi pa­ra­me­tra­mi.

(17)^
new VG_start(document.​getElementById('gal_0'), 'atlas_0.js', 0, -1, cfg_back1);

(18)^
new VG_start(document.​getElementById('gal_0'), 'atlas_0.js', 0, -1, cfg_back2);

Klik­nij kod (17), a po­tem (18) i zwróć uwa­gę na róż­ni­ce.

7. Pa­ra­metr vg_data_name   ^

Wszyst­kie pli­ki po­trzeb­ne do pra­cy ga­le­rii (np. plik vg_fs.js, od­po­wie­dzial­ny za ob­słu­gę pra­cy ga­le­rii na peł­nym ekra­nie, plik vg.css za­wie­ra­ją­cy sty­le css ob­słu­gu­ją­ce ga­le­rię, itd.) są prze­cho­wy­wa­ne do­myśl­nie w ka­ta­lo­gu o naz­wie vg_data.

Gdy­by je­dnak użyt­ko­wnik z ja­kichś po­wo­dów chciał umie­ścić wspo­mnia­ne wcześ­niej pli­ki w in­nym ka­ta­lo­gu (np. chciał­by uru­cha­miać na je­dnym ser­we­rze kil­ka ga­le­rii z zu­peł­nie in­ny­mi sty­la­mi), to mo­że uru­cha­mia­jąc ga­le­rię w tym pa­ra­me­trze po­dać naz­wę ka­ta­lo­gu, z któ­re­go ga­le­ria za­ła­du­je te pli­ki.

Po­nie­waż jest to naz­wa ka­ta­lo­gu, więc teo­re­tycz­nie moż­na tu po­dać kom­plet­ną ścież­kę (tzn. naz­wę za­wie­ra­ją­cą zna­ki /). Je­dnak nie jest to za­le­ca­ny spo­sób pra­cy. Aby zmie­nić ca­ły ka­ta­log, z któ­re­go ga­le­ria po­bie­ra wszyst­kie da­ne moż­na wy­szcze­gól­nić go w pa­ra­me­trze di­re­cto­ry.

8. Pa­ra­metr is_root   ^

Pa­ra­metr is_root jest do­myśl­nie usta­wio­ny na 1 i ta­kie usta­wie­nie po­wo­du­je, że każ­da ścież­ka uży­wa­na przez ga­le­rię jest po­prze­dza­na zna­kiem / w kon­se­kwen­cji cze­go, ścież­ki są wy­szu­ki­wa­ne wzglę­dem ka­ta­lo­gu do­mo­we­go ser­wi­su.

Przy­go­tuj­my ta­ki kod:

(19)^
(new VG_start(document.​getElementById('gal_0'), 'atas_0.js',
0, 0, null, null, 1)).txt_back=function(e){
alert(e)
});

W tym przy­kła­dzie ko­lej­ne pa­ra­me­try ozna­cza­ją:

• document.getElementById('gal_0') – ro­dzi­ca ga­le­rii,
• atas_0.js – plik kon­fi­gu­ra­cyj­ny ga­le­rii, któ­ry zo­stał ce­lo­wo wpi­sa­ny z błę­dem (atas.js za­miast at­las.js),
• 0 – pol­ski ję­zyk in­ter­fej­su,
• 0 – pier­wszym slaj­dem ma być slajd nr 0,
• null – brak fun­kcji wy­wo­ły­wa­nej zwrot­nie,
• null – do­myśl­na naz­wa ka­ta­lo­gu z da­ny­mi (vg_data),
• 1 – pa­ra­metr is_root usta­wio­ny na 1.

Uru­chom kod (19). Po­nie­waż w ga­le­rii jest błąd, fun­kcja txt_back wy­świet­li ko­mu­ni­kat, w któ­rym zo­ba­czy­my, że plik https://vg.3n.com.pl/atas_0.js nie zo­stał od­na­le­zio­ny. Plik ten był szu­ka­ny w ka­ta­lo­gu głó­wnym ser­wi­su.

Te­raz uru­chom po­niż­szy kod (20).

(20)^
(new VG_start(document.​getElementById('gal_0'), 'atas_0.js',
0, 0, null, null, 0)).txt_back=function(e){
alert(e)
});

W tym ko­dzie pa­ra­metr is_root jest usta­wio­ny na 0. W tym wy­pad­ku ga­le­ria ró­wnież nie znaj­dzie pli­ku atas.js, ale w ko­mu­ni­ka­cie zo­ba­czy­my in­for­ma­cję o bra­ku pli­ku https://vg.3n.com.pl/to­pic/vg/star­ting-the-gal­le­ry/atas_0.js, co ozna­cza, że plik był szu­ka­ny wzglę­dem tej ścież­ki, któ­ra jest w ad­re­sie url. Ma to szcze­gól­ne zna­cze­nia, gdy nasz ser­wis ob­słu­gu­je tzw. „przy­jaz­ne lin­ki”. Wte­dy rze­czy­wi­sta ścież­ka, w któ­rej wy­ko­nu­je się skrypt jest za­zwy­czaj in­na niż ta, któ­ra jest po­da­na w ad­re­sie. I w tej sy­tua­cji pa­ra­metr root=1 roz­wią­zu­je ten prob­lem.

9. Pa­ra­metr di­re­cto­ry   ^

Pa­ra­metr di­re­cto­ry po­zwa­la prze­su­nąć wszyst­kie pli­ki zwią­za­ne z ga­le­rią do in­ne­go ka­ta­lo­gu bez ko­nie­czno­ści do­ko­ny­wa­nia zmian we­wnątrz tych pli­ków.

(21)^
new VG_start(document.​getElementById('gal_0'), 'atlas.js', 0, 0, null, null, 1, 'vg/atlas/');

Kod (21) uru­cha­mia na­szą stan­dar­do­wą ga­le­rię at­las.js, ale nie z ka­ta­lo­gu głó­wne­go, a z ka­ta­lo­gu 'vg/atlas'.