EXT: PMK Shadowbox¶

What Does It Do?¶

The extensions integrates the shadowbox from Michael J. I. Jackson into TYPO3. As a result you can open specially marked links and images with an enabled click-enlarge option into a shadowbox. We don't use any dirty Xclassing for reaching this goal. It's completely configurable by typoscript and it's developed to be very performant in each setup.

Shadowbox Overview¶

Shadowbox is an online media viewer application (Lightbox clone) that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Shadowbox Features¶

What sets Shadowbox apart from every other "box" out there?

Standards

Shadowbox uses HTML markup that validates. It doesn't depend on phony HTML attributes in your anchor tags to make it work. The web has enough problems with standards compliance as it is and Shadowbox does its best to not perpetuate them.

Free from Frameworks

Although Shadowbox has the unique ability to adapt to whatever JavaScript framework you choose, it's just as easy to run it as a standalone application, giving the developer a great deal of flexibility.

Flexible

Shadowbox supports all of the web's most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, FLV, HTML, and even external web pages. This makes it easy to display your content, no matter what it is.

Smart

Shadowbox uses a smart plugin detection mechanism behind the scenes that can spare your users from confusing torn image or puzzle piece icons when they don't have the plugins they need to view your content. Also, it will never overflow the viewport, forcing those obnoxious scrollbars.

Customizable

Shadowbox supports a host of options that make it highly configurable. If you don't like the way something works, chances are very good that you can change it without digging through the code.

Universal

Shadowbox ships with support for many of the world's most-spoken languages, and it's not difficult to configure Shadowbox to communicate with your visitors in their native tongue.

Neat and Compact

The Shadowbox code is neat and modular. And it's smart enough to only include the code you need to run your application so it's as light weight as possible.

Plays Well with Others

Shadowbox tries to be as unobtrusive as possible. If your client doesn't have JavaScript enabled, it will stay completely out of the way and allow the page to function normally.

Shadowbox Licence¶

The shadowbox is free for non-commercial projects, but anyone else must pay for the usage. The code shouldn't be distributed on your own. We got a special permission from Michael J. I. Jackson, the author of the Shadowbox script, to redistribute the shadowbox code with the PMK Shadowbox TYPO3 extension.

Further details on the licencing issues can be found in the ` LICENCE (http://www.shadowbox-js.com/LICENSE) <http://www .shadowbox-js.com/LICENSE>`_ file.

Screenshots¶

The above picture shows 4 pictures inserted with the standard TYPO3 “Image” element.

The above picture is a screenshot of how the ShadowBox looks when you click on one of the images.

How does it work?¶

This extension is done using only TypoScript. The TypoScript code for integration Shadowbox in TYPO3 is located in page.headerData.1229 to page.headerData.1233. So make sure your own code and other extensions doesn't overwrite this location.

The page header informations are splitted in many small pieces to simplify the possible replacement of the css or javascript files. At least a replacement of the final build javascript file shouldn't be that important, because we are generating the build javascript file for shadowbox on-the-fly. Each time you change a configuration option that changes the final javascript, like players or the adapter, we regenerate a new build file. If you need to manually delete the files, you can use the new clear cache menu entry in the tobbar of the TYPO3 backend.

For more information on how the shadowbox javascript is working, I suggest you visit the official homepage: http://www.shadowbox-js.com/

Markup¶

After you have installed and configured the PMK shadowbox extension, images will automatically open in the shadowbox if the click-enlarge option is enabled. If you want to use shadowbox on links you generate yourself, you need to tell shadowbox which links you want it to open.The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a rel="shadowbox" attribute to each link. For example, say you have this link to an image on your page:

< a href = "myimage.jpg" > My Image </ a >

In order to set up this link for use with Shadowbox, simply change it to this:

< a href = "myimage.jpg" rel = "shadowbox" > My Image </ a >

That's it! Clicking on this link should now open up the image in Shadowbox.

NOTE: The word lightbox will also work here. This feature was added for compatibility with the original Lightbox script. Also note that HTML area tags do not support the rel attribute, you cannot use this method to set them up for the usage with Shadowbox. Instead, use Shadowbox.setup as described below.

If you would like to display a title for your image, simply add a title attribute to the link.

< a href = "myimage.jpg" rel = "shadowbox" title = "My Image" > My Image </ a >

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the rel attribute, separated by semi-colons. To specify a movie's height and width (in pixels), use the height and width parameters.

< a href = "mymovie.swf" rel = "shadowbox;height=140;width=120" > My Movie </ a >

Additionally, you may set Shadowbox options on a per-link basis. To do this, you must include a JSON-formatted parameter called options.

< a href = "myimage.jpg" rel = "shadowbox;options={animate:false}" > My Image </ a >

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the rel attribute between square brackets immediately following the word shadowbox. The following markup creates a gallery called "Vacation" with two pictures.

