Help, I can't get Lightbox2 to work on BE.NET 2.9

May 1, 2014 at 8:57 AM
I've downloaded Lightbox2 from here http://lokeshdhakar.com/projects/lightbox2/
Copied the JS files to my JS folder under my theme folder (I'm using the standard theme):
jquery-1.11.0.min.js
lightbox.min.js

Copied lightbox.css to my CSS folder under my theme folder.

Added the following lines to site.master (under the theme folder) right after the <head runat="server"> section:
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

Tested with this:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

But can't lightbox to work in any way. Also installed PrettyPhoto, but I would assume that if lightbox does not work, the integration does not work.

Troubleshooting pointers would be welcome.

Thank you.
May 3, 2014 at 2:41 PM
When I setup a standalone website, lightbox just works with the instructions above.

So I either have a js conflict or I'm adding the jscript entries in the wrong file, anyone?
May 5, 2014 at 3:50 PM
I've found Mozilla Firebug useful for debugging Javascript. Have two instances of Firefox running side by side - one instance with standalone website and the other with Blogengine. Having two monitors help. Check for the order of Javascript loading.
May 5, 2014 at 5:00 PM
Thx galagerardo,

Can you confirm that I should place this:
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

In my site.master file?
Or drop the jQuery scripts in the scripts/jQuery folder?
May 7, 2014 at 4:31 AM
Edited May 7, 2014 at 4:40 AM
Hi mfpgoose!

I went ahead and implemented Lightbox on my web site and with the help of Firefox Firebug Add-in I got it to work 90%. Please use this Add-in to study my page: http://qrurad.com/post/Lightbox-Test

Using this Add-in you will see the CSS and the Scripts required to get Lightbox working on a Blogengine page.
  1. I added this line to the site.master: <link rel="stylesheet" href="include/lightbox/css/lightbox.css">
  2. I took the whole lightbox folder and copied to the /themes/Standard/include folder
What's missing is the way the images are displayed horizontally and resized. I hope this is enough to get you going. Meanwhile, let me continue debugging. I'm almost there.
May 7, 2014 at 4:51 AM
Edited May 7, 2014 at 2:07 PM
Two minutes later:

I cannot emphasize enough the power of Mozilla Firebug. So I continued to debug the horizontal display. Again, using two screens (one working, one not), it was so obvious that I was missing the screen.css. So I added this to my site.master: <link rel="stylesheet" href="include/lightbox/css/screen.css">

Voila! It works awesome.
May 7, 2014 at 12:18 PM
This is driving me nuts...still can't get it to work :-(

Where are you putting the jQuery lightbox scripts?:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
May 7, 2014 at 1:43 PM
I added the jQuery files into scripts\auto and that worked!!

Galagerardo __THANKS!!

And certainly good learnings with Firebug, thanks.