Ajmo malo kao programirat.
Problem je slijedeći. Imamo nekakvu galeriju sliku na stranici. Standardno: prikazani su thumbovi, a klikom na njih otvara se prozor veličine slike u kojem se ista, veća, nalazi. Idemo redom.
Klasično se to rješava nekako ovako (prve tri su poznate cure):
<a href="7of9.jpeg" ><img src="7of9.gif"></a>
<a href="dr_aki.jpeg" ><img src="dr_aki.gif"></a>
<a href="lara_croft.jpeg" ><img src="lara_croft.gif"></a>
<a href="konobarica.jpeg" ><img src="konobarica.gif"></a>
...
Ovo je školski primjer prikazivanja slika kako se radilo prije cca 20 godina. U međuvremenu je napravljeno nešto lijepo što se zove Javascript koji svugdje funkcionira drugačije (dakle, nešto ružno), ali u nedostatku nečeg boljeg mora se koristiti. Dodajemo još jedno pivo u plan za navečer te napravimo neku funkciju za otvaranje prozora koja kako-tako funkcionira u svim browserima:
function openwin(f, w, h)
{
w += 40 // dolje pokvareni browseri!!
h += 40
var l = Math.round(((window.innerWidth ? window.innerWidth : screen.width) - w) / 2)
var t = Math.round(((window.innerHeight ? window.innerHeight : screen.height) - h) / 2)
window.open(f, 'new', 'width=' + w + ',height=' + h + ',top=' + t + ',left=' + l)
}
f (file) je ime datoteke/slike koju otvaramo (e.g. 'konobarica.jpeg')
w (width) je širina prozora
h (height) je visina prozora
Iz priloženog se vidi da širini i visini dodajemo 40 (broj dobijen eksperimentiranjem). To je zbog nekih (neću imenovati) bezobraznih browsera koji uporno stavljaju različite finte na prozor te smanjuju željenu veličinu prostora za naš sadržaj.
Pošto sad imamo funkciju za otvaranje prozora možemo je upotrijebiti (jel' vam se dopada ova zadnja?):
<a onclick="javascript:openwin('7of9.jpeg', 500, 572);return false" href="7of9.jpeg" ><img src="7of9.gif"></a>
<a onclick="javascript:openwin('dr_aki.jpeg', 800, 557);return false" href="dr_aki.jpeg" ><img src="dr_aki.gif"></a>
<a onclick="javascript:openwin('lara_croft.jpeg', 545, 768);return false" href="lara_croft.jpeg" ><img src="lara_croft.gif"></a>
<a onclick="javascript:openwin('konobarica.jpeg', 616, 754);return false" href="konobarica.jpeg" ><img src="konobarica.gif"></a>
...
I ovo je super, sve funkcionira, ali imamo salatu od koda i ružno je za pogledati, kamoli za promijeniti.
(Note: zašto ostavljamo originalne href= i target= ? Pa da se korisnici koji nemaju Javascript uključen nebi bunili kako "stranica ne radi". A "return false" je tu da se nama Pravim Surferima koji to imamo ne bi otvaralo na 2 mjesta.)
Probajmo to malo smanjit. Dodajemo "return false" na kraj openwin() funkcije:
function openwin(f, w, h)
{
w += 40 // dolje pokvareni browseri!!
h += 40
var l = Math.round(((window.innerWidth ? window.innerWidth : screen.width) - w) / 2)
var t = Math.round(((window.innerHeight ? window.innerHeight : screen.height) - h) / 2)
window.open(f, 'new', 'width=' + w + ',height=' + h + ',top=' + t + ',left=' + l)
return false
}
I sad pozivamo naše slike ovako (meni je ova zadnja zakon):
<a onclick="javascript:return openwin('7of9.jpeg', 500, 572)" href="7of9.jpeg" ><img src="7of9.gif"></a>
<a onclick="javascript:return openwin('dr_aki.jpeg', 800, 557)" href="dr_aki.jpeg" ><img src="dr_aki.gif"></a>
<a onclick="javascript:return openwin('lara_croft.jpeg', 545, 768)" href="lara_croft.jpeg" ><img src="lara_croft.gif"></a>
<a onclick="javascript:return openwin('konobarica.jpeg', 616, 754)" href="konobarica.jpeg" ><img src="konobarica.gif"></a>
...
I, naravno, ništa nismo napravili, samo smo uštedjeli par znakova.
Idealno bi bilo da Javascript koda uopće nema u htmlu. Hm. Hm. Pa da! Treba nam nešto da dinamički provrti sve thumbove i pobaca našu openwin() funkciju na prava mjesta. Dakle, nekakva init() funkcija koja će se izvršavati nakon učitavanja htmla, koja će provrtiti sve slike i na njima pobacati openwin().
Jedino je pitanje kako bi ona znala veličine slika (tj. otvorenih prozora)? Moramo joj to nekako dostaviti.
Ha? Pa imamo TITLE atribut! Nekakav TITLE="300x200" nikome ne smeta, a prelaskom miša preko slike vidimo koliko je velika PRIJE nego što je otvorimo.
Inicijalizirajuća funkcija bi išla nekako ovako:
function init()
{
var ar = document.getElementsByTagName('a')
for(i = 0; i < ar.length; i++)
{
if(ar[i].target == '_blank')
{
var pa = ar[i].title.split('x')
if(pa.length == 2)
ar[i].onclick = new Function('openwin(\'' + ar[i].href + '\',' + pa[0] + ',' + pa[1] + ');return false')
}
}
}
Ukratko, uzimamo sve linkove sa stranice. Zatim ih u petlji vrtimo i obrađujemo samo one koji se otvaraju u novom prozoru (TARGET="_blank"). Nakon toga njihov TITLE dijelimo kod znaka 'x'. I sad ako ima točno 2 dijela to je link kojega trebamo obraditi pa mu stavljamo openwin() funkciju s parametrima: ime datoteke uzmemo originalno (href), a za visinu i širinu slike stavljamo ove što smo dobili iz TITLE atributa.
HTML kod sada izgleda malen, malecki, ma milina (e, moram si isprintati ovu zadnju):
<a href="7of9.jpeg" title="500x572" > <img src="7of9.gif"></a>
<a href="dr_aki.jpeg" title="800x557" > <img src="dr_aki.gif"></a>
<a href="lara_croft.jpeg" title="545x768" > <img src="lara_croft.gif"></a>
<a href="konobarica.jpeg" title="616x754" > <img src="konobarica.gif"></a>
...
Na kraju nam preostaje da kažemo browseru da ovaj init izvršava poslije učitavanja, ali ne ovako:
<body onload="javascript:init()">
jer tako se radilo u prošlom stoljeću. Bolje je ovako:
onload=init
unutar Javascript sekcije koja je unutar HEADa.
Voila! Cijelu stvar možete skinuti ovdje a meni platite pivo kad me vidite jer sam išao ovo pisati umjesto da negdje vani uživam u istom.
(Kod je bezvezan, ali skinut ćete dobre slike.)
PS. Ali ova četvrta, čovječe, fakat...
Programiranje
Komentara: 2
RSS feed