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 |
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¶
`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.
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)¶
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!
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
Property
maxSpeed
Data type
0 < integer < maxWidth/10
Description
maximum 'speed' (number of pixel) the imagebar is scrolled in a cycle
Default
20
Property
noArrows
Data type
boolean
Description
use no arrow-images
Default
0
Property
rightArr
Data type
file
Description
image used as right arrow to show, that scrolling right is possible
Default
default-image from extension
Property
leftArr
Data type
file
Description
same as rightArr for the left side
Default
default-image from extension
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
Property
wrapAround
Data type
boolean
Description
global default-value for elementspecific value (see beyond)
Default
0
Property
runForever
Data type
boolean
Description
global default-value for elementspecific value (see beyond)
Default
0
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:
Section/Field
header (s)
Data type
Description
all fields of this section are handled as usual
Default
Section/Field
Images (s)
Data type
list of images
Description
list of images to be shown
Default
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
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
Section/Field
No rows
Data type
checkbox
Description
not used yet
Default
Section/Field
Border
Data type
checkbox
Description
not used yet
Default
Section/Field
Width (pixels) (s)
Data type
integer
Description
- gives the maximum width of a single image
- is multiplied by Columns to give the actual size
Default
400
Section/Field
Height (pixels)
Data type
integer
Description
- The maximum height of the images
2. adding 30 pixels for the imagecaptions gives the height of the imagebar.
Default
200
Section/Field
Link
Data type
string
Description
this can be a list of links, separated by commata
Default
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
Section/Field
Image quality/ processing
Data type
selection
Description
Default
Section/Field
Effects
Data type
selection
Description
Default
Section/Field
Frames
Data type
selection
Description
Default
Section/Field
Align
Data type
select
Description
not used yet
Default
Section/Field
Alternative Text (s)
Data type
text
Description
each row gives the alt-value of an image
Default
Section/Field
Title Text (s)
Data type
text
Description
each row gives the title-value of an image
Default
Section/Field
Long Description URL (s)
Data type
text
Description
not used yet
Default
Section/Field
General Options (s)
Data type
Description
all fields of this section(s) are handles as usual
Default
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
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
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
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)
10