Lightbox / Photoblog Blogger Template

July 7, 2006 | Filed Under Blogger Templates



photoblog blogger template javascript

Lightbox / Photoblog Blogger Template

p.s. This Blogger Template uses Javascript effect to display the images, please enable javascript console in your browser. Unlike other template, some of the images like gif and Javascript files have to be hosted on GeckoandFly’s server, I don’t know how much bandwidth it is going to consume in the long run but I do hope that the least you guys could do is not to remove the button on the template.

Now the tutorial part, there are some minor modification that you need to do or shall I say coding inorder to have that cool javascript effect. Its very simple, no worries. First you have to install the template, then follow the step by step tutorial below whenever you upload your images.

Step 1: Go to “Edit html” mode instead of “Compose” mode when uploading your images.
lightbox javascript template tutorial

Step 2: After uploading the image, you’ll see the code for the image, select the string of codes that I’ve highlighted in yellow/beige in colour. Add a rel=”lightbox” attribute to the code.
lightbox javascript template tutorial

Step 3: Replace the code in beige in colour with rel=”lightbox”. example below:

javascript code

Don’t push the panic button, only 3 steps and its all about “copy” and “paste”. You have to apply the code for all the images in your blog, yes even for the previous images.

Technorati Tags: , , , ,

Translate to EnglishÜbersetzen Sie zum Deutsch/GermanПереведите к русскому/RussianΜεταφράστε στα ελληνικά/GreekVertaal aan het Nederlands/Dutchترجمة الى العربية/Arabic中文翻译/Chinese Traditional中文翻译/Chinese Simplified한국어에게 번역하십시오/Korean日本語に翻訳しなさい /JapaneseTraduza ao Português/PortugueseTraduca ad Italiano/ItalianTraduisez au Français/FrenchTraduzca al Español/SpanishOversetter til Norsk/Norwegian

Related Articles:




Comments

  1. kca

    on July 7th, 2006
    1

    You know that i just got love for you!!!

    :O) Thanks again!

  2. jon

    on July 23rd, 2006
    2

    How can i add this javascipt to another one of your other blogger templateS? Im using the Kubrick template, but also want the javascript.

  3. admin

    on July 23rd, 2006
    3

    copy and paste the

  4. jon

    on July 24th, 2006
    4

    I do not understand what you mean by that. I feel really lost…

  5. Eric

    on November 8th, 2006
    5

    @jon
    Hey Jon, no worries man… Lightbox 2.0 can be easily integrated into any blogger template, original or Beta. I just implemented it on my own blog:
    http://ericinfrance.blogspot.com
    If you have any questions, feel free to post a comment under the “Lightbox in Blogger” entry. Hope I can help…

  6. Marcelo Abritta

    on December 5th, 2006
    6

    Hy…
    it seems that the template has slowed down the blog loading… it is taking quite a long time to get the page all set… is this normal!?

  7. john

    on December 11th, 2006
    7

    this template makes my blog appears so long.

  8. Eric

    on January 22nd, 2007
    8

    For all of you that are having trouble implementing Lightbox JS 2.0 into your own Blogger templates, I have posted detailed instructions on this web page:
    http://qlink.queensu.ca/~4ejm1/lightbox.html

  9. Craig

    on May 29th, 2007
    9

    In your instructions you said :
    “Next, copy all the files from the newly extracted folder to your host or server.” However, how do I copy these files to http://www.blogspot.com (my blog host site)?

  10. Abhijit

    on June 24th, 2007
    10

    Plz check my blog. I have used lightbox. After clicking on the image, the bigger imager doesn’t appear. Please guide me locating the problem.
    Thanks.

  11. Abhijit

    on June 25th, 2007
    11

    I am using Lightbox 2.0 at http://abhijitsplanet.blogspot.com

    I referred to the detailed instructions stated above.

    When i click on image, the loading gif keeps showing and the larger image never appears.

    Please guide me.
    Thanks.

  12. Fredde Ahlstrom Cooney

    on September 24th, 2007
    12

    It appears that blogger has changes tha paths for images thats uploaded.

    Solution:
    If you have a path like this;

    http://bp2.blogger.com/... /s1600-h/Image.jpg

    remove “-h” in “/s1600-h/” to look like this, /s1600/

    That did the trick for me anyway.

  13. phalkunz’s blog » Blog Archive » Installing Lightbox in Blogger 2

    on December 14th, 2007
    13

    [...] I’ve just installed Lightbox in my blog. Got a tip from Gecko&Fly and also javascript libraries (javascript prototype framework and lightbox libraries) posted on his [...]

  14. Chris B

    on May 2nd, 2008
    14

    Will this still work?
    Can I put this on my blogger blog? I have added lots of scripts before but this lightbox is giving me stress:(

    Thanks for any help !!

Leave a Reply