© 2014/5 - RichoSoft - All Rights Reserved | Terms of Use | Privacy Policy | About Cookies | Contact

The Magic Dragon

A novel way to use a light box

Light Box Open from NavBar in X5

An X6 option that you can add to X5

Open Light Box on Page Load

Does what it says on the tin!

Move the Light Box Close Button

Move the  X with just a little style

Larger Close Buttons

Add a close button larger than standard

Move Light Box

When you want a different poisition

Close Light Box with a Button

Close Light Box from within the Box

Enhanced Light Box

Give your light box a facelift

Other Light Box Tricks

Stop lightbox closing on clicking background

Fixed Position Light Box No Scroll

Open LB relative to Browser with no scroll

Here are some Tips and Tricks for manipulating WebPlus Light Boxes, giving more flexibility and style  to your presentation.

Open Light Box from the NavBar in X5

Open Light Box from the NavBar in X5

A feature that was added to X6 was opening a Light Box from the Navbar. This was not an option in X5 but well before X6 was released it was a feature that was required by me in X5.

This is the solution I came up with.

The first thing is to make sure you have a Light box on every page of your site that shows the NavBar Menu. The easiest way to do this is to have one on the Master Page(s) of every page that displays the NavBar Menu, you might  have the Terms of Use and Privacy Policy on your Master opening in light boxes for example, this will automatically add the light box js libraries to each page.

Why?, I hear you ask. It is because we need to have the Light box code on every page that uses the Menu, and the method we will use does not automatically add the JavaScript libraries to the page. If we add the Javascripts manually on pages that do not have light boxes we may end up duplication the scripts and stop all light boxes from working, so best to let WebPlus add the libraries for us.

Ok that’s cleared up now we have a light box on our master, what’s next?

Go to the ‘Site Tab’ and click the ‘Site Structure’ icon (),

In the pop-up window Click ‘Offsite Link’ then Click ‘Internet Page’ and in the box type in:

pagename.html" rel="wplightbox~#~~#~Title for Lightbox~#~820~#~400

Replace ‘pagename’ with the html title of your page, or path and filename of an image or another website page.

Replace ‘Title for Light box’ with the Title you want to display in the Caption Area of the Light box, set the width and height (in the example 820 is the width, 400 the height. If you do not want a Caption then remove the text. All tildes (~) must be in the positions shown so if you remove the title do not remove the tildes.

In Menu Name enter the name you want to appear in the Menu or Sub Menu and click ‘Include in Navigation’.

Click ‘OK’ and then position your new offsite link where you want it to appear in the tree as normal.

Click Close. Publish your site and admire your work.

The double inverted commas (quotes) after the page name are important! (Note that there is not any before the page name.). In addition there are NO quotes at the end of the line after the 400, whilst there is after the rel=. If the quotes are not positioned as shown it will not work.

PS: This will also work with PrettyPhoto and PrettyPopin for those of you that use them just modify the rel= to the PrettyPhoto or PrettyPopin versions.