blog.marccus.net

Live. Life is Wonderful.





Using Lightbox2 in blogger / blogspot

 

If you have tried to click on the photo(s) in my blog post, you will find out that they have the behavior like:

  • Will be pop up .
  • Background turned dark color.
  • The photos will then be emphasized in clear contrast for better viewing.
  • There have the nagivation for next/previous photo, with closed button.
  • The photos will resized corresponding with its own actual size, etc etc.

All of these features appeared is because I have installed the plugin Lightbox2 in wordpress.

I personally feel it is amazing, and would like to share how it work with Blogger / Blogspot.

First, Edit the template

Add these code before the header < /head > tag.

<link href=’http://www.marccus.net/lightbox2/css/lightbox.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

<script src=’http://www.marccus.net/lightbox2/js/prototype.js’ type=’text/javascript’/>

<script src=’http://www.marccus.net/lightbox2/js/scriptaculous.js?load=effects,builder’ type=’text/javascript’/>

<script src=’http://www.marccus.net/lightbox2/js/lightbox.js’ type=’text/javascript’/>

Second, Upload the images and add “rel” attribute.

Now, when you have uploaded the photos while updating blog post, go to the Edit HTML mode and add rel=”lightbox” inside your < a href = “…. > hyperlink code. Each photo yea~~~

And if you have more than one picture, you need add a group name rel=”lightbox[group1]”.

So your code will be looks like this


Last, then, done, Publish your blog post.

Once done, you may publish your blog and test your photos. =)


 




written by marccus.   category: Tech Tips.   Total 2,995 views    

 



Thanks for your reply!
谢谢你的留言

3
Comment section

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
YaBoySLMarccusTianChad Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
Marccus
Guest
Marccus

hehe, how is the code looks like after you paste it in?

TianChad
Guest

Trying to do that but encounter this error when try to add code to tem[plate ;p
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.”

YaBoySL
Guest
YaBoySL

I got that too, I just switched out all the ( ‘ ) with ( ” ).. Seems confusing? Yeah just copy and paste this:



3
Comment section

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
Marccus
Guest
Marccus

hehe, how is the code looks like after you paste it in?

TianChad
Guest

Trying to do that but encounter this error when try to add code to tem[plate ;p
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.”

YaBoySL
Guest
YaBoySL

I got that too, I just switched out all the ( ‘ ) with ( ” ).. Seems confusing? Yeah just copy and paste this:





Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest