.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ===================== EXT: Highslide Galler ===================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Philipp Wolters :Changed: 2008-08-16T21:44:41 :Classification: pw_highslide_gallery :Keywords: highslide, gallery, images dam :Author: Philipp Wolters :Email: typo3@mapled.de :Info 3: EN :Info 4: |img-1| |img-2| EXT: Highslide Galler .. _EXT-Highslide-Galler: EXT: Highslide Galler ===================== Extension Key: **my\_extension\_key** Copyright 2000-2008, Philipp Wolters, 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: Highslide Galler 1 <#1.EXT:%20Highslide%20Galler|outline>`_ **`Introduction 3 <#1.1.Introduction|outline>`_** `What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_ `Screenshots 3 <#1.1.2.Screenshots|outline>`_ **`Users manual 5 <#1.2.Users%20manual|outline>`_** `FAQ 6 <#1.2.1.FAQ|outline>`_ **`Administration 7 <#1.3.Administration|outline>`_** `FAQ 7 <#1.3.1.FAQ|outline>`_ **`Configuration 8 <#1.4.Configuration|outline>`_** `FAQ 8 <#1.4.1.FAQ|outline>`_ `Reference 8 <#1.4.2.Reference|outline>`_ **`Known problems 10 <#1.5.Known%20problems|outline>`_** **`To-Do list 11 <#1.6.To-Do%20list|outline>`_** **`ChangeLog 12 <#1.7.ChangeLog|outline>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension integrates the Highslide effect of Torstein Hønsi ( `http://vikjavev.no/highslide/ `_ ) into Typo3 when “Click enlarge” is enabled for images in content elements. It also provides a plugin to show images from a category of the DAM extension using Highslide JS.This extension includes Highslide version 4.0.2. **NOTE: Highslide JS is licensed under a `Creative Commons Attribution-NonCommercial 2.5 License `_ . This means you need the author's permission to use Highslide JS on commercial websites. Please visit `http://vikjavev.no/highslide/ `_ for more details.** .. _Requirements: Requirements """""""""""" - TYPO3 (tested with 4.2.1) - css\_styled\_content - dam - dam\_ttcontent - not required but recommended: dam\_index .. _Credits: Credits """"""" Thanks to Kasper Skårhøj for TYPO3! Thanks to Rene Fritz for dam, dam\_ttcontent. Thanks to Torstein Hønsi for the Highslide effects. Thanks to Sami for the code for language support. .. _Screenshots: Screenshots ^^^^^^^^^^^ - Text/image with square thumbnail |img-3| - Enlarged image |img-4| - |img-5| Gallery - Live DemoA live demo can be found at http://www.mapled.de .. _Users-manual: Users manual ------------ Install the extension with the “Extension Manager”. As soon as it is installed you will see additional options in image and image/text content elements and a new available plugin “Highslide Gallery”. (Optional) Add the following code before the tag in your html template:
This will add an overlay for the enlarged image when using the “Click enlarge” feature. If you do not use it, you may delete *overlayId: "controlbar"* in highslideConfig within the constant editor (see Chapter 4 for more details). At the moment Highslide Gallery uses the following fields from the DAM object: Title – used as title of the image Description – used as description of the image Creation Date – used to sort images Index Date – used to sort images and to show the latest indexed images Fe group – used to give frontend user access to specific images which they are assigned to .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Use-Highslide-with-existing-content-elements: Use Highslide with existing content elements """""""""""""""""""""""""""""""""""""""""""" Select one or more images with the *DAM browser* |img-6| Check “Click-enlarge”. If you haven't set Highslide for global use, you have to check “Use Highslide”. Check other options if you want:- **Image Dimensions** :“Show previews as squares” - Shows a thumbnail as square (applies also if you specify the width or height)- **Image Links** :“Hide Description” - Hides the description of the dam entry under the enlarged image“Hide Title” - Hides the title of the dam entry under the enlarged image .. _Use-Highslide-Gallery-plugin: Use Highslide Gallery plugin """""""""""""""""""""""""""" |img-7| |img-8| Use the “List” view and create a DAM category at the root level of your website tree. |img-9| Add files to this category. There are different ways to do so. Have a look at the modules of “Media” section of the DAM extension. Go to a page where you want the gallery to appear and choose “Highslide Gallery” as content element |img-10| Make your configuration within the tab “Plugin” \- **Categories** : Select one category- **Sorting** : Select order in which images should be displayed“Newest indexed first” - Newer indexed (depends on Index of *DAM* ) files will be shown first“Oldest indexed first” - Older indexed (depends on index of *DAM* ) files will be shown first“Newest created first” - Newer created files (depends on the creation date of the image itself) will be shown first“Oldest created first” - Older created files (depends on the creation date of the image itself) will be shown first“Latest” - The latest indexed files which are in a category will be shown. The number of these images can be specified within the plugin configuration. (Until now the sorting “Latest” lists the latest indexed files which belong to a any category. Files which are indexed and do not belong to a category will not be shown.) .. _FAQ: FAQ ^^^ None so far. .. _Administration: Administration -------------- Just install the extension through the Extension Manager. As soon as you have installed it, there will appear two new items in the constant editor. See the configuration section for more details. .. _FAQ: FAQ ^^^ Possible subsections: FAQ .. _Configuration: Configuration ------------- All settings can be configured using the constant editor. It is also possible to configure Highslide through the file highslide.js or highslide-with-gallery.js, which can be found in the folder “highslide” within the extension folder (pw\_highslide\_gallery) Go to Template and select “Constant Editor” Category “Plugin.Tx\_Pwhighslidegallery” configures output for content elements *image* and *image/text* Category “Plugin.Tx\_Pwhighslidegallery\_Pi1” configures output for the plugin .. _FAQ: FAQ ^^^ Possible subsections: FAQ .. _Reference: Reference ^^^^^^^^^ **Options for Plugin.Tx\_Pwhighslidegallery (Image and Image/Text)** .. ### BEGIN~OF~TABLE ### .. _useSquarethumbs: useSquarethumbs """"""""""""""" .. container:: table-row Property useSquarethumbs Data type bool Description If set, all thumbnails are squares within content elements image and image/text. Default 1 .. _highslideConfig: highslideConfig """"""""""""""" .. container:: table-row Property highslideConfig Data type string Description This is the configuration of Highslide which is added to the header of the page. You can configure a lot of the behavior of Highslide with it. See `http://vikjavev.no/highslide/tutorial `_ for more details. Example: If you want the credits in the top left corner to disappear add *hs.showCredits=false;* Default hs.registerOverlay({ thumbnailId: null, overlayId: "controlbar", position: "top right", hideOnMouseOut: true}); hs.outlineType = "rounded-white"; hs.captionEval = "this.thumb.title"; hs.align = "center"; .. _enableGlobalHighslide: enableGlobalHighslide """"""""""""""""""""" .. container:: table-row Property enableGlobalHighslide Data type bool Description If set, all images where “Click-enlarge” is checked will use Highslide JS even images in htmlArea. Default .. ###### END~OF~TABLE ###### **Options for Plugin.Tx\_Pwhighslidegallery\_Pi1 (Gallery Plugin)** .. ### BEGIN~OF~TABLE ### .. _latestNumber: latestNumber """""""""""" .. container:: table-row Property latestNumber Data type int Description Set the number of images shown with sorting “Latest”. Default 5 .. _useCaption: useCaption """""""""" .. container:: table-row Property useCaption Data type bool Description If set the caption field of DAM entries is used as description instead of the description field, Default false .. _highslideConfig: highslideConfig """"""""""""""" .. container:: table-row Property highslideConfig Data type string Description This is the configuration of Highslide which is added to the header of the page. You can configure a lot of the behavior of Highslide with it. See `http://vikjavev.no/highslide/tutorial `_ for more details. Example: If you want the credits in the top left corner to disappear add *hs.showCredits=false;* Default hs.align = 'center';hs.transitions = ['expand', ''];hs.outlineType = 'rounded-white';hs.fadeInOut = true;hs.dimmingOpacity = 0.75;if (hs.addSlideshow) hs.addSlideshow({interval: 5000,repeat: false,useControls: true,fixedControls: true,overlayOptions: {opacity: .75,position: 'top center',hideOnMouseOut: true}}); .. _useSquarethumbs: useSquarethumbs """"""""""""""" .. container:: table-row Property useSquarethumbs Data type bool Description If set, all thumbnails are squares in the gallery plugin Default 1 .. _thumbWidth: thumbWidth """""""""" .. container:: table-row Property thumbWidth Data type int Description Sets the width of thumbnail in the gallery plugin Default 100 .. _thumbHeight: thumbHeight """"""""""" .. container:: table-row Property thumbHeight Data type int Description Sets the height of thumbnails in the gallery plugin. If width and height are set, the image is cropped with these parameters Default - .. ###### END~OF~TABLE ###### You can configure most of the behavior and appearance with the configuration options provided in the constant editor. Locations where more configurations or adaptions may be done: - res/highslide-gallery.css: css file for the appearance of Highslide when using the plugin - res/highslide.css: css file for the apearance of Highslide when using “Click-enlarge” - highslide/highslide.js: javascript file for Highslide when using the “Click-enlarge” - highslide/highslide-with-gallery.js: javascript file for Highslide when using the plugin A good point to start is the website of Highslide: ` **http://vikjavev.no/highslide/** `_ . There are many examples which helps you with the configuration. .. _Known-problems: Known problems -------------- None so far. Please report bugs, problems or suggestions to typo3[at]mapled.de .. _To-Do-list: To-Do list ---------- I am sure there is a lot which could be added. So feedback is welcome. .. _ChangeLog: ChangeLog --------- - 0.3.1: - Fix: Documentation again - 0.3.0: - Fix: Hopefully the documentation will be rendered- Feature: Use of Highslide in Typo3 is more configurable- Feature: Size of thumbnails in gallery can be configured- Feature: Support the frontend user group column of DAM table - 0.2.0: - Fix: Errors in TypoScript Object Browser- Feature: Language support for DAM entries- Feature: Use caption field of DAM entries instead of description field - 0.1.0: - Initial version 12 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 23 .. :id: Grafik2 .. :name: Grafik2 .. :width: 86 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 145 .. :id: Grafik6 .. :name: Grafik6 .. :width: 339 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 179 .. :id: Grafik7 .. :name: Grafik7 .. :width: 323 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 206 .. :id: Grafik8 .. :name: Grafik8 .. :width: 337 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 97 .. :id: Grafik1 .. :name: Grafik1 .. :width: 315 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 56 .. :id: Grafik9 .. :name: Grafik9 .. :width: 248 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 218 .. :id: Grafik10 .. :name: Grafik10 .. :width: 143 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 130 .. :id: Grafik11 .. :name: Grafik11 .. :width: 316 .. |img-10| image:: img-10.jpeg .. :align: left .. :border: 0 .. :height: 29 .. :id: Grafik4 .. :name: Grafik4 .. :width: 288