Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Prikaz slik v stilu
Avtor: NikMan | Objavljeno: dne 12. december 2008, 12:12
  Pokazal vam bom, kako z priloženimi datotekami ustvarimo danes zelo priljubljen prikaz slik na spletnih straneh.
 
 
1
  
 

Kliknite tukaj, da si prenesete arhivirano datoteko z vsemi potrebnimi datotekami in jo odpakirajte v novo poljubno mapo (glej sliko).

Lekcija je napisana za Adobe Dreamweaver, vendar je možno skripto uporabiti v kateremukoli urejevalniku.

Kliknite tukaj, da si ogledate uradno spletno stran skripte, ki jo bomo uporabili.
 
 
2
  
 

Sedaj pa odprite Adobe Dreaweaver novo HTML stran.

Lahko pa odprete tudi že obstoječo spletno stran, vendar se morajo prej odpakirane datoteke nahajati v njej.

Ni težko, vendar boste morali improvizirati.
 
 
3
  
 

Prvo bomo spletno stran shranili v mapo, kjer smo prej razpakirali datoteke.

Kliknite zgoraj na File in izberite Save As...

V oknu z raziskovalcem se premaknite v mapo, kjer ste ustvarili in shranili datoteke (glej sliko)...
 
 
4
  
 

...in spodaj v File name vpišite poljubno ime za novo spletno stran.

Potrdite na gumb Save.
 
 
 
 
 
5
  
 

Ustvarili ste novo spletno stran.
 
 
6
  
 

Kliknite zgoraj na ikono Image (glej sliko).
 
 
7
  
 

V oknu z raziskovalcem določite datoteko slika1_mala.jpg, ki se nahaja v mapi slike (glej sliko) in potrdite na gumb OK.
 
 
8
  
 

Slika se je vstavila. Sedaj ji bomo dodali še povezavo na večjo sliko.

V oknu Properties kliknite pri polju Link na ikonco Browse for File (glej sliko).
 
 
9
  
 

V oknu z raziskovalcem določite datoteko slika1.jpg, ki se nahaja v mapi slike (glej sliko) in potrdite na gumb OK.
 
 
10
  
 

Mala in povezava na veliko je ustvarjena. Moti nas pa moder rob okoli slike, ki predstavlja povezavo.

V polje Border vpišite 0 (glej sliko).
 
 
11
  
 

Sedaj imamo vse pripravljeno za vstavljanje kode. Ne ustrašite se!

Označite sliko, da boste vnaprej imeli označeno kodo za sliko.

Kliknite na gumb Code, da boste videli HTML kodo.
 
 
12
  
 

V kodi se sedaj premaknite za en presledek od slike/slika1.jpg" (glej sliko).
 
 
13
  
 

in dodajte rel="lightbox" title="tekst" (glej sliko).

Vrstica rel="lightbox" omogoča atraktivni prikaz.

Vrstica title="tekst" prikazuje napis tekst, ki pa ga lahko seveda po želji spreminjate.
 
 
14
  
 

Da bo skripta začela delovati, bomo morali na vrhu pod kodo <head> vstaviti nekaj kode (ki se navezuje na prej odpakirane datoteke).

Premaknite se pod kodo <head> (glej sliko)...
 
 
15
  
 

...in vstavite naslednje vrstice:

<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />

Označite kodo, jo kopirajte (CTRL + C) in prilepite (CTRL + V) v kodo.
 
 
16
  
 

Pritisnite tipki CTRL + S, da shranite stran.

Pritisnite tipko F12, da si ogledate spletno stran in nato v njej kliknite na malo sliko...
 
 
17
  
 

...ki pa se vam bom v res atraktivnem stilu prikazala.

V datoteki lightbox.js, ki se nahaja v mapi lightbox, boste našli kodo, kjer se lahko spreminja prikaz slike. Pokukajte malo na forum pa vam pomagamo.
 
 
18
  
 

Sedaj vam bom pokazal, kako lahko brskamo po več slikah naenkrat, ne da bi vsako posebej morali klikati.

Kliknite na gumb Design, da imate pogled na oblikovalski način.
 
 
19
  
 

Vstavite novo sliko na isti način, kot ste prvo, le da bo ta z drugim imenom (glej sliko).

Če boste uporabljali priložene slike, uporabite slika1_mala.jpg kot malo, ki ima povezavo na slika1.jpg.

