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: imagescroller

Author:Bernd Wilke
Created:2010-03-13T02:31:12
Changed by:Bernd Wilke
Changed:2010-03-22T20:11:09
Classification:imagescroller
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:image, display, scrolling, wraparound, autostart
Author:Bernd Wilke
Email:t3-YYYY@bernd-wilke.net
Info 4:
Language:en

img-1 img-2 EXT: imagescroller - imagescroller

EXT: imagescroller

Extension Key: imagescroller

Language: en

Keywords: image, display, scrolling, wraparound, autostart

Copyright 2000-2010, Bernd Wilke, <t3-YYYY@bernd-wilke.net>

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

Table of Contents

EXT: imagescroller 1

`Introduction 3 <#2.1.Introduction|outline>`_

`Users manual 4 <#2.2.Users%20manual|outline>`_

`Adminstration 5 <#2.3.Adminstration|outline>`_

`Configuration 6 <#2.4.Configuration|outline>`_

`Known problems 8 <#2.5.Known%20problems|outline>`_

`To-Do list 9 <#2.6.To-Do%20list|outline>`_

`Changelog 10 <#2.7.Changelog|outline>`_

Introduction

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' with three additional values
  • the front-end may be seen on my website http://pi- phi.de/t3v4/demo.html

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 slightly different.Three additional parameters control a wrap around , continuation after mouse leaves the area and initial scrolling of the images.

FAQ

- n.a.y.

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:#motioncontainer_212 { border:2px solid red; }
  • How can I start the scrolling on page loading? This can be done with the parameter ' initial moving ' (see beyond).
  • 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.
  • I want the images wrap around. After the last image the first should be shown again. This can be done with the parameter ' wraparound ' (see beyond).
  • How can I prevent that the scrolling stops when the mouse leaves the picture area? This can be done with the paramter ' runforever ' (see beyond).

Configuration

Reference

((generated))
Reference (TypoScript)
galleryEndMsg

Property

galleryEndMsg

Data type

string

Description

this message is displayed, if no further scrolling in a direction is possible. (if empty no Message appears)

Default

End of Gallery!

restArea

Property

restArea

Data type

0 < integer0% <= integer% <= 90%

Description

width in pixel of area in the midst of the imagebar, where no scrolling is done.You also can enter a percentage between 0 and 90 as <value>%

Default

6

maxSpeed

Property

maxSpeed

Data type

0 < integer < maxWidth/10

Description

maximum 'speed' (number of pixel) the imagebar is scrolled in a cycle

Default

20

noArrows

Property

noArrows

Data type

boolean

Description

use no arrow-images

Default

0

noCaption

Property

noCaption

Data type

boolean

Description

show no caption

Default

0

rightArr

Property

rightArr

Data type

file

Description

image used as right arrow to show, that scrolling right is possible

Default

default-image from extension

leftArr

Property

leftArr

Data type

file

Description

same as rightArr for the left side

Default

default-image from extension

delay

Property

delay

Data type

int

Description

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)

Default

0

wrapAround

Property

wrapAround

Data type

boolean

Description

global default-value for elementspecific value (see beyond)

Default

0

runForever

Property

runForever

Data type

boolean

Description

global default-value for elementspecific value (see beyond)

Default

0

initialMove

Property

initialMove

Data type

int

Description

global default-value for elementspecific value (see beyond)

Default

0

Example
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:

header (s)

Section/Field

header (s)

Data type

Description

all fields of this section are handled as usual

Default

Images (s)

Section/Field

Images (s)

Data type

list of images

Description

list of images to be shown

Default

Positions (s)

Section/Field

Positions (s)

Data type

select

Description

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

Default

Columns

Section/Field

Columns

Data type

integer

Description

this value is multiplied with the width-value to decide the actual width of the visible part of the image-bar.

Default

1

No rows

Section/Field

No rows

Data type

checkbox

Description

not used yet

Default

Border

Section/Field

Border

Data type

checkbox

Description

not used yet

Default

Width (pixels) (s)

Section/Field

Width (pixels) (s)

Data type

integer

Description

  1. gives the maximum width of a single image
  2. is multiplied by Columns to give the actual size

Default

400

Height (pixels)

Section/Field

Height (pixels)

Data type

integer

Description

  1. The maximum height of the images

2. adding 30 pixels for the imagecaptions gives the height of the imagebar.

Default

200

Click-enlarge

Section/Field

Click-enlarge

Data type

checkbox

Description

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

Default

Image quality/ processing

Section/Field

Image quality/ processing

Data type

selection

Description

Default

Effects

Section/Field

Effects

Data type

selection

Description

Default

Frames

Section/Field

Frames

Data type

selection

Description

Default

Caption (s)

Section/Field

Caption (s)

Data type

text

Description

each row gives the caption of an image

Default

Align

Section/Field

Align

Data type

select

Description

not used yet

Default

Alternative Text (s)

Section/Field

Alternative Text (s)

Data type

text

Description

each row gives the alt-value of an image

Default

Title Text (s)

Section/Field

Title Text (s)

Data type

text

Description

each row gives the title-value of an image

Default

Long Description URL (s)

Section/Field

Long Description URL (s)

Data type

text

Description

not used yet

Default

General Options (s)

Section/Field

General Options (s)

Data type

Description

all fields of this section(s) are handles as usual

Default

wraparound

Section/Field

wraparound

Data type

checkbox

Description

Decide whether the images will be shown in an endless loop. This is done with copying all images after the row of images. This can lead to sideeffects: e.g. in conjunction with pmkslimbox the count of images will double.

Default

0

RunForever

Section/Field

RunForever

Data type

Checkbox

Description

Decide whether the scrolling will continue even after the mouse has left the display-area. On default the scrolling will happen just as long as the mouse is over the display-area.

Default

0

Initial moving

Section/Field

Initial moving

Data type

Integer

Description

Gives the initial moving speed. Values beyond 0 will scroll right, above 0 scroll left.

Default

0

uid

a

uid

b

integer

c

this is used in CSS-Ids to identify parts of the scrollbar

so it is possible to include multiple scrollbars in one page

d

Known problems

  • there was one installation which removed the nobr-tag around the images which is needed. switching of xhtml_cleaning stops removing the nobr-tag. On other installations xhtml_cleaning has no effect on the output of this extension. (This should be fixed with version 1.1.0 as with this version the nobr-tag is removed)
  • any Javascript-Errors on the page can stop the correct execution of the javascript of this extension.
  • more information will be gathered on my website http://pi- phi.de/t3v4/demo.html

To-Do list

allign the image-captions according to the options.

Changelog

  • initial release
  • 0.9.1 2007.08.02 overlay-images inserted for showing the possibilities to scroll instead of end-message, more configuration.
  • 0.9.2 2007.08.06 bugfixes:- clean CSS, also if you include two imagescroller into one page (additional open comment)- clean javascript to hide correct arrows if you include two imagescroller into one page (individual ids for each imagescroller-arrows)- clean javascript: correct position at each end of scrollbar.
  • 0.9.3 2007.10.17. and 2007.10.18. bugfixes:error in the javascript for IE
  • 0.9.4 2007.10.21. manual enhancement
  • 0.9.5 2008.02.25 some bugfixes for IE.
  • 0.9.6 2008.03.20 bugfixes for correct image-links
  • 0.9.7 2008.04.03 new options: wraparound and initial moving bugfix: takeover of image-rendering into extension
  • 0.9.8 2008.04.05 clean up: description, icon, additional tt_content- fields just for scrollable images
  • 0.9.9 2008.04.10 new option: noCaption
  • 1.0.0 2009.04.01 new rendering of images: using original as for normal images-content.Bugfix: positioning of caption inside the same link than image to prevent duplicated pictures in pmkslimbox
  • 1.1.0 2010.03.22 manual with new formating (I hope),- removing of nobr-Tag to get a clean XHTML (means: no support for older browsers like IE6)- change of caption-placement inside HTML- new option runforever- move css from tags inline style-parameter to included CSS, which should give more options for styling- new: global defaultvalues for wrapAround, runForever, initialMove- fix: position of additional parameters in content-element (BE-form)

img-2 10