.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =================== 360° image rotation =================== :Created: 2010-02-18T17:33:18 :Changed by: Raphael Zschorsch :Changed: 2010-11-21T21:08:03.650000000 :Classification: rzthreesixty :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: 360°, threesixty, jQuery :Author: Raphael Zschorsch :Email: rafu1987@gmail.com :Info 4: :Language: en |img-1| |img-2| 360° image rotation - rzthreesixty .. _360-image-rotation: 360° image rotation =================== Extension Key: rzthreesixty Language: en Keywords: 360°, threesixty, jQuery Copyright 2000-2010, Raphael Zschorsch, 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 ----------------- `360° image rotation 1 <#__RefHeading__1228_189230786>`_ **`Introduction 3 <#__RefHeading__1230_189230786>`_** `What does it do? 3 <#__RefHeading__1232_189230786>`_ `Screenshots 3 <#__RefHeading__1234_189230786>`_ `Thanks to 3 <#__RefHeading__1508_189230786>`_ **`Users manual 4 <#__RefHeading__1236_189230786>`_** **`Configuration 5 <#__RefHeading__1244_189230786>`_** `FlexForms 5 <#__RefHeading__1246_189230786>`_ `Reference 5 <#__RefHeading__1248_189230786>`_ **`Known problems 6 <#__RefHeading__1252_189230786>`_** **`To-Do list 7 <#__RefHeading__1254_189230786>`_** **`ChangeLog 8 <#__RefHeading__1256_189230786>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ The extension include a 360° image rotator based on jQuery. You can find a working example of the plugin on: `http://www.mathieusavard.info/threesixty/demo.html `_ .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| This is a rough screenshot of the frontend output, but to see how it really works, just go to the original jQuery plugin. There will be more screenshots along the way in this manual to show you some of the backend screens, don't worry ;) .. _Thanks-to: Thanks to ^^^^^^^^^ - `Mathieu Dumais-Savard `_ for the original jQuery plugin - Powered by: `http://www.mark-up.de `_ .. _Users-manual: Users manual ------------ - Just install the extension through the extension manager like every other extension. - Go to your template and include the static TypoScript which comes with the extension |img-4| - That's basically it – just go to a page and include the plugin .. _Configuration: Configuration ------------- Most of the configuration is done via FlexForms – maybe this will change in the near future and there will be more settings in the constant editor, but for now the configuration in FlexForms should do the trick. .. _FlexForms: FlexForms ^^^^^^^^^ - |img-5| |img-6| Here you can add your images - You can define a width for the images. The images will then be processed via TypoScript, so if you define a lot of images, this could take some time in the Frontend (only the first time, because the images will be already generated). - Define a method for the plugin. Available options are “Click” and “Mouseover”. - How many cicles the rotation should have. - Define the direction. Available options are “Forward” and “Backwards”. - Define the sensibility to adjust the rotation speed. .. _Reference: Reference ^^^^^^^^^ plugin.rzthreesixty properties: TS Constants .. ### BEGIN~OF~TABLE ### .. _enableGlobal: enableGlobal """""""""""" .. container:: table-row Property enableGlobal Data type boolean Description Enable jQuery globally. If you already defined jQuery Plugins in your site, just set this to “1” and rzthreesixty won't include the jQuery JavaScript. Default 0 .. _noConflict: noConflict """""""""" .. container:: table-row Property noConflict Data type boolean Description Set to “1” if you want to add the noConflict mode. (For example if you use jQuery and Mootools on your site.) Default 0 .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- - None so far - Please report bugs: `http://forge.typo3.org/projects/extension- rzthreesixty `_ .. _To-Do-list: To-Do list ---------- - Contact me :) - I'll work on the extension, as my time allows me... - Feature requests: `http://forge.typo3.org/projects/extension- rzthreesixty `_ .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row Version 0.0.1 Changes Initial upload .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row Version 0.0.2 Changes Added jQuery noConflict, added jQuery 1.4.3, bugfixing .. _0-0-3: 0.0.3 ^^^^^ .. container:: table-row Version 0.0.3 Changes Bugfixing .. _0-0-4: 0.0.4 ^^^^^ .. container:: table-row Version 0.0.4 Changes Bugfixing jQuery.noConflict(); .. ###### END~OF~TABLE ###### |img-2| 9 .. ######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.jpeg .. :align: left .. :border: 0 .. :height: 351 .. :id: Grafik1 .. :name: Grafik1 .. :width: 474 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 157 .. :id: Grafik3 .. :name: Grafik3 .. :width: 468 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 315 .. :id: Grafik4 .. :name: Grafik4 .. :width: 415 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 316 .. :id: Grafik5 .. :name: Grafik5 .. :width: 271