Drugo sliko označite...
 
 
20
  
 

...se premaknite v kodni način strani (Code).

Potem pa vrstico rel="lightbox" spremenite v rel="lightbox[roadtrip].
 
 
21
  
 

Pritisnite tipki CTRL + S, da shranite stran.

Pritisnite tipko F12, da si ogledate spletno stran in nato v njej kliknite na malo sliko...
 
 
22
  
 

Pritisnite tipki CTRL + S, da shranite stran.

Pritisnite ponovno tipko F12 in si oglejte prikaz slik.

Opazili boste, da sta na levem in desnem delu prikazane slike sedaj še gumba za naprej in nazaj.

Kliknite tukaj, da si ogledate moj primer.
 
 
Komentiraj
  
 
 
 
 
12.12.2008, 19:05
Imam vprašanje, če vstavim dve sliki vse lepo deluje, ko pa na isti način dodam še dve novi sliki, se pravi skupaj štiri, teh zadnjih dveh ne morem prikazati tako kot prve dve.
Za pomoč se Vam že vnaprej zahvaljujem, Roman.
 
 
 
 
12.12.2008, 19:44
Hmmm . Katero verzijo Photoshopa imaš?
 
 
 
 
12.12.2008, 19:54
Lepo te prosim Kaj ima pa verzija photoshopa veze s tem. Si pri drugih dveh dodal enak rel kot pri prvih dveh.

rel="lightbox[roadtrip]"

naprimer.
 
 
 
 
13.12.2008, 9:10
Pozabil narekovaj na koncu, dela.
 
 
 
 
13.12.2008, 22:30
Hvala lepa za to poglavje in material, res! To sem čakal in iskal že dolgo časa!
Hvala hvala!
 
 
 
 
15.12.2008, 21:35
zakon lekcija!!!
 
 
 
 
21.12.2008, 22:50
Če ste skripto uporabili na svoji spletni strani, bom vesel, če je boste tudi predstavili!
 
 
 
 
22.12.2008, 1:37
http://www.servispihal.com

Sicer ni narejena po tej lekciji, ker poznam lightbox že kar en cajt, pa vseeno...
 
 
 
 
25.12.2008, 18:15
a mogoče kdo ve kako bi lahko namesto slike dodal link , da bi napr. youtube video bil v takšnem okvirju . Hvala
 
 
 
 
25.12.2008, 19:17
Je mogoče ja. Vendar s ThickBoxom.

http://jquery.com/demo/thickbox/
 
 
 
 
14.2.2009, 17:03
Bi lahko kdo naredil lekcijo, kjer se uporablja ThickBox?
 
 
 
 
23.2.2009, 1:01
Pozdravljeni...
sem bolj novi v vaših vodah in z velikim zanimanjem prebiram tele strani.Rabim pomoč pri vstavljanju kode za Lightbox v FrontPage-u.Namreč, kako ustvarim povezavo med malo in veliko sliko, tako kot je tule lepo prikazano v Dreamwiverju. Enostavno je tudi z Thumbnaill-om samo, kam potem kodo vmes dat, da bo prikaz slike v Lightbox-u. Hvala za kakršnokoli pomoč ali nasvet.
 
 
 
 
23.2.2009, 9:58
Priporočam, da kodo vstaviš v naslednjo vrstico za <head>
 
 
 
 
23.2.2009, 13:13
Hvala Podtalje,
sem vstavil za <head> tako kot je v navodilih in malo spremenil bližnjice do slik, tako, da sedaj nekako deluje. Kako pa sedaj spremenim napise, da bi bili v slovenščini? NEXT, PREV, CLOSE, ...
LP
 
 
 
 
23.2.2009, 13:41
Ti napisi so narejeni kot slike. Npr. za Naprej se uporablja slika nextlabel.gif

Če preneseš arhivirano datoteko iz lekcije, imaš vse te gumbne že prevedene.
 
 
 
 
23.2.2009, 14:57
OK, sem prenesel in prejšnjo zbrisal iz spletne strani vendar mi sedaj prikazuje kot Thumbnaill (nobene animacije) . Prosim če mi lahko "po domače" razložiš-opišeš postopek, kako naj to stvar uredim od začetka, da bom lahko ponosen na svoje slike. )
Za tvojo potrpežljivost se ti že v naprej zahvaljujem.
 
 
 
 
23.2.2009, 16:18
Verjetno imaš problem s povezavami do vključenih datotek.

