Kako dodati ColorBox dodatak na Blogger

Nemanja Todorovski

14 years ago

ColorBox je sjajna alternativa poznatijoj LightBox skripti za prikaz slika na veb sajtu. Kada je Blogger u pitanju možete pronaći nekoliko oblašnjenja kako da dodate LightBox ali isto tako primetićete u komentarima da većini ljudi zapravo ne radi i ako su se vodili upustvom koje je dao autor. Čak možete pronaći nekoliko Blogger tema koje sadrže LightBox ali pogađate ni one nerade. Da nebi gubili vreme na bezbroj izmena u kodu i pretraživanju weba u potrazi za rešenjem možete jednostavnije da stavite odlični ColorBox i rešite problem.

Primer ColorBoxa na delu:

ColorBox ima nekoliko ugrđenih varijacija pa možete izabrati onu koja vam se najviše dopada, primere možete pogledati na zvaničnom web sajtu. Takođe dodao bih da ColorBox odlično radi na svim browserima na kojima sam testirao, tj. na : Google Chrome 5 i 6, FireFox 3, Internet Explorer 6, 7, 8 i 9, Opera 10 i Safari 4 svi na Windows 7.

INSTALACIJA COLORBOXA NA BLOGGER

KORAK 1

Logujte se na Blogger i na ciljnom blogu otvorite stranicu Design > Edit HTML >. Prenego što bilo šta izmenite sačuvajte vašu temu. U kodu pronađite (CTRL + F) oznaku </head> i odmah iznad njege dodajte sledeći kod:

[code language=”html”]<link href=’http://files.oopsea.com/todor/css/colorbox.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://files.oopsea.com/todor/js/jquery.colorbox.js’ type=’text/javascript’/>
<script src=’http://files.oopsea.com/todor/js/jquery.colorbox-min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>[/code]

Kao što sam rekao ColorBox ima nekoliko varijacija koje ste mogli da vidite na zvaničnom web sajtu, u primeru je korištena osnovna pa ukoliko vam se neka druga dopada više od osnovne možete izmeniti putanju CSSa. CSS i JavaScript nalaze se na mom hostingu ali najbolje bi bilo da ih sačuvate i prebacite na vaš ukoliko želite da pravite neke izmene u izgledu.

Ukoliko želite da promenite izgled ColorBoxa promenite putanju:

[code language=”html”]>http://files.oopsea.com/todor/css/colorbox.css</pre>[/code]

Sa nekom od navedenih:

[code language=”html”]http://files.oopsea.com/todor/colorbox/example2/colorbox.css
http://files.oopsea.com/todor/colorbox/example3/colorbox.css
http://files.oopsea.com/todor/colorbox/example4/colorbox.css
http://files.oopsea.com/todor/colorbox/example5/colorbox.css[/code]

KORAK 2

Preostalo je da zadate slikama u postu oznake kako bi se slike koje želite prikazivale poput ovih u primeru. Otvorite uređivač postova bilo za novu stranicu ili edit za neku već objavljenu. Prebacite se na Edit HTML mod pisanja posta i dodajte linku koji otvara zeljenu sliku, oznaku rel=”example1″ imageanchor=”1″. Kod oznake exemple1 možete napraviti promenu u odnosu na varijantu ColorBoxa koju ste naveli u kodu koji ste dodali u prethodnom koraku npr. exemple3.

U ovom formatu:

[code language=”html”]<a href="http://vassajt.com/slika.jpg" imageanchor="1" rel="example1" title="Zlatan Ibrahimovic u Milanu"style="margin-left: 1em; margin-right: 1em;"><img style="padding:3px;border:1px solid #dbdbdb;" alt="Zlatan Ibrahimovic u Milanu" border="0" src="http://vassajt.com/umanjenaslika.jpg" /></a>[/code]

Primer:

[code language=”html”]<a href="http://lh3.ggpht.com/_2ZZRJ0rGbuU/TIPD7UyCZkI/AAAAAAAAAao/DvMSodQxTNg/s800/ibra_1706748c%5B1%5D.jpg" imageanchor="1" rel="example1" title="Zlatan Ibrahimovic u Milanu"style="margin-left: 1em; margin-right: 1em;"><img style="padding:3px;border:1px solid #dbdbdb;" alt="Zlatan Ibrahimovic u Milanu" border="0" src="http://lh3.ggpht.com/_2ZZRJ0rGbuU/TIPD7UyCZkI/AAAAAAAAAao/DvMSodQxTNg/s200/ibra_1706748c%5B1%5D.jpg" /></a>[/code]

Napomena: Opise stilova u primerima su proizvoljni, vi možete koristiti vaše kako bi u prilagodili izgled vašem sajtu.