Opi­sy w ga­le­rii

Opi­sy slaj­dów pre­zen­to­wa­nych w ga­le­rii moż­na wy­świet­lać w opar­ciu o dwa roz­wią­za­nia.

1. Roz­wią­za­nie pier­wsze po­le­ga na wy­ko­rzy­sta­niu wbu­do­wa­ne­go w ga­le­rię po­la tek­sto­we­go oraz wy­świet­la­niu w nim opi­sów przy­pi­sa­nych do po­szcze­gól­nych slaj­dów.
2. Roz­wią­za­nie dru­gie po­le­ga na wy­ko­rzy­sta­niu fun­kcji wy­wo­ły­wa­nej zwrot­nie in­for­mu­ją­cej ap­li­ka­cję o nu­me­rze wy­świet­la­ne­go slaj­du. Na pod­sta­wie tej in­for­ma­cji ap­li­ka­cja sto­su­ją­ca ga­le­rię mo­że w do­wol­ny spo­sób, w do­wol­nym miej­scu wy­świet­lić opis pre­zen­to­wa­ne­go slaj­du.

1. Opi­sy wy­świet­la­ne w opar­ciu o wbu­do­wa­ne po­le tek­sto­we   ^

Aby za­po­znać się z tym roz­wią­za­niem przy­go­tuj­my plik images_txt_1.js jak ni­żej (szcze­gó­ło­wy opis bu­do­wy te­go pli­ku znaj­dziesz na stro­nie Li­sta slaj­dów):

(1)function VG_images(){
this.tab=Array(
"ver_pl_1.png | ver_en_1.png;;;Slajd 1<br>​opis polski | Slide 1<br>​English description",
"ver_pl_2.png | ver_en_2.png;;;Slajd 2<br>​opis polski | Slide 2<br>​English description",
"ver_pl_3.png | ver_en_3.png;;;Slajd 3<br>​opis polski | Slide 3<br>​English description"
)
}

Aby uru­cho­mić ten przy­kład przy­go­tu­je­my ró­wnież plik config_txt_1.js, w któ­rym wska­że­my przy­go­to­wa­ny plik images_txt_1.js oraz uak­ty­wni­my po­le tek­sto­we i na­da­my mu ko­lor (#A20016):

(2)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_text_field_height=100;
this.my_text_field_color="#A20016";
}

Po­niż­sze ko­dy uru­cho­mia­ją nasz przy­kład (za­kła­da­my, że ma­my na stro­nie div-a o id='gal') w dwóch wer­sjach ję­zy­ko­wych:

(3)
new VG_start(document.getElementById('gal'), 'config_txt_1.js', 0);

(4)
new VG_start(document.getElementById('gal'), 'config_txt_1.js', 1);

Klik­nij kod (3) i (4). Za­u­waż, że pier­wszy wiersz opi­su jest mniej­szy od dru­gie­go. Jest tak dla­te­go, po­nie­waż do­myśl­nym sty­lem, któ­ry jest sto­so­wa­ny do wy­świet­le­nia opi­su jest styl vg_text, a w do­myśl­nej kon­fi­gu­ra­cji jest on skon­fi­gu­ro­wa­ny na­stę­pu­ją­co:

(5).vg_text{
transition:opacity 0.5s;
opacity:0;
width:100%;
text-align:center;
color:#AAAAAA;
font-size:19px;
font-family:Tahoma;
line-height:26px;
}
.vg_text::first-line{
font-size:15px;
}

Aby zmie­nić styl wy­świet­la­ne­go tek­stu moż­na nad­pi­sać pa­ra­me­try w po­ka­za­nym wy­żej sty­lu lub stwo­rzyć włas­ny. Np.:

(6).my_vg_text{
transition:opacity 0.5s;
opacity:0;
width:100%;
text-align:left;
color:#000000;
font-size:25px;
font-family:Tahoma;
line-height:26px;
}

Styl ten na­le­ży za­pi­sać (do­dać) do pli­ku vg.css znaj­du­ją­ce­go się w ka­ta­lo­gu vg_data, a na­stęp­nie do­dać je­go naz­wę do pli­ku kon­fi­gu­ra­cyj­ne­go:

(7)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_text_field_height=100;
this.my_text_field_color="#A20016";
this.my_text_field_class="my_vg_text";
}

Efekty zo­ba­czysz kli­ka­jąc wer­sję pol­ską lub an­giel­ską ga­le­rii. War­tość this.my_text_field_height=100; po­da­na w pli­ku kon­fi­gu­ra­cyj­nym ozna­cza wy­so­kość po­la tek­sto­we­go w pik­se­lach. Po­le bę­dzie do­da­ne pod ok­nem z ga­le­rią. Wy­so­kość po­la jest sta­ła i nie za­le­ży od wy­so­ko­ści ca­łej ga­le­rii (zaw­sze wy­no­si 100 pik­se­li). Mo­żesz po­dać war­tość mniej­szą od 1. Wte­dy war­tość ta bę­dzie trak­to­wa­na jak pro­cent wy­so­ko­ści ok­na z ga­le­rią, np.:

(8)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_text_field_height=0.2;
this.my_text_field_color="#A20016";
}

ozna­cza, że wy­so­kość po­la tek­sto­we­go bę­dzie wy­no­si­ła 20% wy­so­ko­ści ca­łej ga­le­rii. Klik­nij je­dną z wer­sji: pol­ską lub an­giel­ską i zmie­niaj wiel­kość ok­na przeg­lą­dar­ki. Za­ob­ser­wuj zmia­ny wy­so­ko­ści po­la tek­sto­we­go.

Mo­żesz też po­dać war­tość mniej­szą od 0. Wte­dy po­le tek­sto­we zo­sta­nie na­ło­żo­ne na ok­no z ga­le­rią (np. war­tość -0.8 ozna­cza, że po­le tek­sto­we bę­dzie mia­ło wy­so­kość rów­ną 80% wy­so­ko­ści ok­na z ga­le­rią li­czo­ne od dol­nej kra­wę­dzi, czy­li gór­na kra­wędź na­pi­sów bę­dzie na wy­so­ko­ści 20% ok­na ga­le­rii. W tym roz­wią­za­niu ko­lor tła po­la tek­sto­we­go nie ma zna­cze­nia. Po­le tek­sto­we jest wy­świet­la­ne zaw­sze z prze­źro­czy­stym tłem:

(9)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_text_field_height= -0.8;
}

Prze­te­stuj je­dną (lub obie) wer­sje: pol­ską lub an­giel­ską.

W tym roz­wią­za­niu masz wpływ na ko­lor i wiel­kość po­la tek­sto­we­go po­przez sty­le css. Zde­fi­niuj np. na­stę­pu­ją­cy styl:

(10).my_vg_text_pos{
background-color:rgba(0,200,0,0.5);
padding:20px;
position:relative;
left:100px;
height:80px!important;
width:260px!important;
}

i do­daj go do już usta­lo­ne­go sty­lu:

(11)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_text_field_height= -0.8;
this.my_text_field_class="my_vg_text my_vg_text_pos";
}

a na­stęp­nie zo­bacz efek­ty (wer­sja pol­ska, wer­sja an­giel­ska).

We wszyst­kich do­tych­czas pre­zen­to­wa­nych przy­kła­dach opi­sy slaj­dów znaj­do­wa­ły się w pli­ku ima­ges.js. Mo­żesz je­dnak utwo­rzyć spe­cjal­ny plik z opi­sa­mi wg na­stę­pu­ją­cej skła­dni:

(12)function VG_texts(){
this.texts=new Array(
"Slajd nr 1 <a href=\"https://3n.com.pl\">od­noś­nik w opi­sie</a> | Slide no 1<a href=\"https://3n.com.pl\">link in des­crip­tion</a>",
"Slajd nr 2 | Slide no 2"
);
}

Zwróć uwa­gę, aby po ostat­nim opi­sie nie za­mie­szczać prze­cin­ka. Plik ten na­zwie­my texts_1.js i przy­pnie­my go do na­sze­go pli­ku kon­fi­gu­ra­cyj­ne­go:

(13)function VG_myconfig(){
this.my_file_images="images_txt_1.js";
this.my_file_texts="texts_1.js";
this.my_file_texts_charset="iso-8859-2";
this.my_text_field_height= -0.8;
this.my_text_field_class="my_vg_text my_vg_text_pos";
}

Je­śli plik z opi­sa­mi ma in­ne ko­do­wa­nie pol­skich li­ter niż utf-8, w pli­ku kon­fi­gu­ra­cyj­nym trze­ba do­dać wpis this.my_file_texts_charset="strona kodowa".

Zo­bacz efek­ty (wer­sja pol­ska, wer­sja an­giel­ska).

Opisy zawar­te w pliku texts.js mają wyż­szy prio­ry­tet od opi­sów za­war­tych w pli­ku images.js i je nad­pi­sują.

2. Opi­sy wy­świet­la­ne w opar­ciu o fun­kcję wo­ła­ną zwrot­nie   ^

To roz­wią­za­nie po­le­ga na tym, że pod­czas ak­ty­wo­wa­nia ga­le­rii mo­że­my ja­ko je­den z pa­ra­me­trów prze­ka­zać do ga­le­rii fun­kcję wy­wo­ły­wa­ną zwrot­nie, któ­ra bę­dzie in­for­mo­wa­ła nas o zmia­nie ko­lej­nych slaj­dów. W od­po­wie­dzi na tę in­for­ma­cję mo­że­my w do­wol­ny spo­sób mo­dy­fi­ko­wać treść stro­ny. Kom­plet­ny dzia­ła­ją­cy przy­kład moż­na zna­leźć na stro­nie Uru­cha­mia­nie ga­le­rii (Fun­kcja VG_start) lub w przy­kła­do­wej ga­le­rii Owoce, któ­rej kod mo­żesz po­brać ze str­ony Do po­bra­nia.