After i have looket at host.sonspring.com/hoverbox/ (thanks to a forumpost ) i decidet to implement this as a example.

With this small extension i would like to show how to write typoscript code into a extension to reuse it for other projects.

I have used the kickstarter for this.

What i did:

1. Installed the Kickstatrter and selected in the Extension Manager "Create new extension"

2. Written all the details into "General Info" and choosed a unique extension name.

3. Inserted the title and the typoscript setup/ constants in "static TypoScript code ".

After installing the extension you can choose to include the typoscript when editing the template record in "Include static (from extensions):".

For my sample i used following typoscript code:

Constants:

styles.content.imgtext.colSpace = 5
styles.content.imgtext.rowSpace = 5
styles.content.imgtext.borderColor = #CCCCCC
styles.content.imgtext.borderThick = 1
styles.content.imgtext.borderSpace = 8

Setup:

tt_content.image.20.border>
tt_content.image.20.border=1
tt_content.image.20.1.imageLinkWrap =0
tt_content.image.20.1.imageLinkWrap>
tt_content.image.20.1.stdWrap.innerWrap(
  <a href="#"><img src="{current:1}" class="preview" />|</a>
)
tt_content.image.20.1.stdWrap.innerWrap.insertData=1
page.headerData.54=TEXT
page.headerData.54.insertData=1
page.headerData.54.data(
  PATH:EXT:t3w_hoverbox/static/Images_Text_with_image_Hoverbox/style.css
)
page.headerData.54.wrap=<link rel="stylesheet" type="text/css" href="|" />

page.headerData.55=TEXT
page.headerData.55.insertData=1
page.headerData.55.data(
   PATH:EXT:t3w_hoverbox/static/Images_Text_with_image_Hoverbox/ie.css
)
page.headerData.55.wrap(
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="|" />
<![endif]-->
}

Download t3x

Example Hoverbox

Comments

Stan, 29-03-07 20:05:

---

Is it possible to set a maximun size for the images?
It is a great extension, but most of the images are uploaded in different content areas and are all random sizes that I set in the content area, so now they (on hover) are too big.

Great work.

ionut, 23-05-07 15:56:

---

Great, thank you, I was looking for something like this.
I will use it :)

the, 23-08-07 13:57:

---

läuft wohl was nicht rund. gibt es ein update?

Maik, 15-08-08 15:52:

---

The example hoverboxes don't work in Firefox 1.5 and IE7 (Javascript is on).

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *