EXT: PMK SlimBox¶

Table of Contents¶

EXT: PMK SlimBox 1

Introduction 1

What does it do? 1

Screenshots 2

Users manual 2

Adminstration 2

Configuration 3

Reference 4

How does it work? 6

Using PMKSlimbox with the T3mootools extension 7

Tutorial 7

How to change the images? 7

How to open another page inside the LightBox? 8

How to get tt_news to show the singleView page inside the Lightbox? 9

How to get PMK Slimbox to work in tt_products? 9

Known problems 9

To-Do list 10

Changelog 10

Introduction¶

Users manual¶

Nothing new is available to the user, as the extension just changes the way the click-enlarge function works.

Adminstration¶

Once the extension is installed, you need to include the static typoscript of the extension, in order for the SlimBox script to be activated.

Add the “SlimBox (pmkslimbox)” script AFTER “CSS Styled Cobtent (css_styled_content)”

You can also choose the alternate slimbox script, by adding “SlimBoxPlus (pmkslimbox)” INSTEAD of “SlimBox (pmkslimbox)”. This script supports opening HTML pages inside the Slimbox frame.

As of version 2.3.0 there's a companion script you can enable, called “SlimboxMagnify”. This script adds a small “magnify” icon to the SlimBox-enabled images (the “thumbnails”). So when you hover over a SlimBox-enabled image, the small magnify icon will appear in the lower right corner.

NOTE: This script must be added AFTER the main slimbox script, and can't be used alone.

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”.

page.1230 = COA
page.1230 {
        10 = USER
        10.userFunc = user_slimbox->addJS
        10.jsfile.dataWrap = {$plugin.pmkslimbox.mootoolsJS}

        20 = USER
        20.userFunc = user_slimbox->addJS
        20.jsfile.dataWrap = {$plugin.pmkslimbox.slimboxJS}

        30 = USER
        30.userFunc = user_slimbox->addJS
        30.jsdata.cObject = COA
        30.jsdata.cObject {
                1 = TEXT
                1.value = Slimbox.scanPage = function() {var links = $$("a").filter(function(el) {return el.rel && el.rel.test(/^lightbox/i);});
                2 = TEXT
                2.value = $$(links).slimbox({resizeDuration: {$plugin.pmkslimbox.resizeDuration}, resizeTransition: Fx.Transitions.{$plugin.pmkslimbox.resizeTransition}, opacity: {$plugin.pmkslimbox.opacity}, opacityDuration: {$plugin.pmkslimbox.opacityDuration}, loop: {$plugin.pmkslimbox.loop}, initialWidth: {$plugin.pmkslimbox.initialWidth}, initialHeight: {$plugin.pmkslimbox.initialHeight}, animateCaption: {$plugin.pmkslimbox.animateCaption}, showCounter: {$plugin.pmkslimbox.showCounter}, defaultIframeWidth: {$plugin.pmkslimbox.defaultIframeWidth}, defaultIframeHeight: {$plugin.pmkslimbox.defaultIframeHeight}, iframeScrolling: '{$plugin.pmkslimbox.iframeScrolling}', enablePrintButton: {$plugin.pmkslimbox.enablePrintButton}, enableSaveButton: {$plugin.pmkslimbox.enableSaveButton},
                3 = TEXT
                3.value = counterText: '{LLL:EXT:pmkslimbox/locallang.xml:counterText}', psScriptPath: '{TSFE:baseUrl}{path:EXT:pmkslimbox/savefile.php}'
                3.insertData = 1
                4 = TEXT
                4.value = }, null, function(el) {return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});};window.addEvent("domready", Slimbox.scanPage);
        }
}
page.headerData.1230 = TEXT
page.headerData.1230.dataWrap (
        <link rel="stylesheet" href="{path:{$plugin.pmkslimbox.slimboxCSS}}" type="text/css" media="screen" />
)

parameter.data = TSFE:lastImageInfo|origFile

ATagParams = rel="lightbox"

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
        }
}

Using PMKSlimbox with the T3mootools extension¶

If the “t3mootools” extension is installed, a different set of static include files is used. This setup uses the mootools library created from the t3mootools extension.

