Click here for information about NEW Imagevue X3

Lightbox

How to use the elegant lightbox feature in your gallery

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 examplesExample

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




7 Responses to "Lightbox Feature"

  1. Martino Buzzi Posted 4 years ago

    any way to customize the lightbox?

  2. Hi,
    what about a link from each photo to a temporary lightbox where you can add photos and later compare them?

    Keep the good work up guys!

  3. Hei! I’m trying out the demo software and I’m stuck with one thing. I’ll try to explain: I would like to create links in the main menu that when pressed, they would open a youtube video in the Lightbox. But I can’t seem to get that working
    I have tryed many things and finally I got 2 480p videos to work.

    But I can’t get to work this video – http://www.youtube.com/watch?v=QZkWSPfCfnM
    Is it because it is 720p?
    Links that I tryied:

    javascript:lightbox(‘http://www.youtube.com/watch?v=QZkWSPfCfnM?hd=1′, {iframe:true, innerWidth:’1280’, innerHeight: ‘720’})

    javascript:lightbox(‘http://www.youtube.com/watch?v=QZkWSPfCfnM?vq=hd720′, {iframe:true, innerWidth:’1280’, innerHeight: ‘720’})

    My main question is that how can I make HD videos work with lightbox and can I put HD videos into 640*480 frame?

  4. Dima Hodosov Posted 4 years ago

    Many thanks for the detailed description!

  5. Hi, I use the lightbox fot my old website. I was verry satisfied with my pictures.

    good job

  6. Question on iframe. I have loaded a site within the iframe then navigate it. When I press back button in firefox the iframe page does not go back, looks like the main page under the iframe goes back. Can I add a button to go back/forward within the iframe?


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