Labor omnia vincit improbus!

2 ian. 2011

Lightbox Image Viewer în Blogspot


Acest tutorial nu mai este valabil deoarece in blogurile de pe Blogspot functia de lightbox este disponibila si poate fi activata din meniul Settings -> Showcase images with Lightbox -> Yes.

Ziceam într-un post că e bine să faci experimente, că e bine să încerci unele extensii pentru blog, să intrii puţin în cod si să modifici una sau alta doar dar nu înainte de a-ţi salva în prealabil template-ul sau mai bine chiar să-ţi mai faci un blog de test.

Aş vrea să vă explic mai jos cum puteţi adăuga în blogul vostru Blogspot un plugin prin care puteţi să măriţi o imagine mai mică (thumbnail) atunci când daţi click pe ea. Plugin-ul este luat de pe site-ul Dynamicdrive.com, un site unde puteţi găsi mai multe plugin-uri pentru site-uri în general, nu exclusiv pentru Blogspot sau Wordpress.


Rezultatul tutorialului de mai jos va fi acesta (click pe imagine):



Pentru a putea folosi acest plugin trebuie să utilizăm cinci fişiere externe, trei imagini, un fişier CSS şi un alt fişier JS (JavaScript). Ceea ce am făcut eu a fost să optimizez aceste fişiere şi să le pun pe contul personal de Dropbox (am pus link-ul de referral pentru a câştiga 250MB spaţiu la fiecare nou utilizator ce se înscrie pe acest site - dacă aveţi de gând să vă înscrieţi ), un serviciu care-ţi oferă 2GB de spaţiu gratis şi unde puteţi sicroniza orice fişier pe care-l aveţi.

Deci, să revenim la ce trebuie să facem pentru a utiliza acest plugin. Intraţi în Tabloul de bord a sit-ului draft.blogger.com şi apăsaţi pe Design apoi Editaţi HTML. Daţi un CTRL+F şi căutaţi tag-ul
 </head>  
şi chiar de-asupra acestui tag da-ţi paste la codul de mai jos:
 <link href='http://dl.dropbox.com/u/1518616/Plugins/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>  
 <script src='http://dl.dropbox.com/u/1518616/Plugins/lightbox/lightbox.js' type='text/javascript'/>  
Cum v-am mai spus fişierele de mai sus adică lightbox.css şi lightbox.js au fost optimizate pentru a avea mărimea mai mică deci pentru a putea fi downloadate mai rapid.

Ce mai aveţi de făcut e să aplicaţi tag-ul de mai jos de fiecare dată când puneţi o imagine pe site astfel:
 <a href="http://site.com/imagine.jpg" rel="lightbox" ><img src="http://site.com/imagine_thumb.jpg" /></a>  

Codul obligatoriu e:
 rel="lightbox"  

Cam asta! Sper să reuşiţi să integraţi acest plugin în site-ul vostru!
Dacă nu înţelegeţi ce am scris puteţi citi acest tutorial de pe site-ul original.