jQuery ColorBox¶

What does it do?¶

• The extension includes the jQuery ColorBox for images, which is a nice-looking alternative for the allknown Lightbox.
• It simply adds the colorbox to the image Content Elements. Also a new checkbox in the Text w/ Image or the Image Content Element appears, to activate the ColorBox in a slideshow. There are 5 possible ColorBox Layouts, you can define via TypoScript Extension Templates. Read more about that in the Users Manual Section.
• Secondly since version 1.0.0, there is the feature to load any content (Content Elements on any page, internal and external pages, html) into the ColorBox. See more about that also in the Users Manual section.
• Since version 0.2.0, rzcolorbox is also supported for tt_news images. Read more about that in the Configuration section.
• The extension comes with some out-of-the-box features, but you can also customize it with TS Constants.
• rzcolorbox is localized in english, german, french and dutch. Contact me, if you would like your language added.
• For examples just visit http://colorpowered.com/colorbox/
• ColorBox uses version 1.7.1 of the jQuery Library. rzcolorbox uses version 1.3.19 of the ColorBox Script.

Screenshots¶

Thanks to¶

• Jack Moore for this amazing jQuery Plugin
• Kevin Weber for pointing it out to me.
• Benjamin Niediek and his extension “ perfectlightbox ” which always worked fine, when I used it. rzcolorbox uses a copy of his tt_news Image Marker Function.
• Sébastien Delcroix for his help on the integration of t3jquery and the french translation
• Jacco von der Post for the dutch translation
• Jesper Goos for the danish translation
• Those of you, who are rating the extension. Thanks guys, keep it up...

ColorBox for Content¶

• If you want to show any Content in the ColorBox, first, you also have to include the TS Extension Template for it:
• Then you can go to your page and add the new “ColorBox for Content” Content Element
• There you can choose, whether you want to show Content Elements, an external or internal link or plain html in the ColorBox.
• You have various settings and you can also write a description (RTE). You can also define some of these settings via TypoScript. For more information read the Configuration section.
• The ColorBox for Content is completely template-based so you can choose a different template for each Content Element you define (Note: You can define more than one ColorBox for Content on one page...). You'll find the default template file in the folder typo3conf/ext/rzcolorbox/res/template/template.html. Just copy this file anywhere you want and modify it, the way you like.

Updating to TYPO3 4.5.x¶

If you're updating to TYPO3 4.5.x, be sure to change the included static templates to the ones, with the prefix 4.5.

ColorBox and t3jquery¶

• You can also use the rzcolorbox Extension with the t3jquery Extension. First of all you need to install the t3jquery extension through the Extension Manager. You might have a look in the manual of the extension.
• If you want to use the ColorBox with t3jquery, be sure to include the template jQuery ColorBox Base for t3jquery instead of jQuery ColorBox Base, explained above and go to your Template and then to the Constant Editor. Set enableGlobal to 1, which ensures, that you don't include the jQuery Library twice. See more about that in the Configuration section.
• Then, you can go to the t3jquery Backend Module, analyze the rzcolorbox Extension and create your jQuery Library. If you have problems, just look in the manual of t3jquery, where everything is very well documented.

Reference ColorBox¶

plugin.rzcolorbox properties: TS Constants

plugin.rzcolorbox {
enableGlobal = 0
cssPath =
speed = 3000
transition = elastic
rel = your-rel
opacity = 0.55
innerWidth = 250px
ttnewsSingle = 1
ttnewsList = 1
ttnewsLatest = 0
}

Reference ColorBox for Content¶

plugin.tx_rzcolorbox_pi2 properties: TS Setup

plugin.tx_rzcolorbox_pi2 {
templateFile = typo3conf/ext/rzcolorbox/res/template/template.html
colorboxWidth = 100%
colorboxHeight = 100%
linkClass = rzcolorbox-content
contentClass = rzce
opacity = 0.7
_LOCAL_LANG.de.link_text = Klick mich jetzt
}

0.0.1¶

0.0.2¶

0.0.3¶

0.1.0¶

0.2.0¶

0.2.1¶

0.2.5¶

0.2.6¶

0.2.7¶

1.0.0¶

1.0.1¶

1.0.2¶

1.0.3¶

1.0.5¶

1.0.6¶

1.0.7¶

1.0.8¶

1.0.9¶

1.0.10¶

1.1.0¶

1.2.0¶

1.2.1¶

1.2.2¶

1.2.3¶

1.2.4¶

1.2.5¶

1.2.6¶

1.2.7¶

1.3.0¶

1.3.1¶

1.3.2¶

1.3.3¶

1.3.4¶

1.3.5¶

1.4.0¶

1.4.1¶

1.5.0¶

1.5.1¶

1.5.2¶

1.5.3¶

1.5.4¶

11