.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline ====================== EXT: O5 Gallery Plugin ====================== :Created: 2010-02-18T17:33:18 :Changed by: Olivier :Changed: 2011-05-23T17:50:56.040000000 :Classification: Opus5 Gallery Plugin :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: forEditors, forDevelopers :Author: Opus5 (by Olivier PEYRUSSE) :Email: soporte@opus5.info :Info 4: :Language: en |img-1| |img-2| EXT: O5 Gallery Plugin - Opus5 Gallery Plugin .. _EXT-O5-Gallery-Plugin: EXT: O5 Gallery Plugin ====================== Extension Key: Opus5 Gallery Plugin Language: en Keywords: forEditors, forDevelopers Copyright 2000-2011, Opus5 (by Olivier PEYRUSSE), 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: Gallery Plugin 1 <#__RefHeading__4324_929642545>`_ **`Introduction 3 <#__RefHeading__4326_929642545>`_** `What does it do? 3 <#__RefHeading__4328_929642545>`_ `Screenshots 3 <#__RefHeading__4330_929642545>`_ `Questions? 5 <#__RefHeading__4332_929642545>`_ `Keeping the developer happy 5 <#__RefHeading__12760_1738894311>`_ **`Installation 6 <#__RefHeading__3531_761925617>`_** `Configuration 6 <#__RefHeading__1818_1760285071>`_ **`Users manual 7 <#__RefHeading__4334_929642545>`_** `Create the gallery element 7 <#__RefHeading__702_1138821903>`_ `Add content to the gallery 7 <#__RefHeading__704_1138821903>`_ `Configure the display of the extension 8 <#__RefHeading__706_1138821903>`_ `Add your own Typoscript 9 <#__RefHeading__708_1138821903>`_ **`Configuration 11 <#__RefHeading__710_1138821903>`_** `TypoScript 11 <#__RefHeading__4344_929642545>`_ `Templates 12 <#__RefHeading__923_803187165>`_ **`Frequently Asked Questions 14 <#__RefHeading__6716_1180458822>`_** `No question has been posted yet. 14 <#__RefHeading__712_1138821903>`_ **`Known problems 15 <#__RefHeading__4362_929642545>`_** **`To-Do list 16 <#__RefHeading__4364_929642545>`_** **`Change Log 17 <#__RefHeading__4366_929642545>`_** **`Appendix A – Improvements from Galleriffic 18 <#__RefHeading__3395_761925617>`_** `Multiple images while clicking on the main image 18 <#__RefHeading__714_1138821903>`_ `Duplicate thumb while changing the page 18 <#__RefHeading__716_1138821903>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension is a FE plugin to create easily a gallery in a Typo3 web site. The main feature of this gallery is its flexibility. Every element of the gallery appears in its templates, very small pieces of code are generated in the source code. The gallery mainly uses code structure defined in templates. This extension makes as a TYPO3 plugin the gallery named Gallerific, created by Trent Foley ( `http://www.twospy.com/galleriffic/ `_ ). Some corrections have been made to solve bugs, these are described in the section Improvements from Galleriffic. .. _Screenshots: Screenshots ^^^^^^^^^^^ An example of the use of the gallery: we select the two folders where the plugins will find the thumbnails and the images. The gallery is rendered with this images. |img-3| |img-4| *Illustration 1: Screenshot form [http://www.twospy.com/galleriffic/example-5.htm]* |img-5| *Illustration 2: Screenshot from [http://www.twospy.com/galleriffic/example-2.html]* .. _Questions: Questions? ^^^^^^^^^^ If you have any questions about this extension, please, contact us at the following address: soporte@opus5.info. .. _Keeping-the-developer-happy: Keeping the developer happy ^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you like this extension, do not hesitate to rate it. Go the Extension Repository, search for this extension, click on its title to go to the details view, then click on the “Ratings” tab and vote (you need to be logged in). Every new vote keeps the developer ticking. So just do it! You may also take a step back and reflect about the beauty of sharing. Think about how much you are benefiting and how much yourself is giving back to the community. .. _Installation: Installation ------------ There is nothing special to do to install this extension. Dowload it from the Extension Repository and click on the button Install. After installation, the static TypoScript template provided by the extension should be added to the site's template. |img-6| .. _Configuration: Configuration ^^^^^^^^^^^^^ There's a single configuration option available after installing the extension: **Include jQuery** : check this box to include with the plugin jQuery. The plugin is using this library, but it is often the case in many websites. To avoid conflicts, this let you download by yourself a version of jQuery. Else, the plugin can provide you the version 1.5.2min. Versions of jQuery from 1.3.2 are functional. .. _Users-manual: Users manual ------------ If you have never used a Display Controller before, please refer to the tutorial further down in this manual. .. _Create-the-gallery-element: Create the gallery element ^^^^^^^^^^^^^^^^^^^^^^^^^^ To create a gallery, go to the page and insert a General Plugin. Then, go to the tab Plugin and choose Gallery. |img-7| Then, select a custom template and a custom CSS file for your gallery. If you want to use the default template and style, go directly to the tab Content of the plugin flexform. .. _Add-content-to-the-gallery: Add content to the gallery ^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-8| .. _Add-content-using-folders: Add content using folders """"""""""""""""""""""""" The easiest way to create the gallery is to specify two folders, one for thumbnails and one for images. Then, the plugin will use all images inside to create the gallery. To do so, click on the folder icon of the Images Folder field, select the folder containing the images. Do the same with the Thumbnails Folder field. The corresponding image and thumbnail must have the same name in order the plugin to be able to work. You can enable the checkbox to sort your gallery by the name of your files. Otherwise, the images will be displayed by the internal order of the thumbnails folder. .. _Add-content-using-Typoscript: Add content using Typoscript """""""""""""""""""""""""""" Instead of using folders ,you can manually define a matrix of images to be displayed. Then, the order of display will be the order of the matrix. To do so, go to the section `Add your own Typoscript <#1.3.1.4.Add%20your%20own%20Typoscript|outline>`_ . As images matrices are defined by Typoscript, any script that will be included in the page holding the plugin can contain definitions of matrices. Using the checkbox “Use all gallery elements defined in Typoscript”, you can use all elements from these Typoscript files (checked) or only elements defined in the tab Typoscript (unchecked). .. _Configure-the-display-of-the-extension: Configure the display of the extension ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-9| This panel lets you configure the behavior of the gallery. As it says, the number of thumbnails to show will be the number of elements shown in each page of the pagination. Enabling top or/and bottom pagers displays pagination items for navigation. These items consisting in a number for each page, the parameter “Maximum number of pages shown in the pager” specifies the count of numbers that will be shown.Default configuration is 5, minimum is 3. In the pager, 3 elements are always shown: a link to the first page, link to the last page, and an item for the current page. When the user goes to another image, the shown image fades out and the new one fades in. This duration of the transition can be configured through the last input box. The duration is in milliseconds, default is 1000ms (1s). :underline:`Example` : |img-10| In this example, we only show 2 thumbnails (green box) and we activate the two pagers (red boxes). Therefore, 4 links to pages should be shown. Because we configure only 3 pages to show (blue box), only 3 links are visible (1, 2, 4) and the resting pages are hidden by ellipsis (…). .. _Add-your-own-Typoscript: Add your own Typoscript ^^^^^^^^^^^^^^^^^^^^^^^ |img-11| In this tab, you can add a custom script to the plugin instance. The main purpose of this element is to define a matrix of images for the galley. The syntax of this matrix is the following: images {name\_of\_the\_image {imageUrl = [define the URL where to find the image to show]thumbUrl = [define the URL where to find the thumbnail of the image]downloadUrl = [define the URL where to find an downloadable image]title = [enter a small text that will be used as a title for the image]description = [enter a description for the image]}} You can also use this field to enter classical Typoscript, such as new language elements, or every configurable element of the plugin. To see all configurable elements, go to `Configuration <#1.4.Configuration|outline>`_ . .. _Configuration: Configuration ------------- .. _TypoScript: TypoScript ^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _templateFile: templateFile """""""""""" .. container:: table-row Property templateFile Data type string Description Configuration of the path to the template file to create the gallery view Default EXT:o5\_gallery/res/pi1\_template.html .. _cssFile: cssFile """"""" .. container:: table-row Property cssFile Data type string Description Use this configuration to specify a CSS file to load with the element Default typo3conf/ext/o5\_gallery/res/pi1.css .. _additionalScripts: additionalScripts """"""""""""""""" .. container:: table-row Property additionalScripts Data type list of strings separated with comma Description Scripts to be included with the gallery plugin. These scripts can for example create new animations for the gallery. Default .. _thumbnailsFolder: thumbnailsFolder """""""""""""""" .. container:: table-row Property thumbnailsFolder Data type string Description Configure the path to the folder containing the images in full size Default .. _imagesFolder: imagesFolder """""""""""" .. container:: table-row Property imagesFolder Data type string Description Configure the path to the folder containing the thumbnails Default .. _orderFilesByName: orderFilesByName """""""""""""""" .. container:: table-row Property orderFilesByName Data type boolean Description Use this configuration to sort the thumbnails by the name of the files (ascending order) Default 0 .. _thumbsByPage: thumbsByPage """""""""""" .. container:: table-row Property thumbsByPage Data type integer Description Configure the number of thumbnails to show in each page Default 5 .. _maxPages: maxPages """""""" .. container:: table-row Property maxPages Data type integer Description Number of pages to show in the pager Default 5 .. _topPager: topPager """""""" .. container:: table-row Property topPager Data type boolean Description Use the configuration to show the pager, in top of the list of thumbnails Default 0 .. _bottomPager: bottomPager """"""""""" .. container:: table-row Property bottomPager Data type boolean Description Use the configuration to show the pager, in bottom of the list of thumbnails Default 0 .. _transitionDuration: transitionDuration """""""""""""""""" .. container:: table-row Property transitionDuration Data type integer Description Use this configuration to set the duration of the transition, while changing from one image to the next. This time is set in milliseconds. Default 1000 .. _images: images """""" .. container:: table-row Property images Data type -> imagesMatrix Description Configure the images to show in the gallery Default .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_o5\_gallery\_pi1] .. _imagesMatrix: -> imagesMatrix """"""""""""""" The images matrix is made of names, for each image, each name being the key of a configuration array. .. ### BEGIN~OF~TABLE ### .. _imageUrl: imageUrl ~~~~~~~~ .. container:: table-row Property imageUrl Data type string Description Configure the URL to the full size image Default .. _thumbUrl: thumbUrl ~~~~~~~~ .. container:: table-row Property thumbUrl Data type string Description Configure the URL to the thumbnail image Default .. _downloadUrl: downloadUrl ~~~~~~~~~~~ .. container:: table-row Property downloadUrl Data type string Description Configure the URL to an image downloadable for the user. If not defined, the gallery will use the URL to the image. Default .. _title: title ~~~~~ .. container:: table-row Property title Data type string Description Configure a title for the image Default .. _description: description ~~~~~~~~~~~ .. container:: table-row Property description Data type string Description Configure a text describing the image Default .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_o5\_gallery\_pi1.images] .. _Templates: Templates ^^^^^^^^^ There are few elements composing the template but some requirements for creating brand new templates. .. _Architecture-and-Requirements: Architecture and Requirements """"""""""""""""""""""""""""" The gallery is made of one
element containing every element. This
must have a specified Id, so that multiple gallery plugins can be included in a single page. This Id is one of the markers of the plugin (“gallery-###GALLERY\_ID###") and will be described later. It is required by the Javascript to identify the gallery and work correctly.Additionally, the wrapping
can have a specific class, “gallery” in the default template, to style quickly all gallery plugin items, the id tag allowing a case-by-case style. The gallery is basically compound of 5 elements: - A container for the image to show, this container must have the class “ **slideshow** ”; - A container for the control buttons (Play & Pause, Next \| Previous, …), this container must have the class “ **controls** ”; - A container for the captions of images, this container must have the class “ **caption-container** ”; - A container for the loading image, this container must have the class “ **loader** ”; - A container for the thumbnail images (this is the most important component), this container must be a
element with class “ **thumbs** ”. We will detail this container deeper above. Additional components can be: - A div with class “ **photo-index** ”, used to display the index of the image shown (e.g. 7/9). - Linking elements with class “ **prev** ” and “ **next** ” for pagination navigation. These elements can be insert in the thumbnails container (
...
) to take advantages of the default scripts. :underline:`Thumbnail container` This container must be a
element, with class tag set to “ **thumbs** ”. Inside this element, an unordered list