Lightbox / Photoblog Blogger Template

July 7, 2006 · Filed Under Blogger Templates 
↓ Sponsored Links

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.

Related Posts with Thumbnails
Tags: , , , ,

Related Articles

Similar posts you may be interested in based on past browsing


 

Comments


  1. kca

    July 7th, 2006
    1

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

    :O) Thanks again!


  2. jon

    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

    July 23rd, 2006
    3

    copy and paste the


  4. jon

    July 24th, 2006
    4

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


  5. Eric

    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

    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

    December 11th, 2006
    7

    this template makes my blog appears so long.


  8. Eric

    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

    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

    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

    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

    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

    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

    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 !!


  15. Website Development Philippines

    October 18th, 2008
    15

    Visit my tutorial here : http://www.virtuosomaster.com/tutorials/how-to-setup-lightbox-blogger-template/

    you will need to remove the “-h” ’s as this opens the picture in a new window. It looks like this:

    http://4.bp.blogspot.com/…/s1600-h/127581731l.jpg

    Remove “-h” in “/s1600-h/” to look like this:

    http://4.bp.blogspot.com/…/s1600/127581731l.jpg


  16. Piyush

    March 4th, 2009
    16

    I have used the solution for large image, but it is not working. i just cant ‘h’ in my image link. what should i do???

Leave a Reply