.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


==========
Roundabout
==========

:Author:
      Christopher

:Created:
      2010-12-18T19:57:23

:Changed by:
      Adrian Mot

:Changed:
      2012-01-25T13:48:22.330000000

:Classification:
      pwo_roundabout

:Description:
      forEditors, forAdmins, forBeginners see more: http://www.pwo.ro/en/typo3-cms/extensions/pwo_roundabout.html

:Keywords:
      javascript, widget, roundabout, jquery

:Author:
      Christopher

:Email:
      Chrissitopher@gmx.de

:Language:
      en


.. _img-1-img-2-Roundabout:

|img-1| |img-2| Roundabout
==========================

Extension Key: pwo\_roundabout

Language: en

Version: 0.1.0

Keywords: javascript, widget, roundabout, jquery

Copyright 2006-2011, ProgWork Orange, <info@pwo.ro>

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
-----------------

**`Roundabout 1 <#__RefHeading__5708_1738894311>`_**

**`Introduction 3 <#__RefHeading__5710_1738894311>`_**

`What does it do? 3 <#__RefHeading__463_413120346>`_

`Screenshots 3 <#__RefHeading__465_413120346>`_

**`Installation 4 <#__RefHeading__467_413120346>`_**

`Importing the extension 4 <#__RefHeading__1818_1479249296>`_

**`Administration 5 <#__RefHeading__31511_818911409>`_**

`a. Rotating image folders 6 <#__RefHeading__1868_1479249296>`_

`b. Rotating content elements 7 <#__RefHeading__1870_1479249296>`_

`Adding content elements 8 <#__RefHeading__1896_1479249296>`_

**`Configuration 9 <#__RefHeading__31515_818911409>`_**

`Roundabout settings 9 <#__RefHeading__1923_1479249296>`_

`Javascript inclusion settings 10 <#__RefHeading__1925_1479249296>`_


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

The purpose of the extension is to create a javascript widget in order
to rotate content elements or any images from a selected folder by
inserting a JavaScript code into your page. It uses the Roundabout
jQuery plugin created by Fred LeBlanc:
http://fredhq.com/projects/roundabout/


.. _Screenshots:

Screenshots
^^^^^^^^^^^

Screenshot of the extension using a folder to rotate images within:

|img-3| Screenshot of the extension rotating content elements:

|img-4| 
Installation
------------


.. _Importing-the-extension:

Importing the extension
^^^^^^^^^^^^^^^^^^^^^^^

From the extension manager, select Import Extensions and Upload
extension file directly. When the extension manager prompts for
installing the t3jquery you can ignore the suggestion and continue
with the installation. It will use its own jQuery library if t3jquery
is not available or you do not want to install it.

|img-5| You are now ready to use the extension!


.. _Administration:

Administration
--------------

Insert the Roundabout extension as a content element where you desire.

|img-6| In the bottom of the page select the Roundabout extension:

|img-7| Select the Plugin tab from the bottom of the page. Here you can choose
what kind of content you want to rotate: images (from folder) or
content elements:

|img-8| 
**a. Rotating image folders**
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

In case you want to rotate all images within a folder, please type the
path to that folder in the textbox and the width / height of the
images:

|img-9| If you wish the images to be cropped to best suite your needs you must
type “c” after the height or width in pixels.

For example, if you want the images to be cropped by height at 300px
in order to integrate smoothly in your template, you may type in the
height textbox 300c

|img-10| 
**b. Rotating content elements**
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

In case you want to rotate content elements you must select Content
Elements in the Source field:

|img-11| To select the content elements to rotate, click on the folder icon.

|img-12| 
Adding content elements
^^^^^^^^^^^^^^^^^^^^^^^

When the new window pops up, on the left side you must select the page
where the content element you want to rotate is. Then on the right
side select the + icon to add it to the roundabout.

|img-13| Now all your content elements are added to the Roundabout extension:

|img-14| 
Configuration
-------------


.. _Roundabout-settings:

Roundabout settings
^^^^^^^^^^^^^^^^^^^

To configure the settings of the Roundabout extension click on the
Roundabout settings tab.

|img-15| Please refer to `http://fredhq.com/projects/roundabout/
<http://fredhq.com/projects/roundabout/>`_ to see the settable
options.


.. _Javascript-inclusion-settings:

Javascript inclusion settings
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

To set the inclusion of the “JQuery library” or the “Roundabout
library” you must click on the “Javascript inclusion settings”.

|img-16| Here you can select whether to include or not “own JQuery library” and
“own Roundabout library”.


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left
.. :border: 0
.. :height: 44
.. :id: graphics5
.. :name: graphics5
.. :vspace: 57
.. :width: 161

.. |img-2| image:: img-2.png
.. :align: left

.. |img-3| image:: img-3.jpeg
.. :align: left
.. :border: 0
.. :height: 245
.. :id: graphics1
.. :name: graphics1
.. :width: 553

.. |img-4| image:: img-4.jpeg
.. :align: left
.. :border: 0
.. :height: 311
.. :id: graphics6
.. :name: graphics6
.. :width: 583

.. |img-5| image:: img-5.jpeg
.. :align: left
.. :border: 0
.. :height: 182
.. :id: graphics7
.. :name: graphics7
.. :width: 330

.. |img-6| image:: img-6.jpeg
.. :align: left
.. :border: 0
.. :height: 153
.. :id: graphics8
.. :name: graphics8
.. :width: 257

.. |img-7| image:: img-7.jpeg
.. :align: left
.. :border: 0
.. :height: 135
.. :id: graphics9
.. :name: graphics9
.. :width: 262

.. |img-8| image:: img-8.jpeg
.. :align: left
.. :border: 0
.. :height: 330
.. :id: graphics10
.. :name: graphics10
.. :width: 378

.. |img-9| image:: img-9.jpeg
.. :align: left
.. :border: 0
.. :height: 171
.. :id: graphics11
.. :name: graphics11
.. :width: 194

.. |img-10| image:: img-10.jpeg
.. :align: left
.. :border: 0
.. :height: 263
.. :id: graphics12
.. :name: graphics12
.. :width: 271

.. |img-11| image:: img-11.jpeg
.. :align: left
.. :border: 0
.. :height: 272
.. :id: graphics13
.. :name: graphics13
.. :width: 297

.. |img-12| image:: img-12.jpeg
.. :align: left
.. :border: 0
.. :height: 288
.. :id: graphics14
.. :name: graphics14
.. :width: 367

.. |img-13| image:: img-13.jpeg
.. :align: left
.. :border: 0
.. :height: 293
.. :id: graphics15
.. :name: graphics15
.. :width: 450

.. |img-14| image:: img-14.jpeg
.. :align: left
.. :border: 0
.. :height: 319
.. :id: graphics16
.. :name: graphics16
.. :width: 298

.. |img-15| image:: img-15.jpeg
.. :align: left
.. :border: 0
.. :height: 440
.. :id: graphics2
.. :name: graphics2
.. :width: 362

.. |img-16| image:: img-16.jpeg
.. :align: left
.. :border: 0
.. :height: 169
.. :id: graphics3
.. :name: graphics3
.. :width: 362