.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =============== jQuery ColorBox =============== :Created: 2010-02-18T17:33:18 :Changed by: Raphael Zschorsch :Changed: 2012-03-21T17:07:01.290000000 :Classification: rzcolorbox :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ---- :Keywords: jQuery, ColorBox, Lightbox :Author: Raphael Zschorsch :Email: rafu1987@gmail.com :Info 4: :Language: en |img-1| |img-2| jQuery ColorBox - rzcolorbox .. _jQuery-ColorBox: jQuery ColorBox =============== Extension Key: rzcolorbox Language: en Keywords: jQuery, ColorBox, Lightbox Copyright 2009-2012, Raphael Zschorsch, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `jQuery ColorBox 1 <#__RefHeading__832_396975208>`_ **`Introduction 3 <#__RefHeading__834_396975208>`_** `What does it do? 3 <#__RefHeading__836_396975208>`_ `Screenshots 3 <#__RefHeading__838_396975208>`_ `Thanks to 3 <#__RefHeading__840_396975208>`_ **`Users manual 4 <#__RefHeading__842_396975208>`_** `ColorBox for Content 4 <#__RefHeading__844_396975208>`_ `ColorBox and t3jquery 4 <#__RefHeading__846_396975208>`_ **`Configuration 5 <#__RefHeading__848_396975208>`_** `Reference ColorBox 5 <#__RefHeading__850_396975208>`_ `Reference ColorBox for Content 5 <#__RefHeading__852_396975208>`_ **`Known problems 7 <#__RefHeading__856_396975208>`_** **`To-Do list 8 <#__RefHeading__858_396975208>`_** **`ChangeLog 9 <#__RefHeading__860_396975208>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: Screenshots ^^^^^^^^^^^ .. _img-3-Thanks-to: |img-3| 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... .. _Users-manual: Users manual ------------ - Install the extension from the TYPO3 Extension Repository. - Go to your Template and include one of the five Layouts by including the appropriate TS Extension Template. Make sure **jQuery ColorBox Base** is also selected, as the Constant information are stored here. - |img-4| Basically, you're done. Go to your desired Content Element and you should see this screen: - |img-5| If you want, you can define your Images as a Slideshow. .. _ColorBox-for-Content: 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: - |img-6| Then you can go to your page and add the new “ColorBox for Content” Content Element - |img-7| 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: 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: 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. .. _Configuration: Configuration ------------- .. _Reference-ColorBox: Reference ColorBox ^^^^^^^^^^^^^^^^^^ plugin.rzcolorbox properties: TS Constants .. ### BEGIN~OF~TABLE ### .. _enableGlobal: enableGlobal """""""""""" .. container:: table-row Property enableGlobal Data type boolean Description Enable jQuery globally. If you already defined jQuery Plugins in your Site, just set this to “1” and rzcolorbox won't include the jQuery JavaScript. Default 0 .. _deactivate: deactivate """""""""" .. container:: table-row Property deactivate Data type boolean Description This deactivates the ColorBox and doesn't insert the JS and CSS anymore Default 0 .. _lllPath: lllPath """"""" .. container:: table-row Property lllPath Data type string Description If you want to customize the Locallang entries or simply would like to add your language, just copy the file for example to your fileadmin/templates folder and put the whole path to the locallang file here. (fileadmin/templates/colorbox\_locallang.xml) Default typo3conf/ext/rzcolorbox/locallang.xml .. _cssPath: cssPath """"""" .. container:: table-row Property cssPath Data type string Description If you want to customize the CSS File, define the path like: fileadmin/templates/css/styles.css Default .. _speed: speed """"" .. container:: table-row Property speed Data type string Description Sets the speed of the fade and elastic transitions, in milliseconds. Default 350 .. _slideshowSpeed: slideshowSpeed """""""""""""" .. container:: table-row Property slideshowSpeed Data type string Description Sets the speed of the slideshow, in milliseconds. Default 2500 .. _transition: transition """""""""" .. container:: table-row Property transition Data type string Description Specifies the transition type. Can be set to "elastic", "fade", or "none". Default fade .. _rel: rel """ .. container:: table-row Property rel Data type string Description Define the used rel-name. Standard is “rzcolorbox”, Default rzcolorbox .. _opacity: opacity """"""" .. container:: table-row Property opacity Data type string Description The overlay opacity level. Range: 0 to 1. Default 0.85 .. _innerWidth: innerWidth """""""""" .. container:: table-row Property innerWidth Data type string Description Set the inner width of the ColorBox (you can use this to resize the images inside the ColorBox). Example: "50%", "500px", or 500. Default .. _innerHeight: innerHeight """"""""""" .. container:: table-row Property innerHeight Data type string Description Set the inner height of the ColorBox (you can also use this to resize the images inside the ColorBox). Example: "50%", "500px", or 500. Default .. _initialWidth: initialWidth """""""""""" .. container:: table-row Property initialWidth Data type string Description Set the initial width, prior to any content being loaded. Default .. _initialHeight: initialHeight """"""""""""" .. container:: table-row Property initialHeight Data type string Description Set the initial height, prior to any content being loaded. Default .. _width: width """"" .. container:: table-row Property width Data type string Description Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500 Default .. _height: height """""" .. container:: table-row Property height Data type string Description Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500 Default .. _useWidth: useWidth """""""" .. container:: table-row Property useWidth Data type boolean Description Uses {styles.content.imgtext.maxW} in enabled. This also works for the images shown in the ColorBox. Default 0 .. _ttnewsSingle: ttnewsSingle """""""""""" .. container:: table-row Property ttnewsSingle Data type boolean Description This enables the ColorBox for tt\_news Images in single view Default 0 .. _ttnewsList: ttnewsList """""""""" .. container:: table-row Property ttnewsList Data type boolean Description This enables the ColorBox for tt\_news Images in list view Default 0 .. _ttnewsLatest: ttnewsLatest """""""""""" .. container:: table-row Property ttnewsLatest Data type boolean Description This enables the ColorBox for tt\_news Images in latest view Default 0 .. _overlayClose: overlayClose """""""""""" .. container:: table-row Property overlayClose Data type boolean Description If false, disables closing ColorBox by clicking on the background overlay Default 1 .. _escKey: escKey """""" .. container:: table-row Property escKey Data type boolean Description If false, will disable closing colorbox on esc key press Default 1 .. _arrowKey: arrowKey """""""" .. container:: table-row Property arrowKey Data type boolean Description If false, will disable the left and right arrow keys from navigating between the items in a group Default 1 .. _loop: loop """" .. container:: table-row Property loop Data type boolean Description If false, will disable the ability to loop back to the beginning of the group when on the last element Default 1 .. _fixed: fixed """"" .. container:: table-row Property fixed Data type boolean Description If true, ColorBox will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document Default 0 .. ###### END~OF~TABLE ###### .. _generated: ((generated)) """"""""""""" .. _Example: Example ~~~~~~~ :: 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: Reference ColorBox for Content ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_rzcolorbox\_pi2 properties: TS Setup .. ### BEGIN~OF~TABLE ### .. _templateFile: templateFile """""""""""" .. container:: table-row Property templateFile Data type string Description Path to the template for the ColorBox for Content Default typo3conf/ext/rzcolorbox/res/template/template.html .. _colorboxWidth: colorboxWidth """"""""""""" .. container:: table-row Property colorboxWidth Data type string Description Width of the ColorBox when it opens (Example: "100%", "500px", or 500). Note that the Flexform value overwrites the TypoScript value, so if you globally want to set a width, then leave the Flexform field empty. Default 100% .. _colorboxHeight: colorboxHeight """""""""""""" .. container:: table-row Property colorboxHeight Data type string Description Height of the ColorBox when it opens (Example: "100%", "500px", or 500). Note that the Flexform value overwrites the TypoScript value, so if you globally want to set a height, then leave the Flexform field empty. Default 100% .. _linkClass: linkClass """"""""" .. container:: table-row Property linkClass Data type string Description CSS Class for the link. (Important: The Content Element uid is added at the end) Default rzcolorbox-content .. _contentClass: contentClass """""""""""" .. container:: table-row Property contentClass Data type string Description CSS Class for the Content. (Important: The Content Element uid is added at the end) Default rzce .. _opacity: opacity """"""" .. container:: table-row Property opacity Data type string Description The overlay opacity level. Range: 0 to 1. Default 0.85 .. _link-image-width: link\_image\_width """""""""""""""""" .. container:: table-row Property link\_image\_width Data type string Description The width for the image, if used as a link Default 250 .. _MoveJsFromHeaderToFooter-deprecated: MoveJsFromHeaderToFooter (deprecated) """"""""""""""""""""""""""""""""""""" .. container:: table-row Property MoveJsFromHeaderToFooter (deprecated) Data type boolean Description If set, moves the JS right before the closing body-tag.Since rzcolorbox 1.5.0 this feature is deprecated and the ColorBox JS file will automatically be inserted in the footer, if the option is set in the t3jquery extension configuration. Default 0 .. _localLangFile: localLangFile """"""""""""" .. container:: table-row Property localLangFile Data type string Description Set path to custom locallang.xml. If you did set a custom locallang file for ColorBox for images, then you have to point this value to the path of the localang file aswell. Default typo3conf/ext/rzcolorbox/locallang.xml .. ###### END~OF~TABLE ###### .. _generated: ((generated)) """"""""""""" .. _Example: Example ~~~~~~~ :: 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 } .. _Known-problems: Known problems -------------- - Sometimes it seems that the created jQuery Library doesn't work fine with the ColorBox with Content. I recreated the file 3-4 times and suddenly it worked for me, so if you encounter this error, try it out or report it as a bug in rzcolorbox forge or contact the author of t3jquery if he has an idea. I reproduced the error twice now. - Please report bugs: `http://forge.typo3.org/projects/show/extension- rzcolorbox `_ - If you updated to rzcolorbox 1.5.0 and are using the extension with tt\_news, you have to included the “jQuery ColorBox for tt\_news” static TypoScript manually for it to work again, as it is in a separate TypoScript. .. _To-Do-list: To-Do list ---------- - Documentation to use rzcolorbox in other extensions - I'll work on the extension, as my time allows me... - Feature requests: `http://forge.typo3.org/projects/show/extension- rzcolorbox `_ .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row Version 0.0.1 Changes Initial Upload .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row Version 0.0.2 Changes Added lllPath to TS Constants .. _0-0-3: 0.0.3 ^^^^^ .. container:: table-row Version 0.0.3 Changes Fixed IE Bug for Style 1+4 (added absolutePath), ColorBox is now activated by default and the checkbox is gone .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 Changes Minor code changes, changed $() to jQuery() - thanks to Tobias Riesemann for the hint ;) .. _0-2-0: 0.2.0 ^^^^^ .. container:: table-row Version 0.2.0 Changes now working with tt\_news; changed state to beta; Manual update .. _0-2-1: 0.2.1 ^^^^^ .. container:: table-row Version 0.2.1 Changes script update (v.1.3.5) and manual update .. _0-2-5: 0.2.5 ^^^^^ .. container:: table-row Version 0.2.5 Changes script update (v.1.3.6), jQuery update (v.1.4), minor changes – now the rzcolorbox groups not all the images on one page .. _0-2-6: 0.2.6 ^^^^^ .. container:: table-row Version 0.2.6 Changes jQuery 1.4.1, manual update .. _0-2-7: 0.2.7 ^^^^^ .. container:: table-row Version 0.2.7 Changes Removed JS include only if image\_zoom is activated, because there was no include with tt\_news anymore. I now added a constant to deactivate the JS and CSS; manual update and now also available as PDF. .. _1-0-0: 1.0.0 ^^^^^ .. container:: table-row Version 1.0.0 Changes jQuery 1.4.2, new Content Elements feature, manual update, first stable release .. _1-0-1: 1.0.1 ^^^^^ .. container:: table-row Version 1.0.1 Changes added t3jquery functionality, added slideshowSpeed Constant, removed absolutePath (now rzcolorbox uses config.baseUrl for style 1 and 4), code cleaning, manual update .. _1-0-2: 1.0.2 ^^^^^ .. container:: table-row Version 1.0.2 Changes Manual update .. _1-0-3: 1.0.3 ^^^^^ .. container:: table-row Version 1.0.3 Changes Major t3jquery update. Rzcolorbox should now smoothly integrate into t3jquery. Removed enableT3jquery Constant. See manual for more changes. .. _1-0-5: 1.0.5 ^^^^^ .. container:: table-row Version 1.0.5 Changes Only version changes .. _1-0-6: 1.0.6 ^^^^^ .. container:: table-row Version 1.0.6 Changes There was a problem with ColorBox for Content and t3jquery, added opacity for ColorBox for Content .. _1-0-7: 1.0.7 ^^^^^ .. container:: table-row Version 1.0.7 Changes Bugfixing, changed size in FlexForm CE Selectbox, added Locallang marker for linktext, added french translation, manual update .. _1-0-8: 1.0.8 ^^^^^ .. container:: table-row Version 1.0.8 Changes Link handling in ColorBox for Content didn't work correctly, added useWidth Constant, added jQuery noConflict, TS changes, manual update .. _1-0-9: 1.0.9 ^^^^^ .. container:: table-row Version 1.0.9 Changes Bugfixing .. _1-0-10: 1.0.10 ^^^^^^ .. container:: table-row Version 1.0.10 Changes Bugfixing .. _1-1-0: 1.1.0 ^^^^^ .. container:: table-row Version 1.1.0 Changes Added dutch translation (thanks to Jacco von der Post), bugfixing, manual update .. _1-2-0: 1.2.0 ^^^^^ .. container:: table-row Version 1.2.0 Changes Changed to ColorBox version 1.3.8, added new constants (see manual), fixed issue #8341, manual update .. _1-2-1: 1.2.1 ^^^^^ .. container:: table-row Version 1.2.1 Changes Changed to ColorBox version 1.3.9, added Flexform input field for Linktitle .. _1-2-2: 1.2.2 ^^^^^ .. container:: table-row Version 1.2.2 Changes Added support for dam\_ttnews (thanks to Georg Leonhardt and Stephan Bauer), TypoScript changes, minor CSS changes .. _1-2-3: 1.2.3 ^^^^^ .. container:: table-row Version 1.2.3 Changes Added danish translation (Thanks to Jepser Goos), Manual update .. _1-2-4: 1.2.4 ^^^^^ .. container:: table-row Version 1.2.4 Changes Changed to ColorBox Version 1.3.10 and jQuery Version 1.4.3, partly fixed the bug #9493 .. _1-2-5: 1.2.5 ^^^^^ .. container:: table-row Version 1.2.5 Changes Changed to ColorBox Version 1.3.14 .. _1-2-6: 1.2.6 ^^^^^ .. container:: table-row Version 1.2.6 Changes Bugfix with speed and slideshowSpeed constants .. _1-2-7: 1.2.7 ^^^^^ .. container:: table-row Version 1.2.7 Changes Changed to ColorBox Version 1.3.15 .. _1-3-0: 1.3.0 ^^^^^ .. container:: table-row Version 1.3.0 Changes New feature to set an image as a link (Flexform), moved JS to -Part .. _1-3-1: 1.3.1 ^^^^^ .. container:: table-row Version 1.3.1 Changes Bugfixing (Issue 11788) and added feature to move JS in footer (ColorBox for Content) .. _1-3-2: 1.3.2 ^^^^^ .. container:: table-row Version 1.3.2 Changes Added constants initialWidth and initialHeight .. _1-3-3: 1.3.3 ^^^^^ .. container:: table-row Version 1.3.3 Changes Bugfixing .. _1-3-4: 1.3.4 ^^^^^ .. container:: table-row Version 1.3.4 Changes Bugfixing .. _1-3-5: 1.3.5 ^^^^^ .. container:: table-row Version 1.3.5 Changes Fixed bug #25764 and #26073, added TYPO3 4.5 compatibility .. _1-4-0: 1.4.0 ^^^^^ .. container:: table-row Version 1.4.0 Changes Security fix, please upgrade: http://typo3.org/teams/security /security-bulletins/typo3-extensions/typo3-ext-sa-2011-012/ .. _1-4-1: 1.4.1 ^^^^^ .. container:: table-row Version 1.4.1 Changes Wrong XCLASS Paths fixed (Thanks to Clemens Riccabona) .. _1-5-0: 1.5.0 ^^^^^ .. container:: table-row Version 1.5.0 Changes Bugfixing, new TS constants, updated ColorBox and jQuery scripts, seperate tt\_news TypoScript .. _1-5-1: 1.5.1 ^^^^^ .. container:: table-row Version 1.5.1 Changes TypoScript Bugfixing .. _1-5-2: 1.5.2 ^^^^^ .. container:: table-row Version 1.5.2 Changes Bugfix #29516, Code cleaning .. _1-5-3: 1.5.3 ^^^^^ .. container:: table-row Version 1.5.3 Changes Added escKey and arrowKey to flexform configuration, removed rel, as it's not html5 valid and not necessary anymore .. _1-5-4: 1.5.4 ^^^^^ .. container:: table-row Version 1.5.4 Changes Bugfix #35094 (thanks to Thomas Scholze) .. ###### END~OF~TABLE ###### |img-2| 11 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 360 .. :id: Grafik4 .. :name: Grafik4 .. :width: 569 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 104 .. :id: Grafik1 .. :name: Grafik1 .. :width: 426 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 59 .. :id: Grafik3 .. :name: Grafik3 .. :width: 395 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 110 .. :id: Grafik5 .. :name: Grafik5 .. :width: 443 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 31 .. :id: Grafik7 .. :name: Grafik7 .. :width: 356