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: Kiwi Slider

Author:Paul Lunow
Created:2002-11-01T00:32:00
Changed by:Matthias Haack
Changed:2008-09-04T22:04:39
Classification:kiwi_slider
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:jquery, slider, coda
Email:paul@kiwi-service.de
Info 1:
Info 2:
Info 3:
Info 4:
empty:
language (EN, DE, FR, NL, DK, ES, DK, ... ):
 EN

img-1 img-2 EXT: Kiwi Slider - kiwi_slider

EXT: Kiwi Slider

extensionkey: kiwi_slider

keywords: jquery, slider, coda

language: EN

Copyright 2000-2008, , <paul@kiwi-service.de>

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: Kiwi Slider 1

1 Introduction 3

1.1. What does it do? 3

1.2. Screenshots 3

2 Users manual 4

2.1. Installation 4

2.2. Create record 4

2.3. FAQ 4

3 Administration 5

3.1. FAQ 5

4 Configuration 6

4.1. FAQ 6

4.2. Reference 6

5 Known problems 7

6 To-Do list 8

7 ChangeLog 9

Introduction

What does it do?

Shows the content of any page

Allows selection of variable number of pages

Customization of layout by CSS and TypoScript

Screenshots

  • Default design of the slider

    img-3

  • Pages and content

    img-4

  • Backend view of the plugin

img-5

Users manual

WARNING !! The extension by default contains the jQuery library and the other JavaScript files that are vital for the functionality of the Slider. Therefore make sure that the jQuery library ore one of the other files have not yet been included in your TYPO3 project .

The included files are the followings (see: http://jqueryfordesigners.com/coda-slider-effect/ ):

jQuery

scrollTo (jquery.scrollTo-1.3.3.js)

localScroll (localscroll-1.2.6.js)

serialScroll (serialScroll-1.2.1.js)

If you have for any reason already included one or more of theses files in your TYPO3 project, please deactivate the inclusion of this or these files (see chapter 4).

The JavaScript file, that initializes the slider effect ( codaslider.js) , is integrated in class.tx_kiwislider_pi1.php. If - for any reason - you want to use your own file, you can set the path to this file by TypoScript (see chapter 4).

Installation

  • Install the extension with the extension manager.
  • Update database.

Create record

  • Create new record “General Plugin”.
  • Under “Plugin” choose “Kiwi Slider”.
  • Select the pages the content of which is to been shown. The plugin shows the page title as navigation title in the slider. Each element to be shown in the slider has to be created as one page (see chapter 1.2, screen 2). One or more of the records of this page are shown in the slider (see chapter 4).

FAQ

  • Q.: I followed the instruction, but the slider does not work.
  • A.: Make sure that jQuery library is not been included before (see WARNING above).

Administration

No administration necessary.

FAQ

none

Configuration

  • Width and height of the slider can be set by TypoScript. By default the size is defined by CSS .
  • You can set the number of records of the chosen pages that are shown in the slider.

The speed of the slider effect can be set by TypoScript.

You can deactivate the inclusion of any of the 5 vital JavaScript files (This can be necessary if you have already included one or more files in your TYPO3 installation. See chapter 2).

  • CSS rules are set by Typoscript (_CSS_DEFAULT_STYLE). In order to customize the layout of your slider, copy the CSS rules in your fileadmin folder and empty the default styles via TypoScript . Be careful in modifying the rules as some CSS rules are vital for the functionality of the slider.
  • The left and right arrow can be modified by TypoScript. You can set the path to your own graphics. You can also hide the arrows.

FAQ

  • Q.: I set the width of the slider, but nothing happened.
  • A.: You have to set both, width and height in order to make it work.

Reference

plugin.tx_kiwislider_pi1

width

Property

width

Data type

int

Description

Set the width of the slider.

Example:

plugin.tx_kiwislider_pi1.width = 400

Default

not set

height

Property

height

Data type

int

Description

Set the height of the slider.

Example:

plugin.tx_kiwislider_pi1.height = 250

Default

not set

showRecords

Property

showRecords

Data type

int

Description

Set the number of page records to show in the slider.

If not set, the slider shows all.

Default

not set

duration

Property

duration

Data type

int

Description

Speed of the slider effect

Default

500

include.jQuery

Property

include.jQuery

Data type

boolean

Description

Includes the jQuery library

Example (to exclude jQuery):

plugin.tx_kiwislider_pi1.include.jQuery = 0

or:

plugin.tx_kiwislider_pi1.include.jQuery >

Default

1

include.scrollTo

Property

include.scrollTo

Data type

boolean

Description

Includes the scrollTo plugin

Default

1

Include.localScroll

Property

Include.localScroll

Data type

boolean

Description

Includes the localScroll plugin

Default

1

include.serialScroll

Property

include.serialScroll

Data type

boolean

Description

Includes the serialScroll plugin

Default

1

pathToCodasliderjs

Property

pathToCodasliderjs

Data type

resource

Description

The path to your own codaslider.js file in order to make any changes there.

Example:

plugin.tx_kiwislider_pi1.pathToCodasliderjs = fileadmin/js/codaslider.js

Default

_CSS_DEFAULT_STYLE

Property

_CSS_DEFAULT_STYLE

Data type

string

Description

CSS rules.

In order to use your own style empty the default styles:

_CSS_DEFAULT_STYLE >

Default

arrows.left

Property

arrows.left

Data type

resource

Description

Path to the file of the left arrow

Default

EXT:kiwi_slider/pi1/res/scroll_left.png

arrows.right

Property

arrows.right

Data type

resource

Description

Path to the file of the right arrow

Default

EXT:kiwi_slider/pi1/res/scroll_right.png

arrows.hide

Property

arrows.hide

Data type

boolean

Description

To hide the arrows:

Example:

plugin.tx_kiwislider_pi1.arrows.hide = 1

Default

not set

Known problems

None so far.

To-Do list

ChangeLog

  • Version 1.1.0 More configuration via typoscript, nicer integration of JavaScriptfiles
  • Version 1.0.1 some very small bugfixes
  • Version 1.0.0 initial version

For more informations visit

http://www.interaktionsdesigner.de/2008/08/16/typo3-extension-kiwi- slider/ (de)

9