Lightbox Extension for BlogEngine

Tuesday, 15 January 2008 12:55 by jf26028

I don't like the default behavior of inline images when you insert them via livewriter. It completely navigates the page away from the content, and the visitor has to hit back to get back and then find where they left off, and so on. Fortunately, BlogEngine is flexible enough to allow me to change that, and I decided that the best thing to do would be to create a lightbox extension for BlogEngine to fix the issue.

This is my first stab at creating an extension for BlogEngine, so I tried to keep it as simple as possible, so it does not have some features, such as the loading progress bar, animations, and the grouping of images that are in the more recent implementations of a lightbox script. Then, I found out how amazingly easy it really is to create extensions for BlogEngine, and using the mp3 extension from rtur.net, which I found on the codeplex BlogEngine extension project site, as my base, I had it done in no time. I wish I had just left the more advanced features in. I was going to take the time to redo it with some more advanced features, but while I was testing it on GravityCube, I got a request for the code. So, I am going to release it now, with plans on an upgrade in the near future. Feel free to download the code, but keep in mind, this was my first attempt at an extension. The lightbox script was actually taken from the original lightbox at huddletogether.com, and it has been tested quite a bit, but the release is a bit old.

And, now, some included images for your lightbox pleasure (hopefully, I still have the extension enabled...)

Download: Lightbox 1.0

Let me know if you have any issues with the code,

Jesse Foster | jf26028

Currently rated 4.7 by 15 people

Currently 4.733333/5 Stars.
1
2
3
4
5

Tags:		blogengine, extension
Categories:		BlogEngine.NET \| Extensions
Actions:		E-mail \| del.icio.us \| Permalink \| Comments (36) \| Comment RSS

New BlogEngine Theme - ThemeEngine.NFLBlogEngine Upgrade from 1.3 to 1.4.New BlogEngine Theme - Natural Essence

Comments

January 15. 2008 16:16

Awsome! I can't wait to see what's next.

Adam

January 15. 2008 17:00

Thanks for the code Jesse. I have updated one area of your extension for my site and I thought it might be useful for others. I prefer to keep my add-ons in my theme directory to allow for ease of upgrade to future versions of BlogEngine.NET. Here's the change:

private string GetLightboxRoot()
{
string virtualPath = HttpContext.Current.Request.Path;
string audioRoot = virtualPath.Substring( 0, virtualPath.LastIndexOf( "/" ) + 1 ) + "themes/" + BlogSettings.Instance.Theme + "/" + _lightboxRoot;
return audioRoot;
}

Danny

January 15. 2008 17:08

Well done !!!

Sanghino

January 15. 2008 17:21

Danny,
Thanks for taking the time to check it out. This extension should be universal to all themes, so you shouldn't need to tuck it away.

But, I completely agree with you that a folder structure needs to be setup. I like where the actual code goes, in the extensions folder under app_code, but there really isn't any direction as to where to put the extra stuff that comes along with extensions, like the javascript and images. Sooner or later, you will have a bunch of folders on the root of your blog with various parts of different extensions and it might get difficult to manage, or ugly at the very least.

I do appreciate the feedback, though,

Jesse Foster | jf26028

jf26028

January 15. 2008 18:27

I understand what you mean, and I can appreciate your approach. I actually always update my extensions to keep its resources in my primary theme's directory as I do not change that.

Thanks again for the work on this extension. I should have a social bookmarking extension out tonight so keep an eye out! =]

Danny

January 16. 2008 04:12

Wow is awesome I like it very much,
This is the first custom extension I will install on my blog.

Amr

January 18. 2008 02:29

Pingback from velcrohurts.com

Image script testing?

velcrohurts.com

January 18. 2008 07:40

Uh, should it just work, or do you have to put some markup in your page? Cause it's not just working for me.

Will Sullivan

January 18. 2008 10:42

Will,
It should just work. No additional markup is required. Whats the problem? Is it erroring out on you, or does cause other problems?

Help me help you,

Jesse Foster | jf26028

jf26028

January 18. 2008 13:36

So the zip file is corrupt. Every time I try to download it. Did you happen to move it elsewhere?
Let me know.
thanks,
Mike dopp

mikedopp

January 18. 2008 14:02

Mike,

You can download the file from this post. The link is www.gravitycube.net/.../file.axd

Jesse Foster | jf26028

jf26028

January 18. 2008 19:43

Love it!

Don't know ftw a GravityCube is, but I love it.

Dan

January 19. 2008 10:24

Hi there
I installed it and posted an article and used the admin to do the image upload. I see the image but nothing's working. I have the extension in place the the js file in the root directory. I used Firebug and there's no error showing . Any ideas?