Če boš šel natnačno po lekciji, ne vidim razloga, da ne bi delovalo.

Drugače pa, če imaš možnost, objavi kje na Internetu, ker na pamet bo drugače težko odkriti napako.
 
 
 
 
24.2.2009, 10:53
Meni pa ne pokaže tistih napisov spodaj (zapri, naprej, nazaj). Slika se mi samo poveča.
Hvala za vse odgovore.
 
 
 
 
24.2.2009, 11:06
Če se ti slika samo poveča nisi šel po postopku. Najprrej moraš downloadati tisto zadevo, da bo sploh delovalo. Potem pa pojdi po lekciji. Če boš delal samo za eno sliko lightbox ti potem ne bo prikazalo naprej, nazaj ampak samo zapri. Poskusi malo večkrat aleksy, zadeva deluje. Lahko se zgodi, da se kje naredil napako, to se pri vseh novih zadevah zgodi.
 
 
 
 
24.2.2009, 13:07
Potem si pozabil uplodati slike oz. si jih nekam narobe uploadal.
 
 
 
 
24.2.2009, 13:10
Ne, meni se niti "zapri" ne pokaže?
 
 
 
 
24.2.2009, 14:15
Ja sej, ker si pozabil uploadat slike od tega lightboxa.
Ne tvoje slike, ampak slike tega "programa" oz. kako naj ti razložim
 
 
 
 
24.2.2009, 23:46
Hvala podtajl, deluje.Sem pa naletel na drugačen problem.Na eni web strani mi lepo deluje, ko pa kodo prekopiram v drugo web stran mi pa v prewiev napiše error in, da stran ne more odpreti. Ko pa dam publish pa stran lepo odpre in sliko v lightobx-u.Nekaj se koda "stepe" s tisto, ki je že na strani. Pa čeprav skopiram čisto pod <head> mi javi napako.V bistvu stran deluje le pri izdelavi in predogledu strani javi ta error, kar je malo moteče in nisi siguren.....
LP
 
 
 
 
24.2.2009, 23:52
Ja, no če potem, ko jo shraniš v index recimo deluje, potem je ok. Lahko, da kaj zmoti koda pri predogledu in morda ne najde tistih zadev, ki so potrebne. Torej, če ti dela ko shraniš v html je v redu.
 
 
 
 
25.2.2009, 0:18
No ja, prehitro sem rekel, ker namreč res ne deluje.Ko sem stran osvežil je potem napisalo, da strani ne more prikazati, tako kot v predogledu. Ko pa kodo zbrišem iz <head-a> (tiste tri-štiri vrstice) pa spet lepo deluje.Hmm, res nevem, kje se zalomi.Je pa na strani že cel kup stvari, kar verjetno ne moti, nde? (fprolloverstyle, cript "javascript"...in ostala solata).Sem pa to povezavo hotel narediti iz texta v tabeli potem na sliko (hyperlink).LP
 
 
 
 
25.2.2009, 8:51
Če si prekopiral na drugo web stran moraš seveda odstraniti te 4 vrstice, saj jih tista obstoječa spletna stran že ima. Torej, če boš prilepil prikaz v stilu na drugo spletno stran (drug projekt) odstrani tiste 4 vrstice.
 
 
 
 
25.2.2009, 10:19
Ta in podobne kode uporabljajo javascript knjižnico, s pomočjo katere se potem dosežejo razni efekti.

Teh javascript knjižnic je kar nekaj (Prototype, jQuery, mootools, ...), delajo pa praktično isto stvar. Zato v večini primerov uporaba različnih efektov in posledično uporaba dveh takih različnih knjižnic hkrati ne bo delovala.

Drugače pa bi bilo najbolje, če lahko podaš povezavo do te strani, da lahko točno pogledamo, kje je problem.

spremenil: podtalje (25.2.2009 ob 10.20.57)
 
 
 
 
27.2.2009, 22:22
Hvala Podtajle za nasvet. Težava se mi ponavlja. Ko sem kodo skopiral v <head> mi v IE javi, da stran ne more odpreti. Po nekaj poskusih in resetiranjih pa stran odpre in nekaj časa deluje, potem spet ne. Ko pa kodo zbrišem stvar deluje normalno (samo brez lightboxa).
 
 
 
 
28.2.2009, 13:37
Sliši se mi zelo čudno, da nekaj časa deluje, potem pa spet ne.

