Changing the images can easily be done with a little bit of CSS and typoscript.

In this example i have created 2 folders in my fileadmin/templates/ folder, called “css” and “images” (See screenshot), placed my alternate images in the “images” folder and created a file named “alt_button_styles.css” in the “css” folder.

In the “alt_button_styles.css” file I have just added some code to override the original stylesheet IDs with my own. It looks like this:

#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;

}

And as the original SlimBox CSS code is included as “page.headerData.1230”, we just need to include the alternate CSS file in our Typoscript template AFTER that, like this:

page.headerData.1240 = TEXT

page.headerData.1240.value (

        <link rel="stylesheet" href="/fileadmin/templates/css/alt_button_styles.css" type="text/css" media="screen" />

)

The above Typoscript could then be placed inside CONDITION brackets to in order to change the buttons based on the language selected.

This is quite simple, all you have to do is add a REL and a REV attribut to the A tag. This can be done like this in Typoscript:

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"

I is also possible to “fool” the HTMLArea RTE into opening links inside the Lightbox, by adding the rel=”lightbox” attribute to the Title parameter in the linkpopup window.

To do this you must add the the title like this:

title" rel="lightbox

Note: When you edit the link again, the Title field will be “cleaned” of the extra parameter, and only show the title.

Since tt_news doesn't have any Typoscript “typolink” properties available for the link to singleView, we will have to find an alternate way to add the REL attribute to the A tag.

From looking at the tt_news manual, theres only one property that can add anything to the A tag links, and that's the “linkTitleField” property, which is used for adding custom TITLE attributes.

So with a little clever way of wrapping, we can use that to add our REL attribute, like this:

plugin.tt_news.displayList.linkTitleField = title

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

What the above wrapping result in is this: (The code generated by TYPO3 is shown in bold.)

<a href=”link_to_singleView_page” title=”title_attributes” rel=”lightbox” rev=”width=600, height=400”>

Note: This can be enabled/disabled using the Constant “plugin.pmkslimbox.tt_news.displayList.slimBoxSingleView”.

tt_products uses the standard TYPO3 method for displaying images with click-enlarge, so it's very easy to get it to work with PMK Slimbox. Here's some typoscript for tt_products.

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

      }

    }

  }

}