John

January 19. 2008 11:31

Hi there
I can't get this to work either. I get no errors.. I have the extension enabled. When I post an image and upload an image via the editor it just appears and when I post I don't have a link when i roll over the image. Is there something I'm missing?

John

January 19. 2008 12:38

John, and others who may not find this extension working,

This script only works on images that have links around them. For example, the full image syntax for the images on this post is:

<a href="/blog/image.axd?picture=picture.jpg">
<img src="/blog/image.axd?picture=picture.jpg" />
</a>

Its the extra <a> tag around the image that makes the lightbox happen.

The script is intentionally written to not alter any links other than links to images that are linked through the image.axd handler, and the images you are talking about do not have links around them. And, if you use the built in editor in BlogEngine, it does not put the links around them.

I never use the built in editor, I use Live Writer, and it works very well for me, and that is why I never tested the default uploading capabilities.

For now, your embedded images will not utilize the lightbox, but hopefully, I will find the time to update the script and add the anchor tag around images that are just embedded, not linked. In the mean time, you can add your own anchor around the images to get the effect.

Thanks for taking the time to post the issue,

Jesse Foster | jf26028

jf26028

January 21. 2008 03:25

Wow, I got a PingBack and I don't even know what that is
But the plugin works great, no issues with it at all.
I am using the live writer for my updates and it auto detects any image I drag into it.
Thank you jf26028

Stephen McGroarty

January 21. 2008 07:52

Yep, that's probably why it doesn't "just" work for me. I don't use live writer; maybe I'll take a look at it.

Will Sullivan

January 21. 2008 13:05

Hey This rocks now that I know how to use it. Thanks for all the great work.
Mikedopp mikedopp.com / mikedopp.net

mikedopp

January 24. 2008 07:50

Pingback from techtoolblog.com

Daily Find #22 | TechToolBlog

techtoolblog.com

March 30. 2008 19:00

I am getting a file not found error trying to download the code.

Darryn

March 30. 2008 20:26

Darryn,
The first link is broken, but if you scroll down to the bottom of the post, that link is working. Ill fix the first link when I get a minute or two.

Jesse

Jesse Foster

April 18. 2008 17:42

Works great BUT not in "pages". Can you fix that?

Tcip

April 18. 2008 23:23

Hrm..not in pages. Ill take a look and let you know what I find out.

Jesse

Jesse Foster

April 19. 2008 10:48

Thanks i tryed my self but i didn't know witch file add the new post.

*Happy holliday*

Tcip

May 1. 2008 15:04

Hi again!

When you upload a file useing the second upload in the blog. (Upload a file). I upload a image, then i'll get a textlink. And it open it in the same window. It where cool if you could do a upgrade so it can open that image in Lightbox

Tcip

June 29. 2008 16:17

It would be great if someone could integrate this plugin or code it so it automatically uses the lightbox plugin for all images that are inserted in a post (if they are bigger than a specified value)

You could at least update your post with a basic usage guide.

Anyway, great plugin.

roger

June 30. 2008 19:32

Roger,

Thanks for the post. The lightbox extension "just works" if you use windows livewriter to post to your blog and have the images embedded that way. If you want to get it working without using livewriter, there are instructions in the comments of this posting.

Thanks, again,

Jesse

jf26028

August 8. 2008 02:57

Hi,

i try to copy the code [thumb:width=150,link=lightbox] in to the file admin/pages/Pages.aspx.cs so pictures in the side open with lightbox, but it dosen't work

Tcip

September 8. 2008 09:54

Thanks, works great for me.

Craig Hinkel

November 3. 2008 08:59

Great Extension - works on posts. Has there been a fix for:

"Works great BUT not in "pages". Can you fix that?"

I would like to use it on pages. Please advise. TY.

Brian Carter

November 3. 2008 13:21

Brian,

I haven't gotten back to working on this. I have kinda slipped from my be development lately. If I get a few minutes, Ill fire that back up.

Jesse

jf26028

November 3. 2008 17:10

I checked a few other extensions, found a work-around for pages:

In file lightbox.cs, replace the Post.Serving... line in public Lightbox() construct with this line:

BlogEngine.Core.Page.Serving += new EventHandler<ServingEventArgs>(Post_Serving); //For Pages

Found the clue at: beckelman.net/.../...ension-for-BlogEngineNet.aspx

I'm looking for a way to know if its coming from post or a page - then you could add an if statement so it works in both. If anyone knows, please let me know (briancarter@ChipSoftTech.com).

Brian Carter

November 3. 2008 18:03

Thanks for the info, Brian.

Jesse

jf26028

January 18. 2009 14:20