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: Readable name of your extension

Author:Helmut Hackbarth
Created:2010-12-27T18:04:44.140000000
Changed by:Helmut
Changed:2012-01-26T15:46:59.420000000
Classification:extensionkey
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:keywords comma-separated
Author:Author Name
Email:your@email.com
Info 4:
Language:en

img-1 img-2 Slider for tt_news- t3s_newssliderEXT: Slider for tt_news

EXT: Slider for tt_news

Extension Key: t3s_newsslider

Language: en

Keywords: slider, slideshow, jquery, tt_news, Ken Burns

Copyright 2012, Helmut Hackbarth,< info@t3solution.de >

jQuery © 2010 John Resig, http://jquery.org/

jQuery Easing © 2008 George McGinley Smith, http://gsgd.co.uk/sandbox/jquery/easing/

CrossSlide jQuery plugin © 2007  20010 Tobia Conforto, http://tobia.github.com/CrossSlide/

s3Slider - Developped By: Boban Karišik -> http://www.serie3.info/

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 fromwww.typo3.org

Table of Contents

EXT: Slider for tt_news 1

`Introduction 3 <#__RefHeading__2661_1602935418>`_

What does it do? 3

Screenshots 3

`Users manual 4 <#__RefHeading__299_1527964297>`_

Follow these steps to use this extension: 4

`Administration 5 <#__RefHeading__2669_1602935418>`_

`Configuration 6 <#__RefHeading__2671_1602935418>`_

Reference 6

`Known problems 8 <#__RefHeading__2673_1602935418>`_

`To-Do list 9 <#__RefHeading__2675_1602935418>`_

Introduction

What does it do?

Extends tt_news to display a slider with CrossSlide (jQuery plugin with Ken Burns effect).

For more information see http://tobia.github.com/CrossSlide/

You must have installed tt_news!

Users manual

Follow these steps to use this extension:

You should have tt_news installed and configured on your TYPO3 installation!

  • Install “t3s_newsslider” with the extension manager.
  • After the extension manager created the new database fields for tt_news you should see a page with the main configuration options. Here you can configure some basic options (mostly JS).
  • Include the static TS.
  • Open a CE with a tt_news-plugin and use “CROSS_SLIDER”, “S3_SLIDER” or “SIMPLE_TICKER” under “What to display”.
  • You have to use the marker from the template slider.html.
  • Set the options for the slider in the Constant Editor or by TS.
  • You can also set some options for each image if using the “Ken Burns effect” in the news-records.

Administration

To make the new fields (tx_t3snewsslider_from, tx_t3snewsslider_to, tx_t3snewsslider_time) visible for non-admin users it is required to add this field in the section “allowed exclude fields” in the BE-group where the user is member of.

If you want to hide a new field only in certain folders/pages with news records, this is possible with page TS-config.

Example:

The following line will remove the new field “tx_t3snewsslider_time” from all tt_news records under the page with this in TS-config:

TCEFORM.tt_news.tx_t3snewsslider_time.disabled = 1

You'll have the following options in the Extension-Manger / Configuration:

img-4

Configuration

If you want to modify some global values of the TypoScript configuration,used for the news-slider display, take a look at the "Constant Editor".

Reference

TS configuration

plugin.tt_news.displaySlider

General Settings
sliderWidth

Property

sliderWidth

Data type

int

Description

Slider Width: Width of the slider in px (Simple-Ticker - only by own css-style).

Default

700

sliderHeight

Property

sliderHeight

Data type

int

Description

Height of the slider in px (Simple-Ticker - only by own css-style).

Default

300

defaultImage

Property

defaultImage

Data type

resource

Description

Is used, if the news-record has no image.

Default

default.jpg

css

Property

css

Data type

boolean

Description

Disable/enable CSS: Use your own CSS-Style.

Default

plugin.tt_news.displaySlider.crossslider

CrossSlider Settings
effect

Property

effect

Data type

int

Description

For best results if using "Slide and cross-fade" use an even number of images. If using the Ken Burn effect, enter cross-fades and time seconds for each image in the news-items. For more information see http://tobia.github.com/CrossSlide/

1 = Static cross-fade

2 = Slide and cross-fade

3 = Ken Burns effect

4 = Ken Burns variant

Default

1

caption

Property

caption

Data type

int/string

Description

Choose the desired field for the caption.

0=disable,title,imagecaption,imagealttext,imagetitletext,short,bodytex t

Default

0

easingEffect

Property

easingEffect

Data type

string

Description

Choose the desired jQuery-Easing-Effect if using "Ken Burns variant":

easeInOutQuad,easeInOutCubic,easeInOutQuart,easeInOutQuint,easeInOutSi ne,easeInOutExpo,easeInOutCirc,easeInOutElastic,easeInOutBack,easeInOu tBounce

Default

easeInOutQuad

fromDefault

Property

fromDefault

Data type

string

Description

If using "Ken Burns effect" or "Ken Burns variant". Enter cross-fades and time seconds here or for each image in the news-records. For more information see http://tobia.github.com/CrossSlide/

Default

40% 100% .8x

toDefault

Property

toDefault

Data type

string

Description

If using "Ken Burns effect" or "Ken Burns variant".

Default

80% 20% 1.5x

timeDefault

Property

timeDefault

Data type

int

Description

If using "Ken Burns effect" or "Ken Burns variant".

Default

2

fade

Property

fade

Data type

int

Description

The duration of each cross-fade animation between images (in seconds).

Default

1

sleep

Property

sleep

Data type

int

Description

The time every image will take on its own if using "Static cross-fade" (seconds).

Default

2

speed

Property

speed

Data type

int

Description

The constant speed for the image if using "Slide and cross-fade" (pixels/seconds).

Default

45

dir

Property

dir

Data type

int

Description

The alternating direction for the images if using "Slide and cross- fade".0 = up/down, 1 = left/right

Default

0

factor

Property

factor

Data type

string

Description

Factor for the image if using "Slide and cross-fade", "Ken Burns effect" or "Ken Burns variant" these effects require the images to be larger than the visual area (accept decimal values).

Default

1.5

plugin.tt_news.displaySlider.s3slider

CrossSlider Settings
layer

Property

layer

Data type

int

Description

Layer Appearance: For best results if using alternating layers use an even number of images. For more information see http://www.serie3.info/s3slider/

0=top, 1=bottom, 2=top/bottom, 3=left, 4=right, 5=left/right

Default

1

padding

Property

padding

Data type

int

Description

Layer Padding: (in pixel)

Default

10

timeOut

Property

timeOut

Data type

resource

Description

Duration of how long will one picture be shown on the page (in miliseconds)

Default

4000

plugin.tt_news.displaySlider.simpleticker

Simpleticker Settings
imgSize

Property

imgSize

Data type

int

Description

Image Size: (in pixel)

Default

50

speed

Property

speed

Data type

int

Description

Speed: (in miliseconds)

Default

700

pause

Property

pause

Data type

resource

Description

Pause: (in miliseconds)

Default

3500

Known problems

To-Do list

img-2 9