ColorBox extension for blogengine.net

by Kai 28. April 2011 09:13

Hi2all!
Today I want to share with you nice lightbox-like javascript plugin named "Colorbox" for BlogEngigne.NET. I found that is very simple to write extensions for BlogEngigne and first of all I created my lightbox clone :).
Colorbox popular extension, that can be fully customizable and support many settings. This is a very simple extension, because this is my first extension for BlogEngigne. How to install it: simply copy
files to corresponding locations in your BlogEngine site. File \User controls\ColorBox\js\starter.js used to activate ColorBox in a page. If have knwoledges in JavaScript you can modify
default behavior. You can use many of out of the box settings that ColorBox ships with.
Here is an example how to use it:

<a class="colorbox" href="/image.axd?picture=2011%2f4%2fimg1.jpg">
<img src="/image.axd?picture=2011%2f4%2fimg1_thum.jpg" alt="" /></a>

where href is a path to full-sized image, and image html tag inside a tag is thumnbail image. Additional reference and documentation you can find here.

Two things that I should mentioned:
1. If you want to see overlay around you image, out must make some changes in html and css. By default, in masterpage of BlogEngigne body have fixed width, thats why all lightbox-like plugins are not displayed correctly.I cut styles from body and insert their in div #container, that play role of body. And now overlay displayed correctly.
2. You may encounter with javascript errors in IE7 or 8. This case that ColorBox (and some other plugins) conflicts with AlexGorbatchev SyntaxHighlighter when you use jQuery version 1.4+. I like Alex's highlighter
and have to use jQuery 1.3.2 and all work well.
Be aware about this and feel free to ask any question. 

My plugin you can download here (21.02 kb).

Tags: , ,

blogengine.net | Extensions