Dupa cum stiti, la un blog pozele sunt foarte importante, de aceea v-am prezentat deja catevaefecte pentru a le pune in evidenta. A venit acum si randul efectului Lightbox pentru a fi prezentat.
Sunt multe tutoriale pe net despre efectul Lightbox, dar toate implica adaugarea la codul pozei a atributului rel="lightbox". Insa, aceste coduri gasite aici, fac ca acest atribut sa nu mai fie necesar. Scriptul face toata treaba si din fericire functioneaza si pe sabloanele descarcate de pe net dar si pe cele create cu ajutorul designerului de sabloane de la blogger.
Are insa si mici probleme de care trebuie sa tineti cont pentru ca efectul Lightbox sa functioneze la toate pozele.
1. Inainte blogger adauga la link-ul imaginii o cratima si un h, in genul acesta:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85VU6FuO4KU-zUz4zxVozUjrDxNv5aaJ7AiQT_f3JOVkuWKBNcLP0TDlMSqLUgPkdb3S5STuTBOn0hLnSnwtPosimEPZcMz_6Ee2TXpf3QN33AmAxGu3O8CsuRC6IZ4oy9NwYMh2z4YAO/-h/logo_feed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85VU6FuO4KU-zUz4zxVozUjrDxNv5aaJ7AiQT_f3JOVkuWKBNcLP0TDlMSqLUgPkdb3S5STuTBOn0hLnSnwtPosimEPZcMz_6Ee2TXpf3QN33AmAxGu3O8CsuRC6IZ4oy9NwYMh2z4YAO/s320/logo_feed.png" /></a>
Daca observati ca efectul nu functioneaza, atunci pozitionati mouse-ul pe imagine si vedeti daca in url-ul pozei este adaugat -h. Daca este atunci intorceti-va la editorul de text, intrati in modulEditati html si stergeti -h.
2. O alta problema pe care am observato este cu terminatia JPG scrisa cu litere mari. Daca poza voastra are terminatia scrisa astfel, tot ce trebuie sa faceti este sa inlocuiti JPG cu jpg. E posibil ca aceasta problema sa se regaseasca si la pozele cu terminatia png si gif.
Daca mai observati si alte probleme, lasati un comentariu si voi incerca sa gasesc o solutie.
Efectul Lightbox functioneaza si la pozele hostate in alta parte, dar codul pozei trebuie sa arate in felul acesta:
<a href="http://files.myopera.com/nikkoss29/albums/249992/snoop%20doggy%206.jpg"><img src="http://files.myopera.com/nikkoss29/albums/249992/thumbs/snoop%20doggy%206.jpg_thumb.jpg" alt="" /></a>
si nu asa:
<img src="http://files.myopera.com/nikkoss29/albums/249992/thumbs/snoop%20doggy%206.jpg_thumb.jpg" alt="" />
Deci trebuie sa contina neaparat link spre o poza.
Adaugarea scriptului
Tot ce trebuie sa faceti este sa intrati la Design --> Editati html si cu ajutorul combinatiei de taste Ctrl+F sa cautati acest cod: </head>
Odata gasit, adaugati codurile de mai jos inaintea lui. Daca nu merge inainte de </head>, incercati inainte de </body> .
<!--start lightbox script-->
<link href='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js' type='text/javascript'></script>
<!--end lightbox script-->
Salvati si faceti proba efectului Lightbox.
