This page is still a beta!

1.3.Adminstration Table Of Content 1.5.Tutorial

1.4. Configuration

All configuration of the extension is done using Typoscript Constants. Use the “Constants Editor” of TYPO3 to change these options. You can change things like the transition, sizes, enable print and save buttons etc.

 There's currently 3 config option available. The first allows  you to switch between “Navigable” mode and “Single” mode. Default is “Navigable” mode.

To switch to ”Single” mode, you just set the CONSTANT “plugin.pmkslimbox.imgtext.navigable” to zero, like this:

plugin.pmkslimbox.imgtext.navigable = 0

    And to switch on the ”Navigable” mode , you set the CONSTANT to one, like this:

       styles.content.imgtext.slimbox.navigable = 1
    The second and third config options defines the maximum width and height for the images shown in the Lightbox. To change these, you can set the two CONSTANTS, like this:
       plugin.pmkslimbox.imgtext.maxW = 800
       plugin.pmkslimbox.imgtext.maxH = 600
    If you install the optional static template for tt_news “SlimBox tt_news (pmkslimbox)”, there will be a couple extra CONSTANTS available:
    plugin.pmkslimbox.tt_news.navigable = 1
    Which allows  you to switch between “Navigable” mode and “Single” mode. (Default is “Navigable” mode.)
    And then there's three CONSTANTS to control in which section of tt_news you want the Lightbox effect enabled.
    plugin.pmkslimbox.tt_news.displaySingle.slimBoxEnable = 1
    plugin.pmkslimbox.tt_news.displayList.slimBoxEnable = 0
    plugin.pmkslimbox.tt_news.displayLatest.slimBoxEnable = 0
    Default is only to enable it in singleView.
    (NOTE: All the CONTSTANTS can be set using the standard TYPO3 “Constant Editor”.
    Reference
    Constant:
    Data type:
    Description:
    Default:
    plugin.pmkslimbox.imgtext.navigable
    boolean
    SlimBox mode (tt_content): If set, click-enlarged groups of images will be navigable. (Next/Previous buttons ar shown)
    1
    plugin.pmkslimbox.tt_news.navigable
    boolean
    SlimBox mode (tt_news): If set, click-enlarged groups of images in tt_news will be navigable. (Next/Previous buttons ar shown)
    1
    plugin.pmkslimbox.animateCaption
    boolean
    Caption Animation: Set it to false to disable the caption animation.
    1
    plugin.pmkslimbox.enablePrintButton
    boolean
    Display Print Button: If set, a Print button is displayed in the caption box.
    0
    plugin.pmkslimbox.enableSaveButton
    boolean
    Display Save Button: If set, a Save button is displayed in the caption box.
    0
    plugin.pmkslimbox.tt_news.enableSplit
    boolean
    Enable Splitting: If true, then a small userfunction is included for tt_news. This enables splitting of the caption value by setting the register value "IMAGE_NUM_CURRENT" to the current item number.
    1
    plugin.pmkslimbox.showControls
    boolean
    Show Controls: Set it to false to disable Previous/Next buttons.
    (Only available if you use the alternate Slimbox script)
    1
    plugin.pmkslimbox.showNumbers
    boolean
    Show Numbers: Set it to false to disable "Page 1 of 3" text.
    (Only available if you use the alternate Slimbox script)
    1
    plugin.pmkslimbox.tt_news.displaySingle.slimBoxEnable
    boolean
    Enable SlimBox in displaySingle : If set, LightBox effect will be available in tt_news SingleView when you click on an image.
    1
    plugin.pmkslimbox.tt_news.displayLatest.slimBoxEnable
    boolean
    Enable SlimBox in displayLatest : If set, LightBox effect will be available in tt_news LatestView when you click on an image.
    0
    plugin.pmkslimbox.tt_news.displayList.slimBoxEnable
    boolean
    Enable SlimBox in displayList : If set, LightBox effect will be available in tt_news ListView when you click on an image.
    0
    plugin.pmkslimbox.tt_news.displayList.slimBoxSingleView
    boolean
    Enable singleView in SlimBox : If set, tt_news SingleView will be shown inside a LightBox.
    (Not available if you use the alternate Slimbox script)
    0
    plugin.pmkslimbox.initialWidth
    Int+
    Starting Width: The initial width of the box, in pixels.
    250
    plugin.pmkslimbox.initialHeight
    Int+
    Starting Height: The initial height of the box, in pixels.
    250
    plugin.pmkslimbox.slimBoxMaxW
    Int+
    SlimBox Max Image Width: Defines the maxwidth of the image shown in the Lightbox.
    800
    plugin.pmkslimbox.slimBoxMaxH
    Int+
    SlimBox Max Image Height: Defines the maxheight of the image shown in the Lightbox.
    600
    plugin.pmkslimbox.defaultIframeWidth
    Int+
    Iframe Default Width: The default width of the iframe, in pixels.
    (Not available if you use the alternate Slimbox script)
    500
    plugin.pmkslimbox.defaultIframeHeight
    Int+
    Iframe Default Height: The default height of the iframe, in pixels.
    (Not available if you use the alternate Slimbox script)
    300
    plugin.pmkslimbox.tt_news.displayList.slimBoxWidth
    Int+
    SlimBox tt_news Iframe width : Used to set the width of the LightBox if displaying tt_news SingleView in SlimBox is enabled.
    (Not available if you use the alternate Slimbox script)
    600
    plugin.pmkslimbox.tt_news.displayList.slimBoxHeight
    Int+
    SlimBox tt_news Iframe height : Used to set the height of the LightBox if displaying tt_news SingleView in SlimBox is enabled.
    (Not available if you use the alternate Slimbox script)
    500
    plugin.pmkslimbox.slimboxCSS
    file
    CSS File: CSS file for Slimbox. See EXT:pmkslimbox/res/styles/slimbox_ex.css for an example.
    EXT:pmkslimbox/res/styles/slimbox_ex.css
    plugin.pmkslimbox.mootoolsJS
    file
    Mootools Javascript Library: You only need to change this if you are using Mootools, and need some functions not in the included in the one used as default.(A full version of Mootools v1.1 is lotated at EXT:pmkslimbox/res/scripts/mootools.v1.1_complete.js)
    EXT:pmkslimbox/res/scripts/mootools.v1.1.js
    plugin.pmkslimbox.resizeDuration
    Int+
    Resizing duration: The duration of the resize animation for width and height, in milliseconds.
    400
    plugin.pmkslimbox.resizeTransition
    string
    SlimBox Transition: The transition you want to use for the resize animation. You can choose amongst lots of cool transitions that are part of the optional "Transitions" module of mootools, like "Fx.Transitions.elasticOut". Many transitions require a longer execution time to look good, so you should adjust the resizeDuration option above as well.
    Available values:  [linear, quadIn, quadOut, quadInOut, cubicIn, cubicOut, cubicInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, sineIn, sineOut, sineInOut, expoIn, expoOut, expoInOut, circIn, circOut, circInOut, elasticIn, elasticOut, elasticInOut, backIn, backOut, backInOut, bounceIn, bounceOut, bounceInOut]
    sineInOut
    plugin.pmkslimbox.opacity
    string
    Background opacity level
    0.8
    plugin.pmkslimbox.iframeScrolling
    string
    Iframe scrolling parameter:Used when HTML page is displayed inside Lightbox frame. Available values: [auto,yes,no]
    (Not available if you use the alternate Slimbox script)
    auto
    plugin.pmkslimbox.imgtext.captionField
    string
    tt_content Caption Field: tt_content field to use as caption inside the Lightbox.
    Available values: [titleText, altText, imagecaption]
    titleText
    plugin.pmkslimbox.tt_news.captionField
    string
    tt_news Caption Field: tt_news field to use as caption inside the Lightbox.
    Available values: [imagetitletext, imagealttext, imagecaption]
    imagetitletext
    [tsref:(cObject).plugin.pmkslimbox]
    For more information on how the Slimbox javascript is working, I suggest  you visit the official homepage(s).
    SlimBox:http://www.digitalia.be/software/slimbox
    SlimBoxEx:http://homepage.mac.com/yukikun/software/slimbox_ex/
    SlimBoxPF:http://www.phatfusion.net/lightbox/
    How does it work?
    This extension is done using only Typoscript, except for the javascript that makes the lightbox effect ;)
    First we have to include the Slimbox files, and set the config options and language values. This is done in the static templates like this:
    page.headerData.1230 = COA
    page.headerData.1230.1 = TEXT
    page.headerData.1230.1.value = window.addEvent('domready', Lightbox.init.bind(Lightbox,{resizeDuration: {$plugin.pmkslimbox.resizeDuration}, resizeTransition: Fx.Transitions.{$plugin.pmkslimbox.resizeTransition}, opacity: {$plugin.pmkslimbox.opacity}, initialWidth: {$plugin.pmkslimbox.initialWidth}, initialHeight: {$plugin.pmkslimbox.initialHeight}, animateCaption: {$plugin.pmkslimbox.animateCaption}, defaultIframeWidth: {$plugin.pmkslimbox.defaultIframeWidth}, defaultIframeHeight: {$plugin.pmkslimbox.defaultIframeHeight}, iframeScrolling: '{$plugin.pmkslimbox.iframeScrolling}', enablePrintButton: {$plugin.pmkslimbox.enablePrintButton}, enableSaveButton: {$plugin.pmkslimbox.enableSaveButton},
    page.headerData.1230.2 = TEXT
    page.headerData.1230.2.value = llPage: '{LLL:EXT:pmkslimbox/locallang.xml:page}', llOf: '{LLL:EXT:pmkslimbox/locallang.xml:of}', psScriptPath: '{path:EXT:pmkslimbox/savefile.php}'}));
    page.headerData.1230.2.insertData = 1
    page.headerData.1230.stdWrap.dataWrap (
            <script type="text/javascript" src="{path:{$plugin.pmkslimbox.mootoolsJS}}"></script>
            <script type="text/javascript" src="{path:EXT:pmkslimbox/res/scripts/slimbox_ex.js}"></script>
            <script type="text/javascript">|</script>
            <link rel="stylesheet" href="{path:{$plugin.pmkslimbox.slimboxCSS}}" type="text/css" media="screen" />
    )
    Next we need to get the A tag to link to the original image. To make this possible we access an undocumented feature of TYPO3, which returns the path + filename of the original image.
    parameter.data = TSFE:lastImageInfo|origFile
    Other examples of using these features, can be found at:http://www.typo3wizard.com/en/snippets/cool-stuff-typoscript/fun-with-tsfe-part-1-getting-additional-image-imformation.html
    That take care of getting the link to point to the correct file, so now we just need to activate the lightbox script.
    This is done by simply adding an extra parameter (rel=”lightbox”) to the A tag, and in Typoscript done like this:
    ATagParams = rel="lightbox"
    That's all you need to enable the lightbox feature on your own links!
    Example
    Here an example (taken from the static template “SlimBox (pmkslimbox)” ), which shows how the “ImageLinkWrap” is changed for tt_news records.:
    temp.imageLinkWrap = 1
    temp.imageLinkWrap {
            enable = 1
            
            # Add new typolink wrapping code
            typolink {
                    # Set the title of the A tag, which is used as caption inside the Lightbox
                    title.field = {$plugin.pmkslimbox.tt_news.captionField}
                    title.split.token.char = 10
                    title.split.returnKey.data = register : IMAGE_NUM_CURRENT
                                    
                    # This returns a link, pointing to the path + name of the original image.
                    # or to the path + name of the resized lightbox image (if maxH or maxW is reached.)
                    parameter.cObject = IMG_RESOURCE
                    parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
                    parameter.cObject.file.maxW = {$plugin.pmkslimbox.slimBoxMaxW}
                    parameter.cObject.file.maxH = {$plugin.pmkslimbox.slimBoxMaxH}
            
                    # Add the "rel" attribute needed to activate the lightbox effect.
                    ATagParams = rel="lightbox"
                    ATagParams.override = rel="lightbox[sb{field:uid}]"
                    ATagParams.override.if.isTrue = {$plugin.pmkslimbox.tt_news.navigable}
                    ATagParams.insertData = 1
            }
    }
    

    
				
    
					
    
						
    
							1.3.Adminstration
							Table Of Content
							1.5.Tutorial