Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Imagescroller

From TYPO3Wiki
Jump to: navigation, search
Extension detail information
imagescroller
This extension shows a horizontal scrollable preview of images.
documentation state needs a review document state list
licence OCL
forgeproject
mailinglist
usergroups list of usergroups forAdmins, forIntermediates
author(s) Bernd Wilke
TER category fe
dependency tt_address, graytree, dynaflex, moneylib, static_info_tables

<< Back to Extension manuals page

[edit]


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 styles:
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 TypoScript:
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.