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. =)


 
0 0 vote
Article Rating




written by marccus.   category: Tech Tips.   Total 3,278 views    

 



Thanks for your reply!
谢谢你的留言

Subscribe
Notify of
guest

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

3 Comments
Inline Feedbacks
View all comments
TianChad
10 years ago

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
YaBoySL
10 years ago
Reply to  TianChad

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

Marccus
Marccus
10 years ago

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



Subscribe
Notify of
guest

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

3 Comments
Inline Feedbacks
View all comments
TianChad
10 years ago

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
YaBoySL
10 years ago
Reply to  TianChad

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

Marccus
Marccus
10 years ago

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





3
0
Would love your thoughts, please comment.x
()
x
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