DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: SlideImage¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed:	2005-09-21T22:02:06
Author:	Martin Tschosnig
Email:	martin.tschosnig(AT)udo.edu
Info 3:
Info 4:

EXT: SlideImage¶

Extension Key: mt_slide

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

Table of Contents¶

EXT: SlideImage 1

Introduction 1

What does it do? 1

Screenshots 1

Users manual 2

Image options 2

Window options 2

Slide options 3

FAQ 3

Configuration 3

Reference 3

Known problems 3

To-Do list 3

Changelog 4

Introduction¶

What does it do?¶

This extension displays an image which is scrolled if you hover it with the mouse. You can configure the allowed direction of scrolling/sliding, resize the picture automatically and set if the image should be repeated. There is a second plugin which creates a sliding banner of images.

The scrolling is based on JavaScript and CSS.

Screenshots¶

These screenshots are just examples, you can slide images in more than one direction.

The five screnshots above are taken short after another, everytime the picture has slided a little bit to the right. They grey border is the rest of the web page but not shown here. The whole picture is this:

You can create a sliding banner of pictures, too. This banner could be horizontal or vertical and is made from several imagefiles next to another or above each other.

Users manual¶

Image options¶

If you have installed the extension you can add two new plugins to your pages, named 'SlideImage' or 'SlideBanner'. Just insert a new record on a page, choose 'Plugins' and then 'SlideImage'/'SlideBanner'. Now you will see a form like this:

SlideImage¶

¶

Here you can choose an image and set the resize mode. There are four modes: The first one is called 'Resize to values below', the last one 'Don't Resize'. These two modes are self explaining. The option 'Resize image height to fit the window' will resize the image to the same height than the 'window' has. 'Resize image width...' will work similar.

SlideBanner¶

Here you can set the pictures for the banner and the banner direction. There should be at least two pictures in the list. The width/height of pictures/ the banner is automatically set by the values in 'Window otions'.

Window options¶

The next sheet is named 'window'. The 'window' is the part of the image which is shown actually. The image will slide if you move the mouse over the window. The options are width, height and align. If you enter no value in 'width' or 'height', the plugin takes the hardcoded TypoScript value.

Slide options¶

The last sheet contains options for the sliding.

The left screenshot is form 'SlideImage', the right one from 'SlideBanner'.

If 'Repeat image horizontally' is activated, the picture will begin again if it's scrolled over its right or left borders. The same function has 'Repeat image vertically'. If you use 'SlideBanner', you just can check 'Repeat banner' because a banner is sliding in just one direction.

The 'Slide speed' should be small (1 – 10) for big images, bigger (10 – 50) if the image is a smaller one. Try around a little bit. If you enter nothing, the speed is set to TypoScript default value..

FAQ¶

Q: My picture is doesn't slide and/or is repeated although I don't set the options.A: Maybe your window is bigger than your image. Reset window width and height to smaller values.

Configuration¶

You can set the default values for the window height/width and the sliding speed by TypoScript. If nothing is entered in the plugin options, these values are used.

Every of the two plugins has it's own options, so you have to set TS- values both for SlideImage and SlideBanner.

Reference¶

windowWidth¶

Property

windowWidth

Data type

int

Description

Width of sliding window

Default

350

windowHeight¶

Property

windowHeight

Data type

int

Description

Height of sliding window

Default

200

slideSpeed¶

Property

slideSpeed

Data type

int

Description

Default sliding speed

Default

15

gridRes¶

Property

gridRes

Data type

int

Description

Multiplicator, used to set the resolution of the sliding grid over the image. Smaller values will result in smaller cells and a higher resolution.

Range 1 - 20

Default

3

[tx_mtslide]

((generated))¶

Example¶

These are the standard values for SlideImage. If you want to change them, add the changes to your TS template's 'Setup' section. If you want the values to take effect in SlideBanner, you have to set the prefix to 'tx_mtsilde_pi2'.

plugin.tx_mtslide_pi1 {
  windowWidth = 350
  windowHeight = 250
  slideSpeed = 15
  gridRes = 3
}

Known problems¶

Because of a bug in Opera, the maximum image height/width is set to 2000 pixel if you use this browser to look at the image.

To-Do list¶

Feel free to mail me your suggestions!

Changelog¶

- version 0.2.0 multiple sliding images possible on one page

- version 0.1.0 banner functions completely new written, sliding grid now scalable

added support for Mozilla/Firefox

- version 0.0.7 bugfix: image was not scrolled the first 16 pixel on left side

- version 0.0.5 added support for creating banners

- version 0.0.3 documentation updated

- version 0.0.2: first release, state beta

EXT: SlideImage - 3