Using Lightbox in Orchard

Topics: Customizing Orchard
Mar 6, 2011 at 10:23 PM

I am a very new Orchard user and so far have been extremely impressed by it.

I would very like to use the Lightbox script for use with images on my site and have been trying to customise it accordingly. So far, I have managed to successfully inject the scripts and stylesheet links by modifying the Layout.cshtml file of my theme as follows (I did have to guess a little bit here, as I could not find much documentation of these objects and what it is I'm actually doing; it might be that I simply could not find the relevant page but it would be great if a topic could be written about this):

Style.Include("/Lightbox/css/lightbox.css");
Script.Include("/Lightbox/js/prototype.js").AtHead();
Script.Include("/Lightbox/js/scriptaculous.js?load=effects,builder").AtHead();
Script.Include("/Lightbox/js/lightbox.js").AtHead();

This seems to work extremely well and I can see the links placed into the head section of the generated pages. Of course, this does mean that only the theme I have modified will get the links injected, so I was wondering if there was a better, more generic way of doing this?

However, my main problem is that I can't actually get an image to display in a lightbox as hoped. Having read the documentation for Lightbox, it would appear that the most likely reason that this is happening is that the initLightbox() method is not being called. The recommended (and I would assume only) way of accomplishing this is placing a call to it in the onLoad attribute of the body tag. Despite searching, I have been unable to find a way of doing this and would therefore be very grateful if anybody could help me.

Finally, in the longer term, I very much hope that the proposed Image Gallery module will be released and that Orchard will continue to grow!

Mar 10, 2011 at 4:32 PM

Hey,

I started with some thoughts like yours and decided to develop the Image Gallery module. Its version 1.0 is going to be released by next week. So stay tuned to take a look at it. I hope you enjoy the module and provide some feedback for its improvement.

Thanks,

Gabriel Mello

Mar 10, 2011 at 5:00 PM

Hi Gabriel,

Thank you for replying to my post. I really look forward to the release of your Image Gallery module and will keep an eye out for it. I am following this project: http://orchardimagegallery.codeplex.com; is that the one you are working on?

Kind regards,

Ben

Mar 11, 2011 at 10:46 AM
CodeArt wrote:

Hi Gabriel,

Thank you for replying to my post. I really look forward to the release of your Image Gallery module and will keep an eye out for it. I am following this project: http://orchardimagegallery.codeplex.com; is that the one you are working on?

Kind regards,

Ben

Yes, it is. Soon the first public version will be available.

Thank you very much for the support ;-)

Gabriel

Mar 11, 2011 at 2:19 PM

Gabriel, good luck with your module, I am looking forward to testing it as well.

Mar 15, 2011 at 9:29 PM

Just to let you guys know, the Image Gallery module is available to download on the modules gallery! 

Please find out how to get started on http://orchardimagegallery.codeplex.com/documentation 

Thanks guys for the support! Any feedback is appreciated.

May 10, 2011 at 2:56 PM

Any solution yet regarding the lightbox problem? I have set up lighbox as normal but the image opens in another window.

I also have tried your photo album and it´s great, but I would like to assign lightbox functionality to specific images on a page.

Style.Include("/Lightbox/css/lightbox.css");
Script.Include("/Lightbox/js/prototype.js").AtHead();
Script.Include("/Lightbox/js/scriptaculous.js?load=effects,builder").AtHead();
Script.Include("/Lightbox/js/lightbox.js").AtHead();
And at the link I write rel="lightbox" as usual, but nothing :(

Magnus

Coordinator
May 10, 2011 at 11:05 PM

Hey, Magnus

Have you checked to make sure all of the JS files and the CSS file aren't returning 404's and there are no script errors?

 

-Nathan

May 11, 2011 at 6:32 AM

I got a 404 error when im trying to acces the files. It´s weird because I have copied the lightbox folders to the root and I dont see any thing that would make it not work.

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/js/lightbox.js" type="text/javascript"></script>

 

/ Magnus

Coordinator
May 11, 2011 at 6:47 AM

You're probably missing web.config files in those directories.