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:

img-1 img-2 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

EXT: Highslide Galler 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Screenshots 3

`Users manual 5 <#1.2.Users%20manual|outline>`_

FAQ 6

`Administration 7 <#1.3.Administration|outline>`_

FAQ 7

`Configuration 8 <#1.4.Configuration|outline>`_

FAQ 8

Reference 8

`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

    img-3

  • Enlarged image

img-4

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

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

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

useCaption

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

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