.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================= EXT: RTE Lightbox ================= :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Sven Burkert :Changed: 2011-12-09T10:19:58.820000000 :Classification: rtelightbox :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: forAdmins, forBeginners :Author: Sven Burkert :Email: sventb@googlemail.com :Info 4: :Language: en |img-1| |img-2| EXT: RTE Lightbox - rtelightbox .. _EXT-RTE-Lightbox: EXT: RTE Lightbox ================= Extension Key: rtelightbox Language: en Keywords: forAdmins, forBeginners Copyright 2000-2012, Sven Burkert, 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 ----------------- `EXT: RTE Lightbox 1 <#1.EXT:%20RTE%20Lightbox|outline>`_ **`Introduction 3 <#1.1.Introduction|outline>`_** `What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_ `Screenshots 3 <#1.1.2.Screenshots|outline>`_ **`Users manual 4 <#1.2.Users%20manual|outline>`_** **`Configuration 5 <#1.3.Configuration|outline>`_** `Installation 5 <#1.3.1.Installation|outline>`_ `Reference 6 <#1.3.3.Reference|outline>`_ `Dimensions of image in lightbox 6 <#1.3.4.Dimensions%20of%20image%20in%20lightbox|outline>`_ `Attribute “title” for images 6 <#1.3.5.Attribute%20%E2%80%9Ctitle%E2%80%9D%20for%20images|outline>`_ `Attribute “alt” for images 6 <#1.3.6.Attribute%20%E2%80%9Calt%E2%80%9D%20for%20images|outline>`_ **`Administration 7 <#1.4.Administration|outline>`_** `Problem: There's no “Click-enlarge” checkbox in my image properties 7 <#1.4.1.Problem:%20There's%20no%20%E2%80%9CClick- enlarge%E2%80%9D%20checkbox%20in%20my%20image%20properties|outline>`_ `Problem: The “Click-enlarge” setting isn't saved 7 <#1.4.2.Problem:%20The%20%E2%80%9CClick- enlarge%E2%80%9D%20setting%20isn't%20saved|outline>`_ **`ChangeLog 8 <#1.5.ChangeLog|outline>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ Since TYPO3 Version 4.2 you have the possibility to “click-enlarge” the images you insert in the WYSIWYG editor (rtehtmlarea aka RTE) in TYPO3 Backend. The problem is, that these images aren't opened in a lightbox, they are opened in a popup. First of all, that's slow and secondly there's no fallback if your visitor hasn't javascript enabled. This Extension enables lightboxes for images, inserted in RTE. Of course, you can choose your preferred lightbox: It supports all known lightbox-extensions like wsclicklightbox, pmkslimbox, jq\_fancybox, jquery\_thickbox, jq\_lightbox, perfectlightbox, kj\_imagelightbox2, ju\_multibox, pmkshadowbox, perfectlightboxjquery, slimbox, jquerylightbox, … Support for “unknown” lightbox extensions can be easily implemented by one line of TypoScript. Demo available at http://www.sbtheke.de/demo/rtelightbox/ .. _Screenshots: Screenshots ^^^^^^^^^^^ See “Users manual” .. _Users-manual: Users manual ------------ To open an image in a lightbox, just right click the image in RTE, choose “Image Properties” and activate “Click-enlarge”: |img-3| .. _Configuration: Configuration ------------- .. _Installation: Installation ^^^^^^^^^^^^ - Install one of these extensions, which will provide the lightbox functionality: wsclicklightbox, pmkslimbox, jq\_fancybox, jquery\_thickbox, jq\_lightbox, perfectlightbox, perfectlightboxjquery , kj\_imagelightbox2, pmkshadowbox, slimbox, jquerylightbox, rzcolorbox, rzlightbox, ju\_multibox, mediabox - If you don't want to use one of the named lightbox extensions, you can use your preferred, but then you have to do some TypoScript configuration. - Now you have to add the template “RTE Lightbox (rtelightbox)” in field “Include static (from extensions)” in your root page. Place it AFTER the template “Clickenlarge Rendering (rtehtmlarea)” and AFTER the template of your preferred lightbox extension. If you use the lightbox extension “kj\_imagelightbox2”, your selected templates should look like this: |img-4| - Don't forget to clear the cache. - Now the images should be opened in a lightbox, give it a try! .. _Reference: Reference ^^^^^^^^^ .. _Constants: Constants """"""""" plugin.rtelightbox .. ### BEGIN~OF~TABLE ### .. _automaticDetection: automaticDetection ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property automaticDetection Data type boolean Description Your installed lightbox extension is detected automatically. Set to 0 if you use an unsupported lightbox extension and configure the “AtagParams” by your own. Default 1 .. ###### END~OF~TABLE ###### .. _Setup: Setup """"" If you choose an individual lightbox extension, which isn't supported, you can define the attributes “rel” and “class” by your own: lib.parseFunc\_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagPa rams.cObject.10.dataWrap = class="your-desired-class" rel="your- rel{field:uid}" .. _Dimensions-of-image-in-lightbox: Dimensions of image in lightbox ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You can define the maximum width and hight of the image in the lightbox via TypoScript Constants: styles.content.imgtext.linkWrap.width = 800m styles.content.imgtext.linkWrap.height = 600m .. _Attribute-title-for-images: Attribute “title” for images ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You can provide a title for the images the image properties in RTE (see screenshot in “Users manual”). As default, this input is taken as title. But you know your editors: Mostly, they wouldn't write anything into this field. So you have the possibility to provide a text for the title attribute via TypoScript: lib.parseFunc\_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagPa rams.cObject.20.ifEmpty = Open image in lightbox **But remember:** Most lightbox extensions display this title text as image caption in the lightbox! .. _Attribute-alt-for-images: Attribute “alt” for images ^^^^^^^^^^^^^^^^^^^^^^^^^^ Similar to the title-attribute, you can provide a text for the alt attribute via TypoScript: lib.parseFunc\_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagPa rams.cObject.30.ifEmpty = Your text for alt attribute The alt-attribute contains the text “click-enlarge image” by default. .. _Administration: Administration -------------- .. _Problem-There-s-no-Click-enlarge-checkbox-in-my-image-properties-rtehtmlarea-Version-1-8-5: Problem: There's no “Click-enlarge” checkbox in my image properties (rtehtmlarea < Version 1.8.5) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You have to enable this in the configuration for “rtehtmlarea” in the extension manager: |img-5| .. _Problem-The-Click-enlarge-setting-isn-t-saved: Problem: The “Click-enlarge” setting isn't saved ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ When you save your content element and after this you have a look into the image properties and the checkbox isn't activated although you just activated it, you have to allow the attribute “clickenlarge” for rtehtmlarea. In page properties of your root page, write this code in field “TSconfig”: RTE.default.proc.entryHTMLparser\_db.tags.img.allowedAttribs = alt,class,style,src,title,width,height,clickenlarge .. _Problem-Images-from-tt-news-RTE-aren-t-opened-in-a-lightbox: Problem: Images from tt\_news RTE aren't opened in a lightbox ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Please include the static template for tt\_news **after** the static templates needed for the lightbox. If this is not possible for you, just overwrite the tt\_news RTE rendering again: \# click-enlarge for images in rte in tt\_news single view plugin.tt\_news.displaySingle.content\_stdWrap.parseFunc < lib.parseFunc\_RTE .. _Use-this-extension-with-TYPO3-version-4-3: Use this extension with TYPO3 version < 4.3 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Please use version 1.0.1 of rtelightbox extension. .. _ChangeLog: ChangeLog --------- See file ChangeLog in extension directory. 8 .. ######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.png .. :align: left .. :border: 0 .. :height: 573 .. :id: graphics1 .. :name: graphics1 .. :width: 641 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 179 .. :id: graphics3 .. :name: graphics3 .. :width: 558 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 179 .. :id: graphics2 .. :name: graphics2 .. :width: 460