.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================== EXT: DAM Gallery With Liteshow ============================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Benjamin Mack :Changed: 2007-10-21T23:28:51 :Email: www.xnos.org :Info 2: Benjamin Mack - xnos Internet Services :Info 3: :Info 4: .. _EXT-DAM-Gallery-With-Liteshow: EXT: DAM Gallery With Liteshow ============================== Extension Key: **dam\_liteshow** Copyright 2007, Benjamin Mack - xnos Internet Services, 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.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: DAM Gallery With Liteshow 1** **Introduction 1** What does it do? 1 What is Liteshow? 1 Screenshots 2 Requirements 2 Sponsors 2 **Users Manual 2** Prerequisites 2 Installation 3 Include static template 3 Add the plugin as a content element 3 Liteshow display options 3 **Configuration 4** **Known Problems 4** **To-Do List 4** **Change Log 4** **Credits 4** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension is a frontend plugin to display images with the Liteshow JavaScript application. It takes images in, bundled in DAM categories as galleries and renders them as a JavaScript Slideshow with nice effects. There is also a fall back for statically seeing the thumbnails (and bigger image size via the click-enlarge option) if JavaScript is disabled. The “DAM Liteshow Gallery” extension is built on top of Liteshow 1.0 beta2, which is available at `www.xnos.org `_ . .. _What-is-Liteshow: What is Liteshow? ^^^^^^^^^^^^^^^^^ Liteshow is an open-source JavaScript framework to render Slideshows in a different way than a simple photo gallery people know from the web. It is built on top of the prototype JavaScript library ( `www.prototypejs.org `_ ) and the effects part of script.aculo.us ( `http://script.aculo.us/ `_ ), a library to render the images. It includes the following key features: - Images are cached and loaded before a user clicks on them so they don't have to wait as long as with a normal image gallery on the web. - It is extensible. JavaScript programmers can add different views very easy to define how they want to display the images – with using the script.aculo.us functions it should be pretty straightforward. - Features for displaying a timed Slideshow and bookmarking a specific image during a Slideshow are already built-in. - Navigation through the images is also possible via the arrow keys of the users' keyboard. .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-1| Sample image with HorizontalSlide view. |img-2| Example when in “Browser” mode. .. _Requirements: Requirements ^^^^^^^^^^^^ “DAM Liteshow” requires TYPO3 4.0 or later. Since the extension builds on top of Media (DAM) and its categories functions, it requires “dam” and “dam\_catedit”. Also the default configuration for the DAM Liteshow is to use css\_styled\_content, so it is recommended to use this for rendering the content. .. _Sponsors: Sponsors ^^^^^^^^ The development and first release of this extension was sponsored by the two German companies mediabar GbR ( `www.mediabar.info `_ ) and xnos Internet Services ( `www.xnos.de `_ ). You may sponsor further development of this extension by contacting the `author `_ of this document. .. _Users-Manual: Users Manual ------------ .. _Prerequisites: Prerequisites ^^^^^^^^^^^^^ The extension is built on top of Media DAM (dam) and its category system (dam\_catedit). So, first of all, please make sure that these extensions are installed correctly. Upload some pictures so they get indexed. Add a title to each image so the title will be shown on the bottom of the images in the frontend later on. Create at least one DAM category and add the DAM images to it. Right now, the DAM Liteshow Gallery uses only the “Title” meta field from the DAM images and only displays images. Each category will be a separate “Liteshow” instance, as its own Slideshow. .. _Installation: Installation ^^^^^^^^^^^^ Install the Extension DAM Gallery “dam\_liteshow” through the Extension Manager (EM). There are no installation configuration options at this point. .. _Include-static-template: Include static template ^^^^^^^^^^^^^^^^^^^^^^^ First, include the default configuration via a static template in your main template through the “Web” => “Template” module. |img-3| .. _Add-the-plugin-as-a-content-element: Add the plugin as a content element ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Now select the page where you want to add the Slideshow. Add a new content element and select “plugin” as the type as well as “Liteshow Gallery” the Plugin. |img-4| You should then see a form with two tabs - “Categories” and “Liteshow”. |img-5| You need to select at least one category. Each category will be seen as a different instance of Liteshow. It is also possible to choose the behaviour for the subcategories. The option “Don't include subcategories” only display the categories that are selected. In the example above the second option “Include subcategories as separate slideshows” would not only display the “September Germany Trip” slideshow but also all of it's direct children categories (you can define this in the category module of DAM). The third one would not render the subcategories but merely add all images of the subcategories to the selected categories. The option “Category Title Position” (introduced in version 0.4) allows you to display the title of each category. You can choose how the images in each category are sorted. You can choose that the images are sorted by title, the filename or UID (which is usually the order of how they were uploaded). The first image in the category is the thumbnail that is displayed in the overview. .. _Liteshow-display-options: Liteshow display options ^^^^^^^^^^^^^^^^^^^^^^^^ The Liteshow options in the “Liteshow” tab are applied to all categories. If you want different Liteshow settings please add multiple plugins. |img-6| Right now there are these configuration options available to configure the Liteshow: .. ### BEGIN~OF~TABLE ### .. _View: View """" .. container:: table-row a View b Choose how your images should appear. The default is “HorizontalSlide” where the images cycle through from right to left. .. _Starting-Position: Starting Position """"""""""""""""" .. container:: table-row a Starting Position b Enter the position where the slideshow should start. Is a numeric index starting with zero (“0”), where 0 (default) shows the very first image of the slideshow. It is also possible to set it to “browser” to start with the image browser right away. .. _Transition-Time: Transition Time """"""""""""""" .. container:: table-row a Transition Time b Defines how long it takes until the next image is rendered on the screen. Is defined in seconds. Use the point character as a separator, e.g. “0.7”. .. _Use-Timer: Use Timer """"""""" .. container:: table-row a Use Timer b Using a timed slideshow that can be used without user interaction to slide through the images. Once a user clicks on an image, the timer will be disabled. .. _Timer-Delay: Timer Delay """"""""""" .. container:: table-row a Timer Delay b If the option above is activated this is the time in seconds to pause until the next image will be shown. .. ###### END~OF~TABLE ###### It is possible to set other options via TypoScript and additional header information to modify the LiteConfig object. .. _Configuration: Configuration ------------- Besides the per-plugin configuration there is also a way to configure other options via TypoScript. .. ### BEGIN~OF~TABLE ### .. _fallback: fallback ^^^^^^^^ .. container:: table-row Property fallback Data type IMGTEXT Description Configuration for the fallback method when no JavaScript is available. This is usually imported from the same render process as the IMGTEXT from CSS Styled Content. Default < tt\_content.image.20 .. _preview: preview ^^^^^^^ .. container:: table-row Property preview Data type file / +stdWrap Description The rendering of the thumbnails to start the Liteshow. Will be used for rendering IMAGE. Default .. _images: images ^^^^^^ .. container:: table-row Property images Data type stdWrap Description The images that will be used in the Liteshow itself. By default .maxW = 800 is set so the liteshow images are cached at a moderate size and the loading process will be speeded up. Default .. _useBookmarks: useBookmarks ^^^^^^^^^^^^ .. container:: table-row Property useBookmarks Data type boolean Description Whether the bookmarking feature should be disabled or enabled Default 0 .. _loadingImage: loadingImage ^^^^^^^^^^^^ .. container:: table-row Property loadingImage Data type string Description [Deprecated]: Use ThrobberRight now this is a string to the loading.gif file Default EXT:dam\_liteshow/liteshow/g/loading.gif .. _throbber: throbber ^^^^^^^^ .. container:: table-row Property throbber Data type string Description Right now this is a string to the loading.gif file Default EXT:dam\_liteshow/liteshow/g/loading.gif .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_damliteshow\_pi1] Reading the static template that defines the default values is highly recommended if you wish to customize your output any further. .. _Known-Problems: Known Problems -------------- Any problems related to the output of the gallery should be reported as a Liteshow issue and directed to the developers of the Liteshow JavaScript Library (see `www.xnos.org `_ ). .. _To-Do-List: To-Do List ---------- There is a lot to do for upcoming versions: - The XML files that Liteshow needs should be produced in a temporary manner and should be cached. - The rendering of the thumbnails should be easier to configure. - More options to “start” a Liteshow, not only through thumbnails. - Template for the different views. - Liteshow: Browser view with all thumbnails in the bottom of the page. Various other To-Dos are related to the Liteshow development. .. _Change-Log: Change Log ---------- .. ### BEGIN~OF~TABLE ### .. _0-2: 0.2 ^^^ .. container:: table-row Version 0.2 Changes Initial release .. _0-3: 0.3 ^^^ .. container:: table-row Version 0.3 Changes Added subcategory selection, upgraded to Liteshow 1.0beta2, updated manual .. _0-4: 0.4 ^^^ .. container:: table-row Version 0.4 Changes Added possibility to display category title, upgraded to Liteshow 1.0beta3, updated manual .. _0-5: 0.5 ^^^ .. container:: table-row Version 0.5 Changes Fixed some CSS display bugs (thanks to Tobias Off from mediabar), added mechanism to sort pictures inside a category, updated manual .. ###### END~OF~TABLE ###### .. _Credits: Credits ------- Thanks to mediabar GbR ( `www.mediabar.info `_ ) for sponsoring the initial development of this extension. Further thanks to Christian Ehret for his extension “ce\_gallery” and the initial idea. Thanks to Jesus Christ who gave me the power and energy to live and therefore to write this extension. |img-7| EXT: DAM Gallery With Liteshow - 5 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 268 .. :id: graphics3 .. :name: graphics3 .. :width: 457 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 269 .. :id: graphics4 .. :name: graphics4 .. :width: 460 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 221 .. :id: graphics1 .. :name: graphics1 .. :width: 478 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 59 .. :id: graphics7 .. :name: graphics7 .. :width: 479 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 209 .. :id: graphics2 .. :name: graphics2 .. :width: 477 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 231 .. :id: graphics5 .. :name: graphics5 .. :width: 519 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102