.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ==================================== 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: 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: Table of Contents ----------------- `EXT: Slider for tt\_news 1 <#__RefHeading__2659_1602935418>`_ **`Introduction 3 <#__RefHeading__2661_1602935418>`_** `What does it do? 3 <#__RefHeading__2663_1602935418>`_ `Screenshots 3 <#__RefHeading__2665_1602935418>`_ **`Users manual 4 <#__RefHeading__299_1527964297>`_** `Follow these steps to use this extension: 4 <#__RefHeading__380_1476407765>`_ **`Administration 5 <#__RefHeading__2669_1602935418>`_** **`Configuration 6 <#__RefHeading__2671_1602935418>`_** `Reference 6 <#__RefHeading__12810_2096840944>`_ **`Known problems 8 <#__RefHeading__2673_1602935418>`_** **`To-Do list 9 <#__RefHeading__2675_1602935418>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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! .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| Demo: `http://www.t3solution.de/ext/t3s-newsslider.html `_ .. _Users-manual: Users manual ------------ .. _Follow-these-steps-to-use-this-extension: 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: 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: 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: Reference ^^^^^^^^^ .. _TS-configuration: TS configuration """""""""""""""" plugin.tt\_news.displaySlider .. _General-Settings: General Settings """""""""""""""" .. ### BEGIN~OF~TABLE ### .. _sliderWidth: sliderWidth ~~~~~~~~~~~ .. container:: table-row Property sliderWidth Data type int Description Slider Width: Width of the slider in px (Simple-Ticker - only by own css-style). Default 700 .. _sliderHeight: sliderHeight ~~~~~~~~~~~~ .. container:: table-row Property sliderHeight Data type int Description Height of the slider in px (Simple-Ticker - only by own css-style). Default 300 .. _defaultImage: defaultImage ~~~~~~~~~~~~ .. container:: table-row Property defaultImage Data type resource Description Is used, if the news-record has no image. Default default.jpg .. _css: css ~~~ .. container:: table-row Property css Data type boolean Description Disable/enable CSS: Use your own CSS-Style. Default .. ###### END~OF~TABLE ###### plugin.tt\_news.displaySlider.crossslider .. _CrossSlider-Settings: CrossSlider Settings """""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _effect: effect ~~~~~~ .. container:: table-row 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: caption ~~~~~~~ .. container:: table-row 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: easingEffect ~~~~~~~~~~~~ .. container:: table-row 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 .. _imageLink: imageLink ~~~~~~~~~ .. container:: table-row Property imageLink Data type boolean Description Image Link: Creates an image-link to the single-news. Default 1 .. _fromDefault: fromDefault ~~~~~~~~~~~ .. container:: table-row 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: toDefault ~~~~~~~~~ .. container:: table-row Property toDefault Data type string Description If using "Ken Burns effect" or "Ken Burns variant". Default 80% 20% 1.5x .. _timeDefault: timeDefault ~~~~~~~~~~~ .. container:: table-row Property timeDefault Data type int Description If using "Ken Burns effect" or "Ken Burns variant". Default 2 .. _fade: fade ~~~~ .. container:: table-row Property fade Data type int Description The duration of each cross-fade animation between images (in seconds). Default 1 .. _sleep: sleep ~~~~~ .. container:: table-row Property sleep Data type int Description The time every image will take on its own if using "Static cross-fade" (seconds). Default 2 .. _speed: speed ~~~~~ .. container:: table-row Property speed Data type int Description The constant speed for the image if using "Slide and cross-fade" (pixels/seconds). Default 45 .. _dir: dir ~~~ .. container:: table-row 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: factor ~~~~~~ .. container:: table-row 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 .. ###### END~OF~TABLE ###### plugin.tt\_news.displaySlider.s3slider .. _CrossSlider-Settings: CrossSlider Settings """""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _layer: layer ~~~~~ .. container:: table-row 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: padding ~~~~~~~ .. container:: table-row Property padding Data type int Description Layer Padding: (in pixel) Default 10 .. _timeOut: timeOut ~~~~~~~ .. container:: table-row Property timeOut Data type resource Description Duration of how long will one picture be shown on the page (in miliseconds) Default 4000 .. ###### END~OF~TABLE ###### plugin.tt\_news.displaySlider.simpleticker .. _Simpleticker-Settings: Simpleticker Settings """"""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _imgSize: imgSize ~~~~~~~ .. container:: table-row Property imgSize Data type int Description Image Size: (in pixel) Default 50 .. _speed: speed ~~~~~ .. container:: table-row Property speed Data type int Description Speed: (in miliseconds) Default 700 .. _pause: pause ~~~~~ .. container:: table-row Property pause Data type resource Description Pause: (in miliseconds) Default 3500 .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- .. _To-Do-list: To-Do list ---------- |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.png .. :align: left .. :border: 0 .. :height: 292 .. :id: Grafik1 .. :name: Grafik1 .. :width: 669 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 671 .. :id: Grafik3 .. :name: Grafik3 .. :width: 603