.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============== EXT: T3 jQuery ============== :Created: 2010-02-18T17:33:18 :Changed by: bernd pier :Changed: 2011-06-04T08:51:19 :Classification: t3jquery :Keywords: jQuery UI, jQuery TOOLS :Author: Juergen Furrer :Email: juergen.furrer@gmail.com :Info 4: :Language: en |img-1| |img-2| EXT: PL JqueryImages- pljqueryimages .. _EXT-PL-JqueryImages: EXT: PL JqueryImages ==================== Extension Key: pljqueryimages Language: en Keywords: jQuery, jQuery Cycle Copyright 2011, Christian Platt , Bernd Pier jQuery © 2010 `The jQuery Project `_ , jQuery Cycle © 2009 Mike Alsup 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 ----------------- `EXT: PL JqueryImages 1 <#__RefHeading__874_1096280026>`_ **`Introduction 3 <#__RefHeading__876_1096280026>`_** `What does it do? <#__RefHeading__878_1096280026>`_ ` **3** <#__RefHeading__878_1096280026>`_ **`Installation 4 <#__RefHeading__882_1096280026>`_** **`Configuration <#Configuration|outline>`_** **`6 <#Configuration|outline>`_** **`Administration <#__RefHeading__890_1096280026>`_ 7** **`References 8 <#__RefHeading__892_1096280026>`_** **`Known problems 9 <#__RefHeading__898_1096280026>`_** **`To-Do list 1 <#__RefHeading__900_1096280026>`_ 0** ` **ChangeLog** <#__RefHeading__902_1096280026>`_ ` **11** <#__RefHeading__902_1096280026>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension integrates the jQuery Cycle Plugin. If you have T3jQuery installed, the Extension will use this. Most of the Configuration is done by Flexforms. .. _Installation: Installation ------------ To install the Extension download it from TER and add it to “Include static (from extensions)” |img-3| |img-4| Then insert the Plugin on the Page. Put the Images into a Folder, it is recommend to create a folder under fileadmin. We need the Path to the Images for the Option “Path to Images”. It is a good idea that the Images have the same Height and Width. .. _Configuration: Configuration ------------- We have two Tabs in the Backend. The first Tab holds the General Settings, the second one the Javascript Settings. **General Settings:** - |img-5| use T3JQuery: if you activate this Option and T3JQuery is installed the Extension will use T3JQuery. If you don\`t want to use T3JQuery though it is intalled then don\`t activate this Option. So you have the choice to use a different Library even if T3JQuery is installed. - Path to JQuery: by default the Extension use his own JQuery. If you want to use your own, please set this Option, e.g fileadmin/js/jquery-1.4.2.min.js. - Path to JqueryCycle: by default the Extension use his own JQuery. If you want to use your own, please set this Option, e.g fileadmin/js/jquery.cycle.all.min.js. - Path to Images: this is the Path to the Folder that you create in the Installation. Take care of the ending Slash. - Images to Display: if you set this Option to “ALL” all Images will be used. Alternative you can give a commaseperated List of Images,e.g. image1.jpg,image2.jpg,.... - Height/Width: the Height or the Width of the Images. All Options from this Tab could be set via TS. Look at the Section “ `References <#References|outline>`_ ” or look into /static/setup.txt. These are the default Values. **Javascript Settings:** In this Tab you set the Options for the Cycle Plugin. These Option defines the Action with the Parameters. You had to set the “fx” Option, cause this one defines the Action. |img-6| To add a new Option click “Add new: Javascript Option”. The Field “Option” hold the Name of the Option the Field “Value” holds the Value of the Option. For a complete List of all Options please visite the `Option Referencepage `_ of JQuery Cycle Plugin. .. _Administration: Administration -------------- Nothing to administrate / No additional fields are needed. .. _References: References ---------- Here is the default TS from setup.txt plugin.tx\_pljqueryimages\_pi1{ pathToJquery=typo3conf/ext/pljqueryimages/js/jquery-1.4.2.min.js pathToJcycle=typo3conf/ext/pljqueryimages/js/jquery.cycle.all.min.js pathToImages=fileadmin/images/pljqueryimages/ imagesToDisplay=image\_01.jpg,image\_02.jpg,image\_03.jpg sectionOptions.1.optionname = fx sectionOptions.1.optionvalue = fade sectionOptions.2.optionname = speed sectionOptions.2.optionvalue = 1000 sectionOptions.3.optionname = timeout sectionOptions.3.optionvalue = 2000 imageWidth=190m imageHeight=190m useT3jquery = 0 } plugin.tx\_pljqueryimages\_pi1.\_CSS\_DEFAULT\_STYLE ( .action { height: 232px; width: 232px; margin: auto } .action img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } ) .. _Known-problems: Known problems -------------- Report bugs at `info@pharmaline.de `_ .. _To-Do-list: To-Do list ---------- - Report features at `info@pharmaline.de `_ - automatically set the Values of the Javascript Options as Title for the Elements. .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row a 0.0.1 b initial code generated with kickstarter .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row a 0.0.2 b integrates imageMagic and stdWrap for fade width and hight can be m for maximum or c for crop .. _0-0-5: 0.0.5 ^^^^^ .. container:: table-row a 0.0.5 b building the Javascript Actionfile automatically depending on the Options in the Flexform you can set flexible Options in the Flexform adding all Configuration Parameter to the Flexform reading the Flexform Datas and merge them with the Configuration Datas .. _0-0-6: 0.0.6 ^^^^^ .. container:: table-row a 0.0.6 b Integration of the Javascript Options into Typoscript .. ###### END~OF~TABLE ###### |img-2| 11 .. ######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: 186 .. :id: Grafik3 .. :name: Grafik3 .. :width: 497 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 189 .. :id: Grafik4 .. :name: Grafik4 .. :width: 536 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 344 .. :id: Grafik1 .. :name: Grafik1 .. :width: 495 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 445 .. :id: Grafik5 .. :name: Grafik5 .. :width: 406