GravityCube
Development, design, and simplicity.

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

GravityCube.20080115.ForShow  IMG_0442  IMG_0483 IMG_1575 IMG_5112 IMG_5117

Download:  Lightbox 1.0

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

Jesse Foster | jf26028

kick it on DotNetKicks.com

Currently rated 5.0 by 8 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

January 15. 2008 16:16

Adam

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

Adam

January 15. 2008 17:00

Danny

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

Sanghino

Well done !!!

Sanghino

January 15. 2008 17:21

jf26028

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

Danny

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

Amr

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

Pingback from velcrohurts.com

Image script testing?

velcrohurts.com

January 18. 2008 07:40

Will Sullivan

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

jf26028

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

mikedopp

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

jf26028

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

Dan

Love it!

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

Dan

January 19. 2008 10:24

John

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

John

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

jf26028

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

Stephen McGroarty

Wow, I got a PingBack and I don't even know what that is Smile
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

Will Sullivan

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

mikedopp

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

Pingback from techtoolblog.com

Daily Find #22 | TechToolBlog

techtoolblog.com

February 22. 2008 11:53

pingback

Pingback from f01a.net

Mature Free Hairy Ass Gaping Porn Com Pussy Cunt Fisting Sex And Movies Galleries Movie Pussies Topic View Anal Teen Video Sexy f01a.com

f01a.net

February 29. 2008 14:49

pingback

Pingback from e01c.net

Heroes Online Episode Watch Season Quot Nbc Blog Hero Video For Archive Collision Amp Free Osorio Michelle /shutdown Ddr Canlı İzle Sitcoms “powerless” Every e01c.com uynlqibrzc0

e01c.net

March 30. 2008 19:00

Darryn

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

Darryn

March 30. 2008 20:26

Jesse Foster

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

Tcip

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

Tcip

April 18. 2008 23:23

Jesse Foster

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

Jesse

Jesse Foster

April 19. 2008 10:48

Tcip

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

*Happy holliday*

Tcip

May 1. 2008 15:04

Tcip

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

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

May 11. 2008 18:55