Lightbox / Photoblog Blogger Template
- Click here for Demo
- Original design by Stop Design, Javascript ported from WordPress to Blogger by Gecko, Javascript by Lokesh Dhakar
- Download the Lightbox / Photoblog Template Code
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.
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.
Step 3: Replace the code in beige in colour with rel=”lightbox”. example below:
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.
Next Part: Sneak Peak – Lightbox / Photoblog Blogger Blogspot Template
 |
Most Related Post:
Wordpress Cloud Tags:
- lightbox blogger
- templates blogspot 2012
- blogger template photoblog
{ 15 comments… read them below or add one }
You know that i just got love for you!!!
:O) Thanks again!
How can i add this javascipt to another one of your other blogger templateS? Im using the Kubrick template, but also want the javascript.
copy and paste the
I do not understand what you mean by that. I feel really lost…
@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
If you have any questions, feel free to post a comment under the “Lightbox in Blogger” entry. Hope I can help…
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!?
this template makes my blog appears so long.
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
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)?
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.
I am using Lightbox 2.0
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.
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.
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 !!
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
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???