Bi pa moral videti točno kodo, da bi lahko kaj več pomagal.
 
 
 
 
28.2.2009, 23:56
http://www.rokometniklub-radece.si/index....
je takole OK? Ali je še kakšen drugi način za prikaz oz. pot do kode?Stran trenutno ne deluje.Hvala za asvete in pomoč.
 
 
 
 
1.3.2009, 13:08
Sem uspel doma ponoviti napako, ki se res pojavlja v Internet Explorerju.

Malo sem tudi pogledal po Internetu in kot kaže gre tako pri IE6 kot tudi IE7 za znano težavo, ki naj bi bila odpravljena v IE8 in se pojavi pri javascript manipuliranju z objekti na strani, ko ta še ni do konca izrisana.

Sam sem testiral tako, da sem dal naslednji dve vrstici:

<script type="text/javascript" src="lightbox/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
premaknil čisto na konec strani pred značko </body> in pri meni je težava izginila.
 
 
 
 
1.3.2009, 22:42
Hvala za trud.Se pravi, da potem v tej obliki ne bo delovalo? Imaš kakšen nasvet? Bi moral stran spremenit ali kaj odstranit?
 
 
 
 
1.3.2009, 22:52
Ali si poskusil to, kar sem predlagal?

Samo ti dve vrstici jih namesto zgoraj premakni čisto na koncu strani pred .
Pri meni doma je to pomagalo.

spremenil: podtalje (1.3.2009 ob 22.52.51)
 
 
 
 
1.3.2009, 23:21
Sem zdele probal in stran se lepo odpre, ampak lightbox pa ne deluje.
 
 
 
 
2.3.2009, 0:48
Sem še malo pogledal stran in če sem odkrit, je dobro, da sploh kaj prikaže.

V HTML-ju morajo biti značke postavljene v pravilnem vrstnem redu.
Npr. <td> znački mora slediti tudi </td> značka.

Večina brskalnikov ima vgrajene mehanizme, da kljub tem napakam stran še vedno zna prikazati pravilno.

Na tvoji strani pa je takih napak res veliko
in zato tudi prihaja do napake pri uporabi tega efekta.

S katerim programom pa urejaš to stran?

Bom jutri še malo pogledal kodo, kje točno so napake.
 
 
 
 
3.3.2009, 7:43
OK, hvala ti. Delam v FP 2003.
 
 
 
 
3.3.2009, 8:13
A obstaja kakšen program za "urejanje" HTML kode, da bo prav "pošlihtana" oziroma, da ti pokaže kje je kakšna napaka.
 
 
 
 
3.3.2009, 12:37
Macromedia Dreamweaver ti pokaže večino napak.

spremenil: podtalje (3.3.2009 ob 12.37.51)
 
 
 
 
3.3.2009, 13:33
Kaj pa Adobe Dreamweaver?
 
 
 
 
3.3.2009, 13:39
Aleksy, Macromedia Dreamweaver je dobov program, vendar mu to ne piše v naslovu. Macromedia pa je očitno neka "družina" programov od Adoba.
 
 
 
 
3.3.2009, 17:10
Kako pa zamenjam napis pod sliko kjer sedaj piše "tekst"?
 
 
 
 
3.3.2009, 17:17
V oknu design označi eno od slik (Design okno). Potem klikni na code, označeno boš imel en del kode, nad to kodo pa boš eno vrstico višje zagledal besedo tekst (modra barva).
 
 
 
 
6.3.2009, 8:51
Podtajle, si kaj ugotovil? Prav bi mi prišel kakšen dober iskušen nasvet.
 
 
 
 
15.3.2009, 15:12
mogoče ne paše ravno v to temo ampak mene zanima, kak bi lahko na prvo stran dodal avto slide show( da bi se 6-7 slik menjavale, brez tisttih gumbov za next pa previus)

tukaj sem zasledil primerek:
http://www.srt-ms.si/avtoshow/

če je možno najbolj easy varianto!

hvala lepa
 
 
 
 
15.3.2009, 15:19
http://www.zmaga.com/program_ucenje.php?....
 
 
 
 
7.5.2009, 22:59
Podtajle, kot sem omenil stran deluje, samo lightbox pa ne. Lahko prosim preveriš kodo, kje se ustavi. Hvala ti za pomoč ...

