duminică, 30 ianuarie 2011

Poze cu efect Lightbox automat pe Blogger - blogspot

In primul rand, daca nu stiti ce este efectul Lightbox, dati clic pe imaginea din aceasta postare si veti vedea despre ce este vorba.

Dupa cum stiti, la un blog pozele sunt foarte importante, de aceea v-am prezentat deja cateva efecte 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="http://2.bp.blogspot.com/_i6co2fwMbTo/S4Pn5BtYkfI/AAAAAAAALXI/VYC6RLsmxBw/s1600-h/logo_feed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/S4Pn5BtYkfI/AAAAAAAALXI/VYC6RLsmxBw/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 modul Editati 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.


29 de comentarii:

  1. Buna,
    Si eu am scris despre Lightbox pe blog la mine dar am expicat optiunea cu rel="lightbox". Ideea e ca poate vrei sa pui imagini care sa nu foloseasca aceasta optiune si atunci nu mai adaugi codul cu "rel".
    Merci!

    RăspundețiȘtergere
  2. Stiu ce vrei sa zici, de aceea voi pune aici un link catre postarea ta.
    http://vasiauvi.blogspot.com/2011/01/lightbox-image-viewer-in-blogspot.html

    Bine de stiut este ca versiunile sunt diferite. La tine trebuie incarcata imagine cu imagine, iar la mine pe langa faptul ca foloseste "jquery" (incarcarea este mai lina), preia toate imaginile din postare si le afiseaza sub forma de galerie.

    Fiecare e liber sa aleaga :)

    RăspundețiȘtergere
  3. Multumesc,
    Da, ai dreptate, la tine e mai molcomă încărcare (cum zic ardelenii) :)).

    RăspundețiȘtergere
  4. am incercat si merge.. doar ca parca mareste cam mult pozele.. te mai poti uite peste? merci

    RăspundețiȘtergere
  5. Multumesc! Mi-a placut metoda descrisa. Cred ca voi incerca sa aplic in postarile mele.
    Imi place sa folosesc imagini care vorbesc si cu aceasta metoda cred ca pot sa sporesc efectul lor.

    RăspundețiȘtergere
  6. Multumesc pentru tutorial!
    Am reusit sa il pun in practica, dar iti apar foarte mari pozele. Ce pot face?

    RăspundețiȘtergere
  7. Aceasta problema o am si eu.. nu stiu daca e o rezolvare dar cred ca trebuie micsorate pozele inainte de a le pune pe blog..

    RăspundețiȘtergere
  8. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  9. Da, la fiecare post trebuie. Cel putin eu asa fac pentru ca nu stiu alta varianta.

    RăspundețiȘtergere
  10. AM incercat si nu vrea sa mearga ...?


    https://picasaweb.google.com/113067723029419441812/Mar62011#slideshow/5580943072475699762

    RăspundețiȘtergere
  11. Anda Zelenca si Andreea,
    din pacate nu este alta varianta.

    Nicu,
    pot sa stiu si eu unde ai adaugat codul si ce reprezinta acel link? Sau trebuie sa ghicesc?

    RăspundețiȘtergere
  12. Pur si simplu am incarcat o poza de pe pc meu pe blog.
    Dupa ce am postato pe blog am intrat la editare postari am dat pe clic pe Editaţi HTML, si ce am marcat cu albastru e linkul de la poza postata de pe blogger ,dupa care am pastat aceste 2 coduri de mai jos.

    RăspundețiȘtergere
  13. 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

    La mine cand dau sa caut acest cod nu al gaseste....

    RăspundețiȘtergere
  14. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  15. Scriptul trebuie sa-l pui inainte de </head> sau de </body>
    Ambele coduri sunt in sablonul tau! </body> este chiar la sfarsitul codului sablonului.

    RăspundețiȘtergere
  16. Deci credema ca nu am gasit nimik din ce mi-ai zis...

    am incarcat cu o singura imagine fara ca sa scriu si vriun cometeriu am lasat sa fie numai codul pozei dar nu am gasit absolut nimik....?




    https://picasaweb.google.com/113067723029419441812/Mar7201102#slideshow/5581102664491529346

    RăspundețiȘtergere
  17. Nicu,
    citeste bine articolul. Scriptul trebuie adaugat in codul sablonului. Intra la Design apoi la Editati html si vei gasi codurile unde trebuie sa adaugi scripturile. La codul pozei nu trebuie sa faci decat micile modificari de care spuneam in spuneam in articol (numai daca e nevoie)

    RăspundețiȘtergere
  18. Done! Super dar merge doar la anumite poze din cateva postari mai exact la cele pe care daca pun cursorul imi arata si url-ul. Sunt cateva la care nu se intampla asta si nici efectul nu merge ..desi nu inteleg care e diferenta.. ma depaseste cred :))! poate se mai intampla cuiva pe-aici asta si aflu raspuns. Multumesc!

    RăspundețiȘtergere
  19. Cu respectele de rigoare. Sunt complet depăşit de situaţie. Sau cum ar spune bunica "coplect". Se poate face ceva... ?

    Sunt clueless ...

    P.S. Tutorialele sunt geniale...mintea mea deformată de alcool e problema.

    RăspundețiȘtergere
  20. Se poate implementa si la mine va rog ? Same password. Pentru interventiile dvs. nu o schimb...

    RăspundețiȘtergere
  21. Felicitari pentru post. Intr-adevar, merge si la mine. Dar am o intrebare, a fost pusa si adineaori si nu am reusit sa gasesc un raspuns. Dupa ce dau click pe fotografie, imi deschide lightbox-ul dar ... foarte mare, exista vreo solutie sa modific in cod sa pun lightboxul la o anumita dimensiune ? Sau trebuie modificate marimile fotografiilor inainte de a le posta pe blog ?
    Iti multumesc!

    RăspundețiȘtergere
  22. Daca stii javascript esti liber sa modifici codurile, dar eu cred ca e mai bine sa micsorezi pozele. Ajuta si la incarcarea paginilor.

    RăspundețiȘtergere
  23. Multumesc pentru post! Mi-a fost de folos!

    RăspundețiȘtergere
  24. l-am instalat acum 2 zile si mi-a mers. astazi am modificat fontul textului de pe blog si nu mi-a mai mers efectul. am incercat sa il pun din nou dar nimic. nu stiu ce sa ii mai fac

    RăspundețiȘtergere
  25. Sallz.Bun deci blogu meu e www.pandandabyalexcool12.ro.tl
    Si am instalat aia si merge.Da ideea e ca eu am un buton poze amuzante si vroiam cand dau pe el nu sa ma duca la pagina cu poze amuznate direct sa arate efectu likhbox.Ma ajuti?

    RăspundețiȘtergere
  26. Buna seara Daniel. Am o problema pe care nu stiu cum sa o rezolv. Pt ca sunt pensionara si nu am prea multe cunostinte in domeniu, as vrea sa-ti cer o lamurire. Am un blog culinar pe blogspot si imi dispar imagini din postari. Am incercat sa pun iar poze la postarile din care au disparut si am constatat ca iar dispar imaginile. Oare ce trebuie sa fac sa nu mai am aceste necazuri.

    RăspundețiȘtergere
  27. :) Arata super! Bineinteles ca pozele trebuie micsorate inaite de a le pune pe blog, altfel ies din cadru ;)

    RăspundețiȘtergere
  28. salut. mersi mult pentru informatie:) dar sub fotografie imi apare calea fieacarei fotografii cum sa scap de ea ?

    RăspundețiȘtergere
  29. Va salut...stie cineva de ce dupa citeva zile de la postarea pe blog a pozelor, acestea dispar si apare un semn de interzis . Nu mai sint nici in picassa . Mă dispera chestia asta.

    RăspundețiȘtergere