To create a mootools library that works with PMK Slimbox, you can use the 3 ^rd option of t3mootools to analyze the PMK Silmbox javascripts for dependencies, and create the library with the mootools parts you need.

Coming as soon as I get some free time to update the t3mootools extensions to Mootools v1.2.1.

Tutorial¶

#lbPrevLink:hover {
    background: transparent url(../images/prev.gif) no-repeat 0% 15%;
}
#lbNextLink:hover {
    background: transparent url(../images/next.gif) no-repeat 100% 15%;
}
#lbCloseLink {
    width: 66px;
    height: 22px;
    background: transparent url(../images/closelabel_dk.gif) no-repeat center;
}

page.headerData.1240 = TEXT
page.headerData.1240.value (
        <link rel="stylesheet" href="fileadmin/templates/css/alt_button_styles.css" type="text/css" media="screen" />
)

lib.myLink = TEXT
lib.myLink.value = This link opens in a Lightbox
lib.myLink.typolink.parameter = 1
lib.myLink.typolink.ATagParams = rel="lightbox" rev="width=600, height=400"

title" rel="lightbox

lib.myLink = TEXT
lib.myLink.value = This link opens in a Lightbox
lib.myLink.typolink.parameter = 1
lib.myLink.typolink.ATagParams = rel="lightbox[external 600 400]"

plugin.tt_news.displayList.linkTitleField = title
plugin.tt_news.displayList.linkTitleField.wrap = |" rel="lightbox" rev="width=600, height=400

plugin.tt_products {
  image {
    imageLinkWrap {
      typolink {
        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}
        ATagParams = rel="lightbox"
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.override.if.isTrue = {$plugin.pmkslimbox.imgtext.navigable}
        ATagParams.insertData = 1
      }
    }
  }
  listImage {
    imageLinkWrap {
      typolink {
        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}
        ATagParams = rel="lightbox"
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.override.if.isTrue = {$plugin.pmkslimbox.imgtext.navigable}
        ATagParams.insertData = 1
      }
    }
  }
  basketImage {
    imageLinkWrap {
      typolink {
        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}
        ATagParams = rel="lightbox"
        ATagParams.override = rel="lightbox[sb{field:uid}]"
        ATagParams.override.if.isTrue = {$plugin.pmkslimbox.imgtext.navigable}
        ATagParams.insertData = 1
      }
    }
  }
}

Known problems¶

• The Javascript and CSS gets loaded into the typoscript object/property “page.headerData.1230”, so if you are using that for something else, you'l have to include the Javascript and CSS manually. The same applies if you don't use the “page” object.
• If you have an EMBED tag on your page, IE7 won't display the page when the SlimBox is installed. Simply remove the EMBED tag from your page, and it will work in IE7. (The EMBED tag is deprecated, and you should use the OBJECT tag instead.)
• The foldout animation doesn't work correctly in IE7 with the default TYPO3 doctype. (HTML 4.0) Change it to HTML 4.01, and it will work:config.doctype (

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
)