< a href = "beach.jpg" rel = "shadowbox[Vacation]" > The Beach </ a >

< a href = "pier.jpg" rel = "shadowbox[Vacation]" > The Pier </ a >

Galleries may be composed of content of many different types. The following markup demonstrates how various media can be combined into a single gallery.

< a rel = "shadowbox[Mixed];" href = "vanquish.jpg" > jpg </ a >

< a rel = "shadowbox[Mixed];width=520;height=390" href = "caveman.swf" > swf </ a >

< a rel = "shadowbox[Mixed];width=292;height=218" href = "kayak.mp4" > movie </ a >

< a rel = "shadowbox[Mixed]" href = "index.html" > iframe </ a >

Advanced¶

If you don't want to add to your markup, you don't have to. Shadowbox may be manipulated with pure JavaScript. This use is slightly more complex, but it has several benefits including the fact that your HTML markup will be cleaner and you can more easily integrate Shadowbox into an existing project.

If you were paying attention in the section about markup, you'll notice that there are several parameters that commonly accompany Shadowbox content. These parameters are listed in the table below.

Reference¶

Additional Reference (tt_content; Click-Enlarge)¶

If the static template for implementing Shadowbox in tt_content (Click-Enlarge) is installed, the following extra constants are available:

Additional Reference (tt_news)¶

If the static template for implementing Shadowbox in tt_news is installed, the following extra constants are available:

Additional Reference (tt_products)¶

If the static template for implementing Shadowbox in tt_products is installed, the following extra constants are available:

How to change the images?¶

The layout of the shadowbox window is template based, so you can create your own HTML/CSS template, and get the window to look exactly like you want. See the official Shadowbox homepage for more information on how to create your own skins or look into the skin modifications in the resources directory of this extension.

How to open another page inside the ShadowBox?¶

This is quite simple, all you have to do is add a REL attribute to the A tag. This can be done like this in typoscript:

lib.myLink = TEXT

lib.myLink {

value = This link opens in a Shadowbox

typolink {

parameter = 1

ATagParams = rel="shadowbox;plugin=iframe;width=600;height=400"}}

How to use SB on links created in HTMLArea RTE?¶

It is possible to “fool” the HTMLArea RTE into opening links inside the Shadowbox, by adding the rel=”shadowbox” attribute to the title parameter in the link popup window.

To do this you must add the the title like this:

title" rel="shadowbox;plugin=iframe;width=600;height=400

Note: When you edit the link again, the title field will be “cleaned” of the extra parameter, and only show the title.

How to use SB on links created in TinyMCE RTE?¶

If you use the TinyMCE RTE, then there's a patch in TinyMCE RTE you can apply. After the patch is applied, you can set the rel=”shadowbox” directly from the TinyMCE linkhandler.

How to get Shadowbox to work in tt_content (Click-Enlarge)?¶

Just install the additional static template “tt_content (Click- Enlarge).

How to get Shadowbox to work in tt_news?¶

Just install the additional static template “PMK Shadowbox (tt_news).

Then an extra set of constants will be available in the “Constants Editor”, where you can choose in which tt_news views the images should be display inside the Shadowbox.

You can also choose if you want the tt_news singleView displayed inside the Shadowbox, using the “Constants Editor”.

How to get Shadowbox to work in tt_products?¶

Just install the additional static template “PMK Shadowbox (tt_products).

Then an extra set of constants will be available in the “Constants Editor”, where you can choose in which tt_products views the images should be display inside the Shadowbox.

How to enhance the Shadowbox functionality¶

You can enhance the Shadowbox functionality using the functions “onOpen”, "onFinish", "onChange" & "onClose" functions.

Due to the way TYPO3 handles () {} brackets, it is not possible to insert the JavaScript functions directly into the typoscript setup. Instead you should create your JavaScript function in a separate file, and then enter the function name in the typoscript constants/setup.

Example javascript function which will perform a check on the browserheight before opening an HTML page inside the Shadowbox.

If the Browser height is less than 400px, then the page will open in a new browserwindow instead of opening inside the Shadowbox.

function checkBrowserHeight () {if ( Shadowbox . getCurrent (). player == "iframe" && $( window ). height ()< 400 ) { window . open ( Shadowbox . getCurrent (). content , "shadowbox" );return false ;}}

Then in the Shadowbox constants/setup you set the “onOpen” function to point to the JavaScript function above, like this:

plugin.pmkshadowbox.onOpen **=** checkBrowserHeight

Note: The above example requires jQuery installed.

kj_imagelightbox2¶

pmkslimbox¶

perfectlightbox¶

wsclicklightbox¶

ju_multibox¶

1.0.0¶

1.1.0¶

1.1.2¶

3.0.0¶

3.1.0¶

3.2.0¶

17