Iko­ny w ga­le­rii

Aby za­pe­wnić moż­li­wość swo­bo­dne­go ska­lo­wa­nia ga­le­rii (co jest wa­run­kiem nie­zbę­dnym dla za­pe­wnie­nia jej re­spon­sy­wno­ści oraz pra­cy na urzą­dze­niach mo­bil­nych), wszyst­kie iko­ny ga­le­rii są wy­świet­la­ne w spo­sób wek­to­ro­wy, z wy­ko­rzy­sta­niem spe­cjal­nie do te­go ce­lu przy­go­to­wa­ne­go kro­ju. Krój ten otrzy­mu­jesz w pa­kie­cie i mo­żesz z nie­go swo­bo­dnie ko­rzy­stać, aby np. za­pe­wnić spój­ność sty­li­stycz­ną z in­ny­mi ele­men­ta­mi na stro­nie za­wie­ra­ją­cej ga­le­rię. Po­ni­żej oma­wia­my róż­ne aspek­ty zwią­za­ne z wy­ko­rzy­sta­niem te­go kro­ju na stro­nach in­ter­ne­to­wych.

1. Krój vg_icons i zna­ki za­war­te w tym kro­ju
2. Wy­ko­rzy­sta­nie kro­ju vg_icons w ko­dzie ob­słu­gu­ją­cym ga­le­rię
3. Wy­ko­rzy­sta­nie kro­ju vg_icons na pod­stro­nach nie za­wie­ra­ją­cych ga­le­rii

1. Krój vg_icons i zna­ki za­war­te w tym kro­ju   ^

Krój ob­słu­gu­ją­cy ga­le­rię ma naz­wę dys­ko­wą vg_icons i wy­stę­pu­je z dwo­ma roz­sze­rze­nia­mi, tj.: ja­ko krój woff i eot. Oba kro­je znaj­du­ją się w ka­ta­lo­gu VG_data i za­wie­ra­ją na­stę­pu­ją­ce zna­ki:

2. Wy­ko­rzy­sta­nie kro­ju vg_icons w ko­dzie ob­słu­gu­ją­cym ga­le­rię   ^

Je­śli ga­le­ria jest za­ła­do­wa­na, to do­stęp­ny jest styl o naz­wie vg_icon. W tej sy­tua­cji wy­star­czy na­pi­sać np. tak:

(1)<span style="font-family:vg_icons;">3</span>

aby uzys­kać ta­ki znak: 3.

Za­łóż­my wo­bec te­go, że na stronie jest div o id='gal_1' i że ma­my przy­go­to­wa­ny ta­ki kod (opis dzia­ła­nia fun­kcji num_back znaj­dziesz na stro­nie Uru­cha­mia­nie ga­le­rii):

(2)<script defer src="/vg.js" onload="start_vg()"></script>
<script>
function start_vg(){>
(new VG_start(document.​getElementById('gal_1'), 'atlas.js')).​num_back=function(c, v){
if(c==0 && v==10){
document.​getElementById("id_play1").​VG=this.VG;
document.​getElementById("id_play2").​VG=this.VG;
this.VG.​_setBtnPlay(document.​getElementById("id_play2"));
}
}
}
</script>

Ga­le­ria ta za­ła­du­je się au­to­ma­tycz­nie i bę­dzie wy­glą­da­ła jak ni­żej:

Stwó­rzmy te­raz dwa przy­cis­ki wg po­niż­szych ko­dów:

(3)<span id="id_play1" style="font-family:vg_icons; font-size:30px; cursor:pointer" onclick="this.VG._play()">3</span>
3

(4)<span id="id_play2" style="font-family:vg_icons; font-size:30px; cursor:pointer" onclick="this.VG._play(this)">3</span>
3

Klik­nij przy­cisk stwo­rzo­ny ko­dem (3), a po­tem (4). Użyj spa­cji, aby włą­czać i wy­łą­czać ani­ma­cję w ga­le­rii. Za­ob­ser­wuj zmia­ny przy­cis­ków. Przy­cisk stwo­rzo­ny ko­dem (3) uru­cha­mia i za­trzy­mu­je ga­le­rię, ale nie zmie­nia swo­je­go wy­glą­du. Kod przy­pię­ty do przy­cis­ku (4) ja­ko ar­gu­ment do fun­kcji _play() wy­sy­ła this, dzię­ki cze­mu ga­le­ria mo­że zmie­niać wy­gląd tej iko­ny. Po­nad­to wy­wo­ła­nie fun­kcji _setBtnPlay po­wo­du­je za­pa­mię­ta­nie przez ga­le­rię obiek­tu, któ­ry jest od­po­wie­dzial­ny za ste­ro­wa­nie fun­kcją play, i w tej sy­tua­cji na­wet uży­cie kla­wi­sza spa­cja do uru­cho­mie­nia ga­le­rii po­wo­du­je zmia­nę przy­pi­sa­nej do tej fun­kcji iko­ny.

Tak sa­mo mo­żesz ob­słu­żyć przy­cisk ob­słu­gi dźwię­ku i peł­ne­go ekra­nu (naz­wy od­po­wie­dnich fun­kcji znaj­dziesz na stro­nie Uru­cha­mia­nie ga­le­rii).

3. Wy­ko­rzy­sta­nie kro­ju vg_icons na pod­stro­nach nie za­wie­ra­ją­cych ga­le­rii   ^

Je­śli ga­le­ria nie jest za­ła­do­wa­na na stro­nie, na któ­rej chcie­li­byś­my użyć oma­wia­ne­go tu kro­ju z iko­na­mi, to na­le­ży stwo­rzyć krój o naz­wie vg_icon za po­mo­cą po­niż­sze­go ko­du w do­wol­nym (ale ła­do­wa­nym przez stro­nę) pli­ku css:

(5)@font-face{
font-family: 'vg_icons';
src: url('vg_icons.eot?#iefix') format('embedded-opentype'),
url('vg_icons.woff') format("woff");
}

Od tej chwi­li mo­żesz ko­rzy­stać z te­go kro­ju przez wy­wo­ła­nie go za po­mo­cą sty­lu: font-family:vg_icons.