In this theme, we used prettyPhoto as a script to display content in a popup window. It is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax.

Full list of supported media formats and more information about this powerful plugin you find on plugin home site

In OpenSpace theme is also built-in LightBox shortcode allows you to easily place any type of content without any programming knowledge.Below some examples of usage and syntax

Single Image

[lightbox title=”Sample Caption for Sample Image” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-4.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox]

[toggle title=”Get Code”]
[pre][lightbox title=”Sample Caption for Sample Image” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-4.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox][/pre]
[/toggle]

[divider_top]

Image Group

[lightbox title=”Sample Caption for Sample Image 1″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-4.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox]
[lightbox title=”Sample Caption for Sample Image 2″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-5.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-5.jpg[/lightbox]
[lightbox title=”Sample Caption for Sample Image 3″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-6.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-6.jpg[/lightbox]
[toggle title=”Get Code”]
[pre][lightbox title=”Sample Caption for Sample Image 1″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-4.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox]
[lightbox title=”Sample Caption for Sample Image 2″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-5.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-5.jpg[/lightbox]
[lightbox title=”Sample Caption for Sample Image 3″ album=”demo” thumb=”http://www.dynamicpress.eu/democontent/cameleon/small-6.jpg”]http://www.dynamicpress.eu/democontent/cameleon/big-6.jpg[/lightbox][/pre]
[/toggle]

[divider_top]

Image (text instead of thumbnail)

This demo will load a image and use text instead of a thumbnail”.

[lightbox title=”Sample Caption for Sample Image” text=”Lightbox link with no Thumbnail”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox]

[toggle title=”Get Code”]
[pre][lightbox title=”Sample Caption for Sample Image” text=”Lightbox link with no Thumbnail”]http://www.dynamicpress.eu/democontent/cameleon/big-4.jpg[/lightbox][/pre]
[/toggle]

[divider_top]

SWF File

This demo will load a simple flash movie (.swf) file.
[box class=”attention”]This demo simply load a .swf file but queries works the same (i.e. “myfile.swf?bgcolor=true&color=ffffff”).[/box]

[lightbox title=”Envato Logo’s flash movie” width=”280″ height=”140″ thumb=”http://www.dynamicpress.eu/democontent/cameleon/flash.png”]http://www.dynamicpress.eu/democontent/cameleon/sample.swf[/lightbox]

[toggle title=”Get Code”][pre][lightbox title=”Envato Logo’s flash movie” width=”280″ height=”140″ thumb=”http://www.dynamicpress.eu/democontent/cameleon/flash.png”]http://www.dynamicpress.eu/democontent/cameleon/sample.swf[/lightbox]
[/pre]
[/toggle]

[divider_top]

Video – YouTube

This demo will load a YouTube movie.
[box class=”attention”]YouTube links must be the same as you get from within the URI bar. You can pass all the options to the URI (ie, &hd=1&autoplay=1). For our demo we’re going to use this link: http://www.youtube.com/watch?v=6RWQz0Q7_zY[/box]

[lightbox title=”Old Nike spot in the cage” thumb=”http://www.dynamicpress.eu/democontent/cameleon/youtube.jpg”]http://www.youtube.com/watch?v=e0MBxEAv-30&autoplay=1[/lightbox]

[toggle title=”Get Code”]
[pre][lightbox title=”Old Nike spot in the cage” thumb=”http://www.dynamicpress.eu/democontent/cameleon/youtube.jpg”]http://www.youtube.com/watch?v=e0MBxEAv-30&autoplay=1[/lightbox][/pre]
[/toggle]

[divider_top]

Video – YouTube HQ

[lightbox title=”YouTube High Quality :: Where the Hell is Matt?” thumb=”http://www.dynamicpress.eu/democontent/cameleon/youtube-hq.jpg”]http://www.youtube.com/watch?v=zlfKdbWwruY[/lightbox]

[toggle title=”Get Code”]
[pre][lightbox title=”YouTube High Quality :: Where the Hell is Matt?” thumb=”http://www.dynamicpress.eu/democontent/cameleon/youtube-hq.jpg”]http://www.youtube.com/watch?v=zlfKdbWwruY[/lightbox][/pre]
[/toggle]

[divider_top]

Video – Vimeo

This demo will load a Vimeo movie.

[lightbox title=”The Artist” thumb=”http://www.dynamicpress.eu/democontent/openspace/artist.jpg”]http://vimeo.com/33670490[/lightbox]

[toggle title=”Get Code”]
[pre][lightbox title=”The Artist” thumb=”http://www.dynamicpress.eu/democontent/openspace/artist.jpg”]http://vimeo.com/33670490[/lightbox][/pre]
[/toggle]

[divider_top]

Remote Site

This demo will loads an external site, in our case Theme Forest home page.

[toggle title=”Get Code”]
[pre]
<a title=”Themeforest site opened at 100%” href=”http://www.themeforest.net?iframe=true&width=100%&height=100%” rel=”dp_lightbox”><img src=”http://www.dynamicpress.eu/democontent/openspace/themeforest.jpg” alt=”” /></a>
[/pre]
[/toggle]

[divider_top]

PDF

This demo will open PDF document.

[toggle title=”Get Code”]
[pre]
<a title=”Sample PDF document” href=”http://www.dynamicpress.eu/democontent/amoveo/envato.pdf?iframe=true&width=100%&height=100%” rel=”dp_lightbox”><img src=”http://www.dynamicpress.eu/democontent/openspace/pdf.png” alt=”” /></a>
[/pre]
[/toggle]

[divider_top]