spremenil: podtalje (10.5.2009 ob 09.56.40)
 
 
 
 
8.5.2009, 0:27
Bom bolj natančno pogledal čez vikend, ko bo malo več časa.
 
 
 
 
10.5.2009, 11:41
Sem pogledal in koda je kar velika zmešnjava.

Npr. po <body> imaš naslednjo značko <div>, ki pa sploh ni nikjer zaključena.
Nato imaš značko za tabelo <table>, ki prav tako ni nikjer zaključena z </table>.
Velika večina <p> značk ni nikjer zaključena z </p>.
V kodi se velikokrat pojeavlja </tr></tr>, medtem ko manjka </td>.

Skratka, napak je precej. Vseh napak pa na žalost ne morem odkriti, ker bi za to rabil kopijo celotne strani z vsemi pripadajočimi datotekami, ker samo z ogledom kode strani, ki jo dobim v brskalniku, težko odkrijem kaj več.
 
 
 
 
1.7.2009, 12:27
Ok... Meni tudi ni jasno. Vse nardim kot piše tam, noče pa mi pokazati slike v stilu ampk mi jo odpre na novo stran in na veliko, podobno kot v Googluu... Mogoče malo pomoči...
 
 
 
 
1.7.2009, 12:37
Si 100% naredila vse kot piše?
Ponavadi se pozabi "js" folder uploadat zraven.
Ali pa v head dodati tisto vrstico ali dve, ki sta potrebni.

spremenil: CoreySteel (1.7.2009 ob 12.40.42)
 
 
 
 
1.7.2009, 13:43
Ja to kaj je pisalo, da rabim dodat sm dodala... Pa mi ni jasno zakaj noče pokazat, tko kot bi moral
 
 
 
 
1.7.2009, 14:04
Daš link do strani?
 
 
 
 
1.7.2009, 14:30
Nimam še strani na netu, ker sem začetnik, jo urejam v Dreamweaverju... Lahko pa ti dam slikco evo:
[url=http://www.shrani.si/?i/uf/3xg1aHe9/unti....[img]http://www.shrani.si/t/i/uf/3xg1aHe9/untitled-1.jpg[/img][/url]]
Upam, da kaj pomaga...
 
 
 
 
1.7.2009, 14:38
Se že vidi napaka
Te štiri vrstice moraš dati notri v HEAD.
Ti jih imaš po tisti </head> oznaki
 
 
 
 
1.7.2009, 14:43
Aha razumem... hvala uspelo mi je

-----------
Imam pa še eno vprašanje...
npr. rada bi dala več slik in napisev v eno vrsto, pa me zanima če gre brez tabele... Ker sem sporbavala pa mi noče, če dam ko na novo začnem pisat center mi vse vrže v center tudi tiste, ki so že napisane... Če se da to kako urediti brez tabel?
 
 
 
 
1.7.2009, 14:47
Nisem čisto točno razumel, ampak se da 100%
Malo več povej o tem, mogoče pokaži kak primer.
Uporabljaš css kode?

Tabele so že čist pozabljene drgač Se da vse brez njih nardit. Pravzaprav tabele niso več priporočljive.
 
 
 
 
1.7.2009, 14:59
No vglavnem evo slikco za boljše razumevanje...
Vse do zdaj sem delala po vodičih, ker sem čisti začetnik v tem programu.
Evo: http://www.shrani.si/f/J/DQ/1rX1rfqK/unt....
Vglavnem vidiš da je za napisom malo prostora. No to lahko naredim le en presledek ve pa mi ne gre... Rada bi mela tri napise ali pa slike kot je pod napisom slika v eni vrsti. Pa mi ne uspe. Če pa pišem tle naprej pa hočem dati samo ta text kaj bi ga pol od presledka naprej pisala na sredino pa mi vse vrže. Mogoče sem malo zakomplicirala stvar ampak ne vem kako t naj drugači povem...
Kode CSS uff ne glih, ker se še pr HTML-ju lovim
 
 
 
 
1.7.2009, 16:55
Brez CSS tega ne boš mogla rešiti, razen če boš naredila tabelo, kot si že rekla

Evo tkole približn bi blo to s CSS, če uporabljaš interal CSS.

V head pod "style" daš tole.

<style type="text/css">
#enaslika {
width: 300px;
height: 100px;
}