• If you have Flash elements on your page, and have problems with getting SlimBox to work (Like the page doesn't load in IE). Then the problem can usually be solved by changing the Flash Javascript loader to the newest version of SWFObject, which can be found here: http://code.google.com/p/swfobject/
• PMK Slimbox conflicts with the following TYPO3 extensions:
• kj_imagelightbox2 => The 1 ^st TYPO3 Lightbox extension. Uses XCLASS to achieve Lightbox effect.
• perfectlightbox => Based on code from PMK Slimbox.
• wsclicklightbox => Based on code from PMK Slimbox.
• ju_multibox => Based on code from PMK Slimbox.

To-Do list¶

Please contact me if you have any suggestion about this extension.

Changelog¶

• 1.0.0 First public release.
• 1.0.1 Added two new constants to define the maximum width/height of the image shown in the Lightbox.Added z-index: 1000 to stylesheet in order for SlimBox to stay on top.Thanks to Bartosz Aninowski for informing me of the problem with displaying very large images in the Lightbox.Added some new constants to the tt_news setup, so now it's possible to choose which parts of tt_news(SingleView, ListView or LatestView) that should have LightBox effect enabled.
• 1.1.0 Switched javascript from Slimbox.js to Slimbox_ex.js which has some additional features, like opening HTMLpages inside the Lightbox (using an IFRAME)Changed the installation of Javascripts and CSS. So now you can install the plugin Local, Global and even as a SysExt.Added locallang.xml for the text in the SlimBox (the words “Page” and “of”)Updated the manual to reflect the new changes.
• 2.0.0 Added new Mootools v1.1 framework library.Added support for changing the Slimbox options from Typoscript. Now it's possible to choose which transition touse, and the duration, Change the opacity level of the background, Control the crolling parameter of the Iframe, andmore.Added Print and Save functionality, which can be enabled/disabled using Typoscript contstants.Added German, Swedish an Norwegian languages.Added support for using an alternate version of the Slimbox script which is able to display the previous/next buttonspermanently in the bottom. NOTE: The alternate Slimbox scrip does NOT support opening HTML pages inside theLightbox window.Added a small tt_news userfunction to set the register value IMAGE_NUM_CURRENT, which is needed forsplitting the tt_news titletext/caption field correctly. Also added an option to choose which field (alt, title or caption)should be uses as caption inside the Lightbox window.Added support for changing the CSS file used, and the version of Mootools Library.
• 2.1.0 Added security fix by Stefan Aebischer.Added “showNumbers” option to turn on/off the “Page x of x” text.Improved the Save/Print functionality by using the baseURL.
• 2.2.0 Added an new constant called “slimboxJS” which holds the path/name of the slimbox scriptAdded support for using the “t3mootools” extension.
• 2.3.0 Added a new script called “slimboxmagnify”. This script adds a small “magnify” icon to the SlimBox-enabled images(the “thumbnails”). So when you hover over a SlimBox-enabled image, the small magnify icon will appear in thelower right corner.Fixed problem with the “Save Image “ function, where files with uppercase letters couldn't be downloaded.Fixed caching problem with the small AddJS function, which would return a TYPO3 error wheneverext_localconf.php was reloaded (like when you entered the EM).Updated the manual with Typoscript code for enabling PMK Slimbox in tt_products.
• 2.3.1 Several updates done to the SlimboxMagnify script:Eliminated the need for setting magnifyImgWidth and magnifyImgHeight manually, by usingTSFE:lastImgResourceInfo|0 and TSFE:lastImgResourceInfo|1 instead.Updated the manual with Typoscript reference for the SlimboxMagnify script.The bottom and right margins can now be set seperatly using TS constants.Sometimes the positioning of the magnify image was wrong, due to elements with relative or absolute positioning.Now a SPAN tag is inserted inside the A tag, with position set to “relative”. The magnify position is then calculactedfrom within the SPAN tag.Thanks to Daniel Wegener for reporting this problem.
• 2.3.2 Extended the AddJS userfunction to allow wrapping of inline Javascript with CDATA tag, as this is required inXHTML strict. (A similar update has been done in the t3mootools extension.).Rewrote most of the SlimboxMagnify script in order for it to comply to XHTML strict specifications. Due to this Ihad to remove the persistant feature, as it now only uses one magnify icon for all lightbox enabled images onthe page.Thanks to András Szepesházi for reporting the XHTML strict problems.
• 3.0.0 Updated Mootools to version 1.2.1.removed the 2 old slimbox scripts and replaced them with the original Slimbox script, SlimboxPlus which now hasthe same features as the old Slimbox Extendes script) and mediaboxAdvanced. The last 2 are both based on theoriginal Slimbox script, and uses similar setups.Added extra functionality to the SlimboxPlus script, so that it can be used directly as a replacement for the oldSlimbox Extended script.Added Print/Save functionality to the Slimbox and SlimboxPlus scripts.Rewrote the SlimboxMagnify script to Mootools 1.2 format.Updated manual (screenshots still shows the old version)
• 3.0.1 Added setup info for MediaboxAdvanced to the manual.Removed unused images.
• 3.1.0 Re-enabled t3mootools support.Updated Slimbox script to v1.69.Updated MediaBoxAdv script to v0.99fFixed problems with the save/print functionality. (Thanks to Stefan Froemken for reporting this.)

EXT: PMK SlimBox - 11