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.

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

Extension Key: rzthreesixty

Language: en

Keywords: 360°, threesixty, jQuery

Copyright 2000-2010, Raphael Zschorsch, <rafu1987@gmail.com>

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

360° image rotation 1

`Introduction 3 <#__RefHeading__1230_189230786>`_

What does it do? 3

Screenshots 3

Thanks to 3

`Users manual 4 <#__RefHeading__1236_189230786>`_

`Configuration 5 <#__RefHeading__1244_189230786>`_

FlexForms 5

Reference 5

`Known problems 6 <#__RefHeading__1252_189230786>`_

`To-Do list 7 <#__RefHeading__1254_189230786>`_

`ChangeLog 8 <#__RefHeading__1256_189230786>`_

Introduction

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

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

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

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

  • 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

plugin.rzthreesixty properties: TS Constants

enableGlobal

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

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

Known problems

To-Do list

ChangeLog

0.0.1

Version

0.0.1

Changes

Initial upload

0.0.2

Version

0.0.2

Changes

Added jQuery noConflict, added jQuery 1.4.3, bugfixing

0.0.3

Version

0.0.3

Changes

Bugfixing

0.0.4

Version

0.0.4

Changes

Bugfixing jQuery.noConflict();

img-2 9