#enaslika p {
margin-right: 30px;
}

#enaslika img {
float: right;
}
</style>


html pa tak:

<div id="enaslika">
<p>Blagoslov konj Miklavž pri Ormožu</p><img src="tralala.jpg" />
</div>

<div id="enaslika">
<p>Blagoslov konj Miklavž pri Ljubljani</p><img src="hopssa.jpg" />
</div>




Teoretično bi blo še bolj enostavno.
Kjer imaš <p>Besedilo</p> in img dodaš inline style

<p style:"margin-right: 30px;>Blagoslov konj...</p><img src="tralala.jpg" style:"float: right" />

spremenil: CoreySteel (1.7.2009 ob 16.58.26)
 
 
 
 
1.7.2009, 18:06
Hvala bom poskusila pa potem sporočim...
Hvala za to pomoč!!!!
 
 
 
 
3.8.2009, 18:18
Mene pa zanima kako bi lahko naredil na eni strani 2 sklopa slik?

npr. rad bi mel 3 slik skupaj in čez par vrstic 4 slike skupaj, da si mi ne mešajo skupaj vendar to v lightboxu?
 
 
 
 
3.8.2009, 18:46
Saj ti lekcija lepo prikazuje, korak 20.

Ustvariš 3 slike in napišeš

rel="lightbox[grupa1]"


in še 4

rel="lightbox[grupa2]"
 
 
 
 
3.8.2009, 19:16
Hvala kljuka nisem vedu da je to za "groupe" sem mislil, da je ukaz, da jih skupaj prikaže
 
 
 
 
4.8.2009, 16:25
Hvala za tole predstavitev, že preurejam spletno stran. Imam pa problem nampreč ko kliknem na sliko se mala slika premakne za 0.5cm v levo ter desno nato pa se velika slika odpre. Kakšna ideja kako to odpraviti?
 
 
 
 
4.8.2009, 16:41
Pozdravljen na forumu.

Hm ... Verjetno gre za kakšno "napako" v CSS slogu. Lahko prosim prilepiš tisti del kode, kjer se nahaja slika.
 
 
 
 
4.8.2009, 16:51
<p><a href="/images/CEED_7500_18.jpg" rel="lightbox" title="Fondmetal 7500" ><img src="/images/CEED_7500_18mala.jpg" width="100" height="75" hspace="15"></a><a href="/images/5_7500_17.jpg" rel="lightbox" title="Fondmetal 7500"><img src="/images/5_7500_17mala.jpg" width="100" height="57" hspace="15"></a><a href="/images/TIGUAN_7500_18.jpg" rel="lightbox" title="Fondmetal 7500"><img src="/images/TIGUAN_7500_18mala.jpg" width="100" height="70" hspace="15"></a></p>


spremenil: kljuka (4.8.2009 ob 17.19.26)
 
 
 
 
5.8.2009, 10:40
Kakšna ideja?
 
 
 
 
5.8.2009, 13:26
A se da to kje videti online, da točno vidimo, kako to zgleda?
 
 
 
 
5.8.2009, 21:00
Sem dobil povezavo na zasebno sporočilo.

Na strani imaš določen za stil:
a:active {
color: 506C84;
right: 30px;
clip: inherit;
position: relative;
}


Odstrani tisti right: 30px; in bo problem odpravljen.
 
 
 
 
5.8.2009, 21:13
Bomba

Hvala lepa!
 
 
 
 
27.8.2009, 16:57
Ful cajta se že obremenjujem kako naj naredim galerijo bolj privlačno in vsaj malo profesionalno. S to lekcijo mi je uspelo. Hvala Zmaga.com
 
 
 
 
14.9.2009, 11:38
Zdravo!

