Lightbox

Lightbox Feature

The Imagevue Lightbox feature allows you to open pages and files in a window that floats directly over the Imagevue gallery. This is effective for example if you want to display a youtube video, google maps or external pages directly from the Imagevue menu, from an image title, or from a text page without leaving the gallery.

Gallery examples›Example›

* Try clicking the photo, map, video and website links.

How to use it?

To use the lightbox feature, you need a small snippet of Javascript as your link:

javascript:lightbox('URL');

From the main menu

To add a lightbox link to your gallery menu, first go to your admin management page. Create a new folder, and set it to be a link. In the link field, simply add the javascript code:

javascript:lightbox('URL');

Open on start page

Perhaps you want to open a lightbox window immediately when your gallery opens? This can be used for example to display a Youtube video, or some custom content. From the admin, navigate to your start-folder, set it as link, and in the link field simply add the javascript code:

javascript:lightbox('URL');

From an anchor link

If you want to create a link for an image title/description or in a text page, you need to wrap the javascript code in an anchor tag naturally:

<a href="javascript:lightbox('URL');">link text</a>

* If you are editing the link from the text page editor, you can enter the javascript string directly.

To add a lightbox link to your gallery menu, go to your admin management page. Create a new folder, and set it to be a link. In the link field, simply add the javascript code:

javascript:lightbox('URL');

Open an image

Opening an image file is the easiest thing to do, and the lightbox will automatically resize to fit the image dimensions.

javascript:lightbox('path/image.jpg');

Example›

Open a html page

When opening external pages or websites, you will normally need to use the iframe setting because the lightbox can’t load the website directly into the box, but instead uses an iframe.

javascript:lightbox('', {iframe:true})

*By default, the lightbox window opens at 95% width and height when using iframe

Example›

There are some cases when you might not need to use iframe, if you for example are loading html or PHP pages that dont contain the <header>. This may for example be a guestbook script or some simple html content. However, you will need to set width and height if you are opening content with undefined size without using iframe.

javascript:lightbox('something.html', {width:500, height:100%})

Open a Google Map

To open a Google map into the lightbox, first go to Google Maps and search out your location you want to display. Click the link icon, and copy the map link. Finally, append “&output=embed” to the end of the link.

javascript:lightbox('https://maps.google.com/maps?q=New+York,+NY,+USA&hl=en&sll=37.0625,-95.677068&sspn=41.767874,79.189453&oq=new+york&t=w&hnear=New+York&z=11&output=embed', {iframe:true})

Example›

Open a video

To Open a Youtube video, first go to Youtube and locate the video. Click the share button, and thereafter the embed button, and copy the link in the src.

javascript:lightbox('http://www.youtube.com/embed/ZHLNS5m-aD4?rel=0&hd=1', {iframe:true})

* When adding Youtube video, you can append &hd=1 to the URL to load a HD version of the video if available

Example›

If you want to set the dimensions identical to the video, we recommend using innerHeight and innerFrame to match the video size or aspect

javascript:lightbox('http://www.youtube.com/embed/ZHLNS5m-aD4?rel=0&hd=1', {iframe:true, innerWidth:'640', innerHeight: '360'})

* Adding videos from Vimeo is almost an identical process

The Function

By now, you have probably already noticed that there are several optional parameters available. The URL is always required, while optional parameters are set in an {object}.:

javascript:lightbox('URL', {object});

Below are the most important parameters:

javascript:lightbox('URL', {title:'text', iframe: true, width:500, height:'90%'});

The Imagevue lightbox is based on Colorbox, an open source lightbox plugin for jQuery. You can find more advanced parameters on the colorbox page.

Notes

• Functions.js
  The lightbox function requires several scripts to run properly, including the Imagevue functions.js, jQuery and colorbox.js. The lightbox feature will not automatically run if you are running Imagevue SWF embedded in a custom document, unless you include the javascripts also.
• Mobile
  On the mobile version of Imagevue, the lightbox function is bypassed and links simply open in blank windows/tabs.
• Native Support
  Since Imagevue X2.8, the lightbox script is also used natively in Imagevue to open popups, video and maps (from images with location data).

Comments are closed in preparation for new website. Use the forum or contact page.