DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
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: |
EXT: Highslide Galler
EXT: Highslide Galler¶
Extension Key: my_extension_key
Copyright 2000-2008, Philipp Wolters, <typo3@mapled.de>
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¶
`Introduction 3 <#1.1.Introduction|outline>`_
`Users manual 5 <#1.2.Users%20manual|outline>`_
`Administration 7 <#1.3.Administration|outline>`_
`Configuration 8 <#1.4.Configuration|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¶
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 <http://creativecommons.org/licenses/by-nc/2.5/>`_ . This means you need the author's permission to use Highslide JS on commercial websites. Please visit `http://vikjavev.no/highslide/ <http://vikjavev.no/highslide/>`_ for more details.
Requirements¶
- TYPO3 (tested with 4.2.1)
- css_styled_content
- dam
- dam_ttcontent
- not required but recommended: dam_index
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¶
Text/image with square thumbnail
Enlarged image
- Gallery
- Live DemoA live demo can be found at http://www.mapled.de
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 <!-- ###DOCUMENT### end --> tag in your html template:<div id="controlbar" class="highslide- overlay controlbar"><a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a><a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a><a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a><a href="#" class="close" onclick="return hs.close(this)" title="Close"></a></div>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))¶
Use Highslide with existing content elements¶
Select one or more images with the DAM browser
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 the “List” view and create a DAM category at the root level of your website tree.
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
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¶
None so far.
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¶
Possible subsections: FAQ
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¶
Possible subsections: FAQ
Reference¶
Options for Plugin.Tx_Pwhighslidegallery (Image and Image/Text)
useSquarethumbs¶
Property
useSquarethumbs
Data type
bool
Description
If set, all thumbnails are squares within content elements image and image/text.
Default
1
highslideConfig¶
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¶
Property
enableGlobalHighslide
Data type
bool
Description
If set, all images where “Click-enlarge” is checked will use Highslide JS even images in htmlArea.
Default
Options for Plugin.Tx_Pwhighslidegallery_Pi1 (Gallery Plugin)
latestNumber¶
Property
latestNumber
Data type
int
Description
Set the number of images shown with sorting “Latest”.
Default
5
highslideConfig¶
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¶
Property
useSquarethumbs
Data type
bool
Description
If set, all thumbnails are squares in the gallery plugin
Default
1
thumbWidth¶
Property
thumbWidth
Data type
int
Description
Sets the width of thumbnail in the gallery plugin
Default
100
thumbHeight¶
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
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/ <http://vikjavev.no/highslide/>`_ . There are many examples which helps you with the configuration.
Known problems¶
None so far. Please report bugs, problems or suggestions to typo3[at]mapled.de
To-Do list¶
I am sure there is a lot which could be added. So feedback is welcome.
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