To install the extension you have to add the static “Image Cycle” to your Template.
You are able to define the settings just once per template in constant editor.
Constant: | Title: | Description: |
|---|---|---|
plugin.imagecycle.jsLibrary | JS Library | JS-Library to use |
plugin.imagecycle.linkTarget | Internal linktarget | The target where internal links will be opened |
plugin.imagecycle.extlinkTarget | External linktarget | The target where external links will be opened |
plugin.imagecycle.showcaption | Show captions | If set, the captions will be displayed |
plugin.imagecycle.random | Random | Show the images random |
plugin.imagecycle.stopOnMousover | Stop on mouseover | Stop the slideshow when mouse over |
plugin.imagecycle.disableRecursion | Disable Recursion | Disable the root line fetching if there are no images |
plugin.imagecycle.imagewidth | Image Width | The width of the image |
plugin.imagecycle.imageheight | Image Height | The height of the image |
plugin.imagecycle.type | Type of the movement | Values are none, blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom, all |
plugin.imagecycle.transition | Transition | Effect of transition (Quad, Cubic, Quart, Quint, Expo, Circ, Sine, Back, Bounce, Elastic) |
plugin.imagecycle.transitionDir | Transition direction | Direction of transition (In, Out, InOut) |
plugin.imagecycle.transitionDuration | Duration transition | The duration of the transition in milliseconds |
plugin.imagecycle.displayDuration | Duration Display | The display duration of the image in milliseconds |
plugin.imagecycle.delayDuration | Duration of delay | The delay duration for animation begin in milliseconds |
plugin.imagecycle.sync | Simultaneously animation | Animates in and out simultaneously |
plugin.imagecycle.options | Own Options | Enter own options (see http://malsup.com/jquery/cycle/) |
plugin.imagecycle.jQueryNoConflict | jQuery noConflict | Use the noConflict methode |
plugin.imagecycle.file.jQueryLibrary | jQuery Library | Location of the jQuery Lib |
[tsref:(cObject).plugin.imagecycle]
plugin.tx_imagecycle_pi1
Property: | Data type: | Description: | Default: |
|---|---|---|---|
jsLibrary | string | JS-Library to use | jquery |
linkTarget | string | The target where internal links will be opened | _self |
extlinkTarget | string | The target where external links will be opened | _new |
showcaption | boolean | If set, the captions will be displayed | 1 |
random | boolean | Show the images random | 0 |
stopOnMousover | boolean | Stop the slideshow when mouse over | 0 |
disableRecursion | boolean | Disable the root line fetching if there are no images | 0 |
imagewidth | integer | The width of the image | 200c |
imageheight | integer | The height of the image | 200c |
type | string | Values are none, blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom, all | fade |
transition | string | Effect of transition (Quad, Cubic, Quart, Quint, Expo, Circ, Sine, Back, Bounce, Elastic) | Back |
transitionDir | string | Direction of transition (In, Out, InOut) | InOut |
transitionDuration | integer | The duration of the transition in milliseconds | |
displayDuration | integer | The display duration of the image in milliseconds | |
delayDuration | integer | The delay duration for animation begin in milliseconds | |
sync | boolean | Animates in and out simultaneously | 1 |
options | string | Enter own options (see http://malsup.com/jquery/cycle/) | |
jQueryNoConflict | boolean | Use the noConflict methode | 1 |
jQueryLibrary | file | Location of the jQuery Lib | EXT:imagecycle/res/jquery/js/jquery-1.4.1.min.js |
cycle.normal.image | IMAGE | Defines the image for normal view | |
cycle.normal.stdWrap | stdWrap | stdWrap for all images in slideshow | |
cycle.header.* | The same as cycle.normal.* but for header slide | ||
cycle.content.* | The same as cycle.normal.* but for content images |
[tsref:(cObject).plugin.tx_imagecycle_pi1]
Here an example to define the image cycle in TypoScript:
plugin.tx_imagecycle_pi1 {
imagewidth = 700
imageheight = 200c
transitionDuration = 1000
displayDuration = 4000
}
Here an example to add the image cycle to marks:
page.10.marks.HEADER_IMAGE < plugin.tx_imagecycle_pi1
And the Template:
<html>
<head></head>
<body>
<div>###HEADER_IMAGE###</div>
</body>
</html>
You are able to define your own animations with this option (in constant / typo / flexform), some possibilitys can be found here: http://malsup.com/jquery/cycle/adv.html
fx: 'zoom',
speedIn: 2500,
speedOut: 500,
easeIn: 'easeInBounce',
easeOut: 'easeout',
sync: 0,
delay: -4000
OR
fx: 'scrollDown',
speedIn: 2000,
speedOut: 500,
easeIn: 'easeOutBounce',
easeOut: 'easeInBack',
delay: -2000
OR
fx: 'custom',
cssBefore: {
left: 115,
top: 115,
width: 0,
height: 0,
opacity: 1,
zIndex: 1
},
animOut: {
opacity: 0
},
animIn: {
left: 0,
top: 0,
width: 200,
height: 200
},
cssAfter: {
zIndex: 0
},
delay: -3000
If you write something wrong in the “options”-field, the animation will not work! Any movement values will be overwritten by this option, so you have to define all the values by your self!
