.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============== 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 |img-1| |img-2| EXT: ImageFlow - jfimageflow .. _EXT-ImageFlow: EXT: ImageFlow ============== Extension Key: jfimageflow Language: en Keywords: jQuery, ImageFlow, Gallery, Coverflow Copyright 2000-2010, Juergen Furrer, ImageFlow © 2010 by Finn Rudolph < `http://finnrudolph.de/ImageFlow `_ > 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: Table of Contents ----------------- `EXT: ImageFlow 1 <#__RefHeading__1547_642659971>`_ **`Introduction 3 <#__RefHeading__1549_642659971>`_** `What does it do? 3 <#__RefHeading__1551_642659971>`_ `Screenshots 3 <#__RefHeading__1553_642659971>`_ **`Users manual 4 <#__RefHeading__1555_642659971>`_** `Add page content “ImageFlow” 4 <#__RefHeading__1557_642659971>`_ **`Administration 5 <#__RefHeading__1559_642659971>`_** **`Configuration 6 <#__RefHeading__1561_642659971>`_** `Reference 6 <#__RefHeading__1563_642659971>`_ **`Known problems 9 <#__RefHeading__1565_642659971>`_** **`To-Do list 10 <#__RefHeading__1567_642659971>`_** **`ChangeLog 11 <#__RefHeading__1569_642659971>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension gives you the possibility, to add the ImageFlow effect to your website. .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| Demo: `http://typo3.cms-jack.ch/de/erweiterungen/jfimageflow/ `_ .. _Users-manual: Users manual ------------ .. _Add-page-content-ImageFlow: 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 |img-4| .. _Administration: 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: .. ### BEGIN~OF~TABLE ### .. _useSelectInsteadCheckbox: useSelectInsteadCheckbox ^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property useSelectInsteadCheckbox Data type boolean Description If set, most of checkboxes will turn into selectboxes, so you can choose "from TS" Default 1 .. ###### END~OF~TABLE ###### .. _Configuration: Configuration ------------- To install the extension you have to add the static “ImageFlow” to your Template. |img-5| .. _Reference: Reference ^^^^^^^^^ plugin.tx\_ifimageflow\_pi1 .. ### BEGIN~OF~TABLE ### .. _jsInFooter: jsInFooter """""""""" .. container:: table-row Property jsInFooter Data type boolean Description If set, the Javascript will be rendered in Footer Default 0 .. _jsMinify: jsMinify """""""" .. container:: table-row Property jsMinify Data type boolean Description If set, the Javascript will be minified Default 0 .. _jsInline: jsInline """""""" .. container:: table-row 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: cssMinify """"""""" .. container:: table-row Property cssMinify Data type boolean Description If set, the CSS will be minified Default 0 .. _disableRecursion: disableRecursion """""""""""""""" .. container:: table-row Property disableRecursion Data type boolean Description Disable the root line fetching if there are no images Default 0 .. _imageFlowJS: imageFlowJS """"""""""" .. container:: table-row Property imageFlowJS Data type file Description Location of the ImageFlow JS Default EXT:jfimageflow/res/imageflow-1.3.0.pack.js .. _templateFileJS: templateFileJS """""""""""""" .. container:: table-row Property templateFileJS Data type file Description Location of the used template for JS Default EXT:jfimageflow/res/tx\_jfimageflow.js .. _imageFlowCSS: imageFlowCSS """""""""""" .. container:: table-row Property imageFlowCSS Data type file Description Location of the ImageFlow CSS Default EXT:jfimageflow/res/css/dark/style.css .. _imagePath: imagePath """"""""" .. container:: table-row Property imagePath Data type string Description Path to the images relative to the reflect\_.php script Default ../../../../ .. _reflectPath: reflectPath """"""""""" .. container:: table-row Property reflectPath Data type string Description Path to the reflect\_.php script Default typo3conf/ext/jfimageflow/res/ .. _imagewidth: imagewidth """""""""" .. container:: table-row Property imagewidth Data type string Description Width of the images Default 200c .. _imageheight: imageheight """"""""""" .. container:: table-row Property imageheight Data type string Description Height of the images Default 200c .. _scaledwidth: scaledwidth """"""""""" .. container:: table-row Property scaledwidth Data type integer Description Width of the scaled images Default 800 .. _scaledheight: scaledheight """""""""""" .. container:: table-row Property scaledheight Data type integer Description Height of the scaled images Default 600 .. _imageFocusMax: imageFocusMax """"""""""""" .. container:: table-row Property imageFocusMax Data type integer Description Max number of images on each side of the focussed one (default: 4) Default .. _percentLandscape: percentLandscape """""""""""""""" .. container:: table-row Property percentLandscape Data type integer Description Scale landscape format in percent (default: 118) Default .. _percentOther: percentOther """""""""""" .. container:: table-row Property percentOther Data type integer Description Scale portrait and square format in percent (default: 100) Default .. _imageCursor: imageCursor """"""""""" .. container:: table-row Property imageCursor Data type string Description Cursor type for all images (default: default) Default .. _imageScaling: imageScaling """""""""""" .. container:: table-row Property imageScaling Data type boolean Description Toggle image scaling (default: true) Default .. _opacity: opacity """"""" .. container:: table-row Property opacity Data type boolean Description Toggle image opacity (default: false) Default .. _preloadImages: preloadImages """"""""""""" .. container:: table-row Property preloadImages Data type boolean Description Toggle loading bar (false: requires img attributes height and width) (default: true) Default .. _imageFocusM: imageFocusM """"""""""" .. container:: table-row Property imageFocusM Data type string Description Multiplicator for the focussed image size ratio (default: 1.0) Default .. _imagesHeight: imagesHeight """""""""""" .. container:: table-row Property imagesHeight Data type string Description Height of the images div container ratio (default: 0.67) Default .. _imagesM: imagesM """"""" .. container:: table-row Property imagesM Data type string Description Multiplicator for all images ratio (default: 1.0) Default .. _animationSpeed: animationSpeed """""""""""""" .. container:: table-row Property animationSpeed Data type integer Description Animation speed in ms (default: 50) Default .. _slideshowSpeed: slideshowSpeed """""""""""""" .. container:: table-row Property slideshowSpeed Data type integer Description Time between slides in ms (default: 1500) Default .. _captions: captions """""""" .. container:: table-row Property captions Data type boolean Description Toggle captions (default: true) Default .. _circular: circular """""""" .. container:: table-row Property circular Data type boolean Description Toggle circular rotation (default: false) Default .. _slideshowAutoplay: slideshowAutoplay """"""""""""""""" .. container:: table-row Property slideshowAutoplay Data type boolean Description Toggle automatic slideshow play on startup (default: false) Default .. _aspectRatio: aspectRatio """"""""""" .. container:: table-row Property aspectRatio Data type string Description Aspect ratio of the ImageFlow container (width divided by height) (default: 1.964) Default .. _sliderWidth: sliderWidth """"""""""" .. container:: table-row Property sliderWidth Data type integer Description Width of the slider in px (default: 14) Default .. _sliderCursor: sliderCursor """""""""""" .. container:: table-row Property sliderCursor Data type string Description Slider cursor type (default: e-resize) Default .. _buttons: buttons """"""" .. container:: table-row Property buttons Data type boolean Description Toggle navigation buttons (default: false) Default .. _slider: slider """""" .. container:: table-row Property slider Data type boolean Description Toggle slider (default: true) Default .. _slideshow: slideshow """"""""" .. container:: table-row Property slideshow Data type boolean Description Toggle slideshow (default: false) Default .. _scrollbarP: scrollbarP """""""""" .. container:: table-row Property scrollbarP Data type boolean Description Width of the scrollbar ratio (default: 0.6) Default .. _reflectionGET: reflectionGET """"""""""""" .. container:: table-row Property reflectionGET Data type string Description Pass variables via the GET method to the reflect\_.php script (default: ) Default .. _backgroundColor: backgroundColor """"""""""""""" .. container:: table-row Property backgroundColor Data type string Description Backgroundcolor to use for reflection (default: 000000) Default ffffff .. _reflections: reflections """"""""""" .. container:: table-row Property reflections Data type boolean Description Toggle reflections (default: true) Default .. _reflectionPNG: reflectionPNG """"""""""""" .. container:: table-row Property reflectionPNG Data type boolean Description Toggle transparent reflections (default: false) Default .. _reflectionP: reflectionP """"""""""" .. container:: table-row Property reflectionP Data type string Description Height of the reflection of the source image ratio (default: 0.5) Default .. _reflectionStart: reflectionStart """"""""""""""" .. container:: table-row Property reflectionStart Data type integer Description Start persentage of opacity for reflection (default: 80) Default .. _reflectionStop: reflectionStop """""""""""""" .. container:: table-row Property reflectionStop Data type integer Description Stop persentage of opacity for reflection (default: 0) Default .. _xStep: xStep """"" .. container:: table-row Property xStep Data type integer Description Step width on the x-axis in px (default: 150) Default .. _startID: startID """"""" .. container:: table-row Property startID Data type integer Description Image ID to begin with (default: 1) Default .. _glideToStartID: glideToStartID """""""""""""" .. container:: table-row Property glideToStartID Data type boolean Description Toggle glide animation to start ID (default: true) Default .. _startAnimation: startAnimation """""""""""""" .. container:: table-row Property startAnimation Data type boolean Description Animate images moving in from the right on startup (default: false) Default .. _damCaptionFields: damCaptionFields """""""""""""""" .. container:: table-row Property damCaptionFields Data type string Description Comma separated string with tx\_dam fields Default caption,title .. _damDescFields: damDescFields """"""""""""" .. container:: table-row Property damDescFields Data type string Description Comma separated string with tx\_dam fields Default description .. _damHrefFields: damHrefFields """"""""""""" .. container:: table-row Property damHrefFields Data type string Description Witch field will be used for href in tx\_dam Default tx\_jfdam\_link .. _options: options """"""" .. container:: table-row Property options Data type string Description Set your additional options to the ImageFlow Default .. _optionsOverride: optionsOverride """"""""""""""" .. container:: table-row Property optionsOverride Data type boolean Description If set, the options field will override all other options Default .. _image-normal-image: image.normal.image """""""""""""""""" .. container:: table-row Property image.normal.image Data type IMAGE Description Defines the image for normal view Default .. _image-normal-stdWrap: image.normal.stdWrap """""""""""""""""""" .. container:: table-row Property image.normal.stdWrap Data type stdWrap Description stdWrap for all images in slideshow Default .. _image-normal-description: image.normal.description """""""""""""""""""""""" .. container:: table-row Property image.normal.description Data type cObject Description Defines the look of the description of the image Default .. _image-normal-descriptionWrap: image.normal.descriptionWrap """""""""""""""""""""""""""" .. container:: table-row Property image.normal.descriptionWrap Data type stdWrap Description stdWrap around all descriptions Default .. ###### END~OF~TABLE ###### [tsref:(cObject).plugin.tx\_ifimageflow\_pi1] .. _generated: ((generated)) """"""""""""" .. _Example: 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: Known problems -------------- Report bugs at `http://forge.typo3.org/projects/show/extension- jfimageflow `_ .. _To-Do-list: To-Do list ---------- Report features at `http://forge.typo3.org/projects/show/extension- jfimageflow `_ .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row Version 0.0.1 Changes Initial development .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row Version 0.0.2 Changes Fix the ratio max value from 2 to 5 / Fix description-key in onBefore and onAfter .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 Changes Add JS-Template (#26836) .. _0-1-1: 0.1.1 ^^^^^ .. container:: table-row Version 0.1.1 Changes Fix description-key in TS .. _0-1-2: 0.1.2 ^^^^^ .. container:: table-row Version 0.1.2 Changes Fix javascript for description when circular is active .. _0-1-3: 0.1.3 ^^^^^ .. container:: table-row Version 0.1.3 Changes Fix the dark theme .. _0-1-4: 0.1.4 ^^^^^ .. container:: table-row Version 0.1.4 Changes Convert linefeed to Unix .. _0-1-5: 0.1.5 ^^^^^ .. container:: table-row Version 0.1.5 Changes Use the new color picker of jftcaforms / Use the new pagerenderer of imagecarousel 1.8.4 .. _0-2-0: 0.2.0 ^^^^^ .. container:: table-row Version 0.2.0 Changes Javascript bugfix for iPad / iPhone and circle / Add type header (#10488) .. _0-2-1: 0.2.1 ^^^^^ .. container:: table-row Version 0.2.1 Changes Fix the sys\_language\_uid (#32661) .. _0-2-2: 0.2.2 ^^^^^ .. container:: table-row 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: 0.2.3 ^^^^^ .. container:: table-row Version 0.2.3 Changes Fix t3lib\_utility\_VersionNumber::convertVersionNumberToInteger for older typo3 versions .. _0-3-0: 0.3.0 ^^^^^ .. container:: table-row Version 0.3.0 Changes Add reflectionStart and Stop to control the reflection opacity .. _0-3-1: 0.3.1 ^^^^^ .. container:: table-row Version 0.3.1 Changes Fix compatibility for Typo3 V6 (#41010) .. _0-3-2: 0.3.2 ^^^^^ .. container:: table-row Version 0.3.2 Changes Fix “Add new” in backend .. _0-3-3: 0.3.3 ^^^^^ .. container:: table-row Version 0.3.3 Changes Improve the documentation (#40038 / #38862) / Fix lConf and conf vars in pi1 .. _0-3-4: 0.3.4 ^^^^^ .. container:: table-row Version 0.3.4 Changes Small Bugfix (No Images are shown) .. _0-3-5: 0.3.5 ^^^^^ .. container:: table-row Version 0.3.5 Changes Add compatibility for TYPO3 6.2 .. ###### END~OF~TABLE ###### |img-2| 12 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 299 .. :id: Grafik1 .. :name: Grafik1 .. :width: 582 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 489 .. :id: Grafik4 .. :name: Grafik4 .. :width: 429 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 171 .. :id: Grafik3 .. :name: Grafik3 .. :width: 432