Imagescroller

From TYPO3Wiki

<< Back to Extension manuals page

[edit]

Contents 1 What does it do? 2 Screenshots 3 Users manual 4 Adminstration 5 FAQ 5.1 How can I set a border to the gallery? 5.2 How can I start the scrolling on page loading? 5.3 How can I change the display of the arrows, which indicate the scrolling possibility, at the end of the gallery? 6 Configuration 6.1 Reference (TypoScript) 6.2 Example 6.3 Reference (Contentelement) 7 Known problems 8 To-Do list 9 Changelog

What does it do?

This extensions arranges multiple images of one contentelement into a bar of images which can scroll horiziontally. The image-rendering is similar as in an contentelement 'images', so the input-form is the same.

Screenshots

the input-form is the same as the input-form of 'images'

the front-end may be seen on my (german) website [1]

Users manual

install this extension and you get a further content-type 'scrollable images'

the options/input-fields are the same as in 'images', but are handled slighty different.

Adminstration

- just install

FAQ

How can I set a border to the gallery?

As each gallery gets its own unique CSS-Id you have to choose each occurrence of the gallery to add a border. The Id is generated adding the uid of the contentelement to the string 'motioncontainer_' . e.g. on my demo-page I have one gallery with the Id 'motioncontainer_211' and one with the Id 'motionconainer_212' as they are build from the contentelements with the uids 211 and 212. If I want to add a border to the lower gallery I can add this CSS:

<CSS> :

 
motioncontainer_212 { border:2px solid red; }
 

How can I start the scrolling on page loading?

As all functions necessary for scrolling are available, a simple piece of javascript is enough to start scrolling on page load: just get the Id of the gallery and put this javascript in a contentlement of the type HTML after the gallery:

<JavaScript> :

 
<script type="text/javascript">
scrollspeed=1;
moveright('_211'); // or: moveleft('_211');
</script>
 

Keep attention where the gallery will start. This depends on the content of the field 'position'.

The scrolling will stop at the end of the gallery or if the mouse moves over the gallery.

How can I change the display of the arrows, which indicate the scrolling possibility, at the end of the gallery?

as the arrows hide the content until they are hidden themselves at the end of the gallery, you can insert a replacement as first and last image in the gallery. These images are hidden either being out of sight or by the indicating arrows. At the end of the gallery the arrows are hidden and the replacement underneath can be seen instead.

Since the extensions is not aware of the imagedimensions yet, it is good to use images with the same dimensions than the default-images: 38x48 pixel. (or modify the plugin-code at the definition of the variable $imgdim near line 145)

Configuration

Reference (TypoScript)

Property:	Data type:	Description:	Default:
galleryEndMsg	string	this message is displayed, if no further scrolling in a direction is possible. (if empty no Message appears)	End of Gallery!
restArea	0 < integer	width in pixel of area in the midst of the imagebar, where no scrolling is done	6
maxSpeed	0 < integer < maxWidth/10	maximum 'speed' (number of pixel) the imagebar is scrolled in a cycle	20
noArrows	boolean	use no arrow-images	0
rightArr	file	image used as right arrow to show, that scrolling right is possible	default-image from extension
leftArr	file	same as rightArr for the left side	default-image from extension
delay	int	use a delay in milliseconds before building up the gallery (used for complex pages where browsers may take a while to render the HTML before the javascript can modify it)	0

Example

<TS> :

 
plugin.tx_imagescroller_pi1.galleryEndMessage = There are no further images in this direction.
plugin.tx_imagescroller_pi1.restArea = 100
plugin.tx_imagescroller_pi1.maxSpeed = 3
 

Reference (Contentelement)

Usage of the fields of the Contentelement:

Section/Field:	Data type:	Description:	Default:
header (s)		all fields of this section are handled as usual
Images (s)	list of images	list of images to be shown
Positions (s)	select	this decides the starting position of the scrolling: - aligning left: start with first image visible - aligning right: start with last image visible - aligning center: start with midst image visible
Columns	integer	this value is multiplied with the width-value to decide the actual width of the visible part of the image-bar.	1
No rows	checkbox	not used yet
Border	checkbox	not used yet
Width (pixels) (s)	integer	1. gives the maximum width of a single image 2. is multiplied by Columns to give the actual size	400
Height (pixels)	integer	1. The maximum height of the images 2. adding 30 pixels for the imagecaptions gives the height of the imagebar.	200
Link	string	this can be a list of links, separated by commata
Click-enlarge	checkbox	Option wether a link to a fullsized image in a popup should be generated. In conjunction with the extension pmk_lightbox it enables the popup of the lightbox
Image quality/ processing	selection
Effects	selection
Frames	selection
Caption (s)	text	each row gives the caption of an image
Align	select	not used yet
Alternative Text (s)	text	each row gives the alt-value of an image
Title Text (s)	text	each row gives the title-value of an image
Long Description URL (s)	text	not used yet
General Options (s)		all fields of this section(s) are handled as usual

fields of the record not editable:

uid

integer

this is used in CSS-Ids to identify parts of the scrollbar so it is possible to include multiple scrollbars in one page

Known problems

• having two galleries with same paramters on one page will result in different width with IE. (up to version 0.9.4)

To-Do list

• allign the image-captions according to the options.

Changelog

1. initial release
2. 0.9.1 2007.08.02 overlay-images inserted for showing the possibilities to scroll instead of end-message, more configuration.
3. 0.9.2 2007.08.06 bugfixes:
   1. clean CSS, also if you include two imagescroller into one page (additional open comment)
   2. clean javascript to hide correct arrows if you include two imagescroller into one page (individual ids for each imagescroller-arrows)
   3. clean javascript: correct position at each end of scrollbar.
4. 0.9.3 2007.10.17 and 2007.10.18. bugfix: error in the javascript for IE
5. 0.9.4 2007.10.21 manual enhancement
6. 0.9.5 2008.02.25 some bugfixes for IE.