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: ImageFlow¶

Created:	2010-02-18T17:33:18
Changed by:	Jürgen Furrer
Changed:	2014-03-18T20:21:11
Classification:	jfimageflow
Keywords:	jQuery, ImageFlow, Gallery, Coverflow
Author:	Juergen Furrer
Email:	juergen.furrer@gmail.com
Info 4:
Language:	en

EXT: ImageFlow - jfimageflow

EXT: ImageFlow¶

Extension Key: jfimageflow

Language: en

Keywords: jQuery, ImageFlow, Gallery, Coverflow

Please note for commercial websites: http://finnrudolph.de/ImageFlow/Download

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: ImageFlow 1

`Introduction 3 <#__RefHeading__1549_642659971>`_

What does it do? 3

Screenshots 3

`Users manual 4 <#__RefHeading__1555_642659971>`_

Add page content “ImageFlow” 4

`Administration 5 <#__RefHeading__1559_642659971>`_

`Configuration 6 <#__RefHeading__1561_642659971>`_

Reference 6

`Known problems 9 <#__RefHeading__1565_642659971>`_

`To-Do list 10 <#__RefHeading__1567_642659971>`_

`ChangeLog 11 <#__RefHeading__1569_642659971>`_

Introduction¶

What does it do?¶

This extension gives you the possibility, to add the ImageFlow effect to your website.

Screenshots¶

Demo:

http://typo3.cms-jack.ch/de/erweiterungen/jfimageflow/

Users manual¶

Add page content “ImageFlow”¶

Go to Web → Page

Choose the page to add the new Cloud-Zoom

Add new content

Choose Plugin → “ImageFlow”

Go to tab “Plugin”

Insert images to the field “Images”

Insert links into “Image links” (one caption per line)

Define the Captions in “Image captions” (one caption per line)

Add one content-element per image in “Image descriptions”

Define the configuration of the images in tab “Image”

Define the movement of the flow in tab “Movement”

and so on...

The options will be come later in this documentation

Administration¶

This extension uses components of EXT:imagecarousel and EXT:jftcaforms you have to install this extension first!

You are able to change the following options in configuration:

useSelectInsteadCheckbox¶

Property

useSelectInsteadCheckbox

Data type

boolean

Description

If set, most of checkboxes will turn into selectboxes, so you can choose "from TS"

Default

1

Configuration¶

To install the extension you have to add the static “ImageFlow” to your Template.

Reference¶

plugin.tx_ifimageflow_pi1

jsInFooter¶

Property

jsInFooter

Data type

boolean

Description

If set, the Javascript will be rendered in Footer

Default

0

jsMinify¶

Property

jsMinify

Data type

boolean

Description

If set, the Javascript will be minified

Default

0

jsInline¶

Property

jsInline

Data type

boolean

Description

If set, the Javascript will be inserted into the inlineJS, after this, its possible to put it into externel files (config.removeDefaultJS = external)

Default

0

cssMinify¶

Property

cssMinify

Data type

boolean

Description

If set, the CSS will be minified

Default

0

disableRecursion¶

Property

disableRecursion

Data type

boolean

Description

Disable the root line fetching if there are no images

Default

0

imageFlowJS¶

Property

imageFlowJS

Data type

file

Description

Location of the ImageFlow JS

Default

EXT:jfimageflow/res/imageflow-1.3.0.pack.js

templateFileJS¶

Property

templateFileJS

Data type

file

Description

Location of the used template for JS

Default

EXT:jfimageflow/res/tx_jfimageflow.js

imageFlowCSS¶

Property

imageFlowCSS

Data type

file

Description

Location of the ImageFlow CSS

Default

EXT:jfimageflow/res/css/dark/style.css

imagePath¶

Property

imagePath

Data type

string

Description

Path to the images relative to the reflect_.php script

Default

../../../../

reflectPath¶

Property

reflectPath

Data type

string

Description

Path to the reflect_.php script

Default

typo3conf/ext/jfimageflow/res/

imagewidth¶

Property

imagewidth

Data type

string

Description

Width of the images

Default

200c

imageheight¶

Property

imageheight

Data type

string

Description

Height of the images

Default

200c

scaledwidth¶

Property

scaledwidth

Data type

integer

Description

Width of the scaled images

Default

800

scaledheight¶

Property

scaledheight

Data type

integer

Description

Height of the scaled images

Default

600

imageFocusMax¶

Property

imageFocusMax

Data type

integer

Description

Max number of images on each side of the focussed one (default: 4)

Default

percentLandscape¶

Property

percentLandscape

Data type

integer

Description

Scale landscape format in percent (default: 118)

Default

percentOther¶

Property

percentOther

Data type

integer

Description

Scale portrait and square format in percent (default: 100)

Default

imageCursor¶

Property

imageCursor

Data type

string

Description

Cursor type for all images (default: default)

Default

imageScaling¶

Property

imageScaling

Data type

boolean

Description

Toggle image scaling (default: true)

Default

opacity¶

Property

opacity

Data type

boolean

Description

Toggle image opacity (default: false)

Default

preloadImages¶

Property

preloadImages

Data type

boolean

Description

Toggle loading bar (false: requires img attributes height and width) (default: true)

Default

imageFocusM¶

Property

imageFocusM

Data type

string

Description

Multiplicator for the focussed image size ratio (default: 1.0)

Default

imagesHeight¶

Property

imagesHeight

Data type

string

Description

Height of the images div container ratio (default: 0.67)

Default

imagesM¶

Property

imagesM

Data type

string

Description

Multiplicator for all images ratio (default: 1.0)

Default

animationSpeed¶

Property

animationSpeed

Data type

integer

Description

Animation speed in ms (default: 50)

Default

slideshowSpeed¶

Property

slideshowSpeed

Data type

integer

Description

Time between slides in ms (default: 1500)

Default

captions¶

Property

captions

Data type

boolean

Description

Toggle captions (default: true)

Default

circular¶

Property

circular

Data type

boolean

Description

Toggle circular rotation (default: false)

Default

slideshowAutoplay¶

Property

slideshowAutoplay

Data type

boolean

Description

Toggle automatic slideshow play on startup (default: false)

Default

aspectRatio¶

Property

aspectRatio

Data type

string

Description

Aspect ratio of the ImageFlow container (width divided by height) (default: 1.964)

Default

sliderWidth¶

Property

sliderWidth

Data type

integer

Description

Width of the slider in px (default: 14)

Default

sliderCursor¶

Property

sliderCursor

Data type

string

Description

Slider cursor type (default: e-resize)

Default

buttons¶

Property

buttons

Data type

boolean

Description

Toggle navigation buttons (default: false)

Default

slider¶

Property

slider

Data type

boolean

Description

Toggle slider (default: true)

Default

slideshow¶

Property

slideshow

Data type

boolean

Description

Toggle slideshow (default: false)

Default

scrollbarP¶

Property

scrollbarP

Data type

boolean

Description

Width of the scrollbar ratio (default: 0.6)

Default

reflectionGET¶

Property

reflectionGET

Data type

string

Description

Pass variables via the GET method to the reflect_.php script (default: )

Default

backgroundColor¶

Property

backgroundColor

Data type

string

Description

Backgroundcolor to use for reflection (default: 000000)

Default

ffffff

reflections¶

Property

reflections

Data type

boolean

Description

Toggle reflections (default: true)

Default

reflectionPNG¶

Property

reflectionPNG

Data type

boolean

Description

Toggle transparent reflections (default: false)

Default

reflectionP¶

Property

reflectionP

Data type

string

Description

Height of the reflection of the source image ratio (default: 0.5)

Default

reflectionStart¶

Property

reflectionStart

Data type

integer

Description

Start persentage of opacity for reflection (default: 80)

Default

reflectionStop¶

Property

reflectionStop

Data type

integer

Description

Stop persentage of opacity for reflection (default: 0)

Default

xStep¶

Property

xStep

Data type

integer

Description

Step width on the x-axis in px (default: 150)

Default

startID¶

Property

startID

Data type

integer

Description

Image ID to begin with (default: 1)

Default

glideToStartID¶

Property

glideToStartID

Data type

boolean

Description

Toggle glide animation to start ID (default: true)

Default

startAnimation¶

Property

startAnimation

Data type

boolean

Description

Animate images moving in from the right on startup (default: false)

Default

damCaptionFields¶

Property

damCaptionFields

Data type

string

Description

Comma separated string with tx_dam fields

Default

caption,title

damDescFields¶

Property

damDescFields

Data type

string

Description

Comma separated string with tx_dam fields

Default

description

damHrefFields¶

Property

damHrefFields

Data type

string

Description

Witch field will be used for href in tx_dam

Default

tx_jfdam_link

options¶

Property

options

Data type

string

Description

Set your additional options to the ImageFlow

Default

optionsOverride¶

Property

optionsOverride

Data type

boolean

Description

If set, the options field will override all other options

Default

image.normal.image¶

Property

image.normal.image

Data type

IMAGE

Description

Defines the image for normal view

Default

image.normal.stdWrap¶

Property

image.normal.stdWrap

Data type

stdWrap

Description

stdWrap for all images in slideshow

Default

image.normal.description¶

Property

image.normal.description

Data type

cObject

Description

Defines the look of the description of the image

Default

image.normal.descriptionWrap¶

Property

image.normal.descriptionWrap

Data type

stdWrap

Description

stdWrap around all descriptions

Default

[tsref:(cObject).plugin.tx_ifimageflow_pi1]

((generated))¶

Example¶

If you like to display the description when image is changed you should add the following script (only if jQuery is added):

onBefore: function(id){
  jQuery('#'+this.ImageFlowID+'-desc').find('.description').hide();
  jQuery('#'+this.ImageFlowID+'-'+id).show();
}

If you lie to use a lightbox to open the images, here are some examples:

Colorbox (EXT:rzcolorbox):

onClick: function(){
  jQuery.colorbox({href:this.url});
}

Slimbox (EXT:perfectlightbox):

onClick: function(){
  jQuery.slimbox(this.url, this.title);
}

Fancybox (EXT:jq_fancybox):

onClick: function(){
  jQuery.fancybox({
    'padding': 0,
    'href': this.url,
    'title': 'Lorem ipsum dolor sit amet',
    'transitionIn': 'elastic',
    'transitionOut': 'elastic'
  });
}

Known problems¶

Report bugs at http://forge.typo3.org/projects/show/extension- jfimageflow

To-Do list¶

Report features at http://forge.typo3.org/projects/show/extension- jfimageflow

ChangeLog¶

0.0.1¶

Version

0.0.1

Changes

Initial development

0.0.2¶

Version

0.0.2

Changes

Fix the ratio max value from 2 to 5 / Fix description-key in onBefore and onAfter

0.1.0¶

Version

0.1.0

Changes

Add JS-Template (#26836)

0.1.1¶

Version

0.1.1

Changes

Fix description-key in TS

0.1.2¶

Version

0.1.2

Changes

Fix javascript for description when circular is active

0.1.3¶

Version

0.1.3

Changes

Fix the dark theme

0.1.4¶

Version

0.1.4

Changes

Convert linefeed to Unix

0.1.5¶

Version

0.1.5

Changes

Use the new color picker of jftcaforms / Use the new pagerenderer of imagecarousel 1.8.4

0.2.0¶

Version

0.2.0

Changes

Javascript bugfix for iPad / iPhone and circle / Add type header (#10488)

0.2.1¶

Version

0.2.1

Changes

Fix the sys_language_uid (#32661)

0.2.2¶

Version

0.2.2

Changes

Remove deprecated methods (#36599) / Fix the url for typo3 4.7.0 (use data-url instead of longdesc)

0.2.3¶

Version

0.2.3

Changes

Fix t3lib_utility_VersionNumber::convertVersionNumberToInteger for older typo3 versions

0.3.0¶

Version

0.3.0

Changes

Add reflectionStart and Stop to control the reflection opacity

0.3.1¶

Version

0.3.1

Changes

Fix compatibility for Typo3 V6 (#41010)

0.3.2¶

Version

0.3.2

Changes

Fix “Add new” in backend

0.3.3¶

Version

0.3.3

Changes

Improve the documentation (#40038 / #38862) / Fix lConf and conf vars in pi1

0.3.4¶

Version

0.3.4

Changes

Small Bugfix (No Images are shown)

0.3.5¶

Version

0.3.5

Changes

Add compatibility for TYPO3 6.2

12