Ko naredim to lekcijo po tvojih navodilih dela vse normalno. Ko pa hočem to speljati na moji strani, kjr imam sliko občutljivo na prehod kazalca, pa ne gre nikakor. Ne vem, ali ne postavim dodatkov kodam na pravo mesto?
Osnovna slika je /grad zavita-mala/, slika ki se pokaže pri prehodu je/grad-mala/, slika, ki naj bi jo pokazalo v stilu pa je /grad/
Pošiljam kodo in prosim, da mi poveš, kam pripnem te dodatne kode.
Hvala!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm....
<html xmlns="http://www.w3.org/1999/xhtml"&g....
<head>
<title>Online movei store template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: #FFF
background-color: #FFF;
background-color: #FFF;
background-image: url(#FFF);
}
body,td,th {
color: #069;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Fotke/grad-mala.jpg','Fotke/grad 1923-mala_1.jpg','Fotke/viteška_1.jpg','Fotke/kapela-mala_1.jpg','Fotke/park-mala_1.jpg','Fotke/graslov-mala_1.jpg','../zmaga_com_prikaz_slik_v_stilu/slike/grad-mala.jpg')">
3 September, 2009 13:21
<div id="wrapper">
<div id="inner">
<div id="header">
<h1><a href="http://www.freewebsitetemplates.com&.... src="images/header_1.jpg" width="745" height="203" alt="Harry Potter cd" /> <img src="images/logo.gif" width="746" height="63" alt="Online Movie Store" /></h1>
<!-- end nav -->
<a href="http://www.freewebsitetemplates.com&....
</div><!-- end header -->
<dl id="browse">
<dt>KAŽIPOT</dt>
<dd class="first"><a href="index.html">Prva stran</a><a href="kdo smo.html">Kdo smo</a><a href="kje smo.html">Kje nas najdete</a><a href="delovni čas.html">Odpiralni čas in cenik</a><a href="grad.html">Grad Slovenska Bistrica</a><a href="stalne zbirke.html">Stalne in druge zbirke</a><a href="Prireditve/prireditve.html">Prireditve</a><a href="Prireditve/starobistriški.html">Starobistriški večeri</a><a href="Prireditve/praznično mesto.html">Praznično grajsko mesto</a><a href="najemi.html">Najem prostorov in materiala</a><a href="trgovina.html">Trgovina</a><a href="poroke.html">Poroke</a><a href="rojstni dnevi.html">Rojstni dnevi</a><a href="etnološke delavnice.html">Etnološke delavnice</a><a href="ustvarjalne delavnice.html">Ustvarjalne delavnice</a><a href="izdajateljstvo.html">Izdajateljstvo</a><a href="naročite obveščanje.html">Naročite obveščanje </a><a href="mailto:zavod.grad@siol.net">Pošlji E-pošto</a><a href="Fotogalerija/fotogalerija.html">Fotogalerija</a></dd>
</dl>
<br />
GRAD SLOVENSKA BISTRICA<br />
<br />
<table width="546" border="0">
<tr>
<td width="161" align="left" valign="top">GRAD SLOVENSKA BISTRICA</td>
<td width="96" height="96" align="center" valign="top"><a href="Fotogalerija/grad.JPG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('P1','','Fotke/grad-mala.jpg',0)"></a><a href="Fotogalerija/grad.JPG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','Fotke/grad-mala.jpg',1)"></a><a href="Fotogalerija/grad.JPG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('P1','','Fotke/grad-mala.jpg',1)"></a><a href="../slike/grad.JPG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prehod_grad','','../slike/grad-mala.jpg',1)"><img src="../slike/grad zavita-mala.jpg" name="prehod_grad" width="96" height="96" border="0" id="prehod_grad" /></a>
<td width="9">&nbsp;</td>
<td width="96" align="center" valign="middle"><a href="Fotogalerija/grad-čb.JPG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prehod_grad-čb','','Fotke/grad 1923-mala_1.jpg',1)"><img src="Fotke/grad 1923-mala.jpg" name="prehod_grad-čb" width="96" height="96" border="0" id="prehod_grad-čb" /></a></td>
<td width="162" align="left" valign="top">ZGODOVINA GRADU</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">


spremenil: kljuka (14.9.2009 ob 14.10.47)
 
 
 
 
17.3.2010, 17:13
Lepo pozdravljeni.
A je mogoče imel še kdo problem z tem da mu ni prikazalo spodaj na sliki gumba ZAPRI?
Drugače mi vse dela super samo sličice ZAPRI mi ne pokaže.

lp
Srečko
 
 
 
 
17.3.2010, 17:15
Poskusi si še enkrat prenesti mapo z datotekami. Lahko, da manjka slika za zaprtje okna.

Morda pa je napaka na strani. Poskusi še enkrat, pa povej, če ti brskalnik morda javi kakšno napako (v IE-ju se to pokaže v spodnjem levem kotu).
 
 
 
 
17.3.2010, 17:19
Sem poskusil v IE in v firefox. Datoteke sem si tude prenesel vse tako od tod kot z originalne strani. V firefoxu mi sploh nič ne pokaže v IE mi pokaže samo rdeč križ kot da bi manjkala slika. Pa sem parkrat preveril in je slika naložena.
 
 
 
 
17.3.2010, 17:22
tukaj je slika prikaza v IE: http://srecko.radovci.com/lightbox_ie.jp....
Če kliknem na ta križ se sicer zapre, to dela vredu, samo slike mi ne prikaže.

spremenil: Niettt (17.3.2010 ob 17.30.04)
 
 
 
 
17.3.2010, 17:24
tu pa še z FF: http://srecko.radovci.com/lightbox_ff.jp....
 
 
 
 
28.3.2010, 22:42
Sam moram reči, da mi vse lepo deluje in to je prav tisto, kar sem že dolgo iskal.

Me pa nekaj še zanima: ali je mogoče prikaz slike (večje) pozicionirat na sredino monitorja. Zdaj mi odpre čisto pod robom delovne površine brskalnika. To sicer ni noben problem, vendar če se da, da bi mi odpiral na sredini monitorja, oz uporabne površine brskalnika. Uporabljam IE8 in Opero 10.51 in slike velikosti 765x574, za male slike sem spremenil mere, da mi kaže na 160 x 120 pixlov, ker mi tako ustreza v moji spletni strani.

Hvala lepa
 
 
 
 
24.4.2010, 14:51
A kdo ve a je možno na tak način odpret novo spletno stran namesto slike. Probal sem takole:
<p class="style1"><a href="b.html" rel="lightbox" title="Druga spletna stran">Prijava</a></p>

vendar mi stran začne nalagati potem pa se nič ne zgodi.
A bi blo mogoče prikazat na tak način drugo spletno stran?
 
 
 
 
24.4.2010, 15:19
kljuka:
Je mogoče ja. Vendar s ThickBoxom.http://jquery.com/demo/thickbox/
 
 
 
 
19.5.2010, 15:30
Mene pa zanima ali je nujno dati te slike gor, pa potem poleg moje, ali lahko tudi samo moje slike dam gor.

Pa prosim povejte mi, kako se zmanša sliko, ker moja se odpre čez cel ekran... a je na strani kakšna lekcija, kako slike povečati in zmanšati...

Že v naprej se zahvaljujem.

Lep pozdrav!

[Popravljena slovnica! podtalje]

spremenil: podtalje (19.5.2010 ob 21.51.06)
 
 
 
 
19.5.2010, 18:44
Slike iz mape lahko izbrišeš in dodaš svoje. Slike pa lahko pomanjšaš z Adobe Photoshopom. Klikneš zgoraj na Image > Image size, lahko pa si ogledaš, kako več slik naenkrat pomanjšaš: http://www.zmaga.com/program_ucenje.php?.....

Drugače pa obstajajo tudi različni programi, s katerimi pomanjšaš sliko. Malo poglej po spletu, in sigurno boš kaj našel.

spremenil: Dixo (19.5.2010 ob 18.44.39)
 
 
 
 
22.8.2010, 22:03
Se da to uporabit tudi za videe?
 
 
 
 
22.8.2010, 23:04
teri, je kljuka že na prvi strani povedal:


kljuka :
Je mogoče ja. Vendar s ThickBoxom.
http://jquery.com/demo/thickbox/


spremenil: Dixo (22.8.2010 ob 23.06.07)
 
 
 
 
27.8.2011, 12:17
Zdravo, zanima me kako lahko lightbox uporabim v sliki. Da razložim:
Na spletno stran sem naložil večjo sliko z belim ozadjem na katero pa sem pred tem s pomočjo photoshopa dodal majhne slikice.. nato sem v dreamweaver-ju na sliki ustvaril posamezne povezave teh malih slikic z velikimi originali. Dodal sem tudi lightbox kodo ampak ne deluje.
Zanima me če je potrebno v tem primeru dodat še kakšno kodo?

Hvala za pomoč.
Lep pozdrav
 
 
 
 
27.8.2011, 21:15
Dodatna koda ni potrebna.

Zakaj pa ne dela, pa je tako na pamet težko kaj povedati in bi morali videti tvojo kodo. Najbolje, če jo imaš kje na internetu in podaš povezavo.
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com