.. You may want to use the usual include line. Uncomment and adjust the path.
.. include:: ../Includes.txt
.. role:: underline
====================
EXT: rgsmoothgallery
====================
:Author:
Kasper Skårhøj
:Created:
2002-11-01T00:32:00
:Changed by:
Georg Ringer
:Changed:
2011-08-30T05:57:57.540000000
:Author:
Georg Ringer (just2b)
:Email:
http://www.ringer.it/
:Info 3:
:Info 4:
.. _EXT-rgsmoothgallery:
EXT: rgsmoothgallery
====================
Extension Key: **rgsmoothgallery**
Copyright 2000-2002, Georg Ringer (just2b),
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: rgsmoothgallery 1**
**Introduction 1**
What does it do? 1
Screenshots 2
Live-Demo & Examples 4
**Upgrade from v 1.0.6 5**
**Users manual 5**
Images from a directory 5
Images from records 6
Images from tt\_content 6
Images from DAM 6
Images from DAM Category 6
Integration into tt\_news 6
**Configuration 6**
Images from tt\_content 6
Integration into tt\_news 7
Plugin settings 8
Reference 9
**Advanced configuration 10**
External Thumbnails 10
Cropped images 10
Watermarks 11
Alternative Layout & Design I 11
Alternative Layout & Design II 11
Include a gallery with TS only 12
Fun with stdWrap 12
**FAQ 13**
**Known problems 13**
**To-Do list 13**
**You like the extension? 13**
**Thanks to 13**
**Changelog 14**
.. _Introduction:
Introduction
------------
.. _What-does-it-do:
What does it do?
^^^^^^^^^^^^^^^^
This extension implements the really cool gallery called SmoothGallery
by JonDesign. Look at it here:
`http://smoothgallery.jondesign.net/showcase/gallery/
`_
The extensions works as a gallery and as a slideshow which can either
show automatically the next image (after a changeable amount of time)
or the user can switch to the next and previous image. These two
settings can also be combined. Lightbox is included too (as slimbox).
The extensions works in many different ways
- Images out of a directory: So just add the path to a directory in the
flexforms and you are done.
- Images from records: Create a record for every image and save the page
as starting point.
- Images inside “text with image”: Present the images of a normal
content element with rgSmoothGallery.
- Images out of DAM: Select the records and you are done.
- Images out of DAM categories: Select a DAM category to display the
images.
- Integration into tt\_news: Present the images of the record in
LIST/LATEST or SINGLE-View.
More features are
- Images can be cropped
- Limitation of images
- Watermarks
- Timed slideshows to change images after a given time
- Thumbnails in another div
.. _Screenshots:
Screenshots
^^^^^^^^^^^
|img-1|
|img-2| **Image 1:** The extension showing the thumbnails to browse
to the other image
**Image 2:** The extension inside a content element “text with image”,
replacing the usual images with the gallery or slideshow. Also a
caption is available. Still fully configurable!
|img-3|
**Image 3:** This is a cropped version of the same original source as
in Image 1. Take a look at the section “Advanced configuration” to see
how it is done.
|img-4|
**Image 4** **:** An opened image with lightbox and the possibility
to switch to the next and previous image
|img-5|
**Image 5** **:** Modified CSS files to get a different output, take
a look at the section “Alternative Layout & Design I”
|img-6|
**Image 6:** Another cool design, take a look at the section
“Alternative Layout & Design II”
|img-7|
**Image 7:** The flexform settings in the backend. It is very easy.
Just select the mode and you are nearly done(DAM is just selectable if
it is installed).
.. _Live-Demo-Examples:
Live-Demo & Examples
^^^^^^^^^^^^^^^^^^^^
See the extension with all the features in action at my website:
- in English: `http://www.rggooglemap.com/en/dev/rgsmoothgallery.html
`_
- in German: `http://www.rggooglemap.com/dev/rgsmoothgallery.html
`_
Visit all the examples which are linked at the bottom right like the
extension working together with the element “text with image”:
- in English: `http://www.rggooglemap.com/en/dev/rgsmoothgallery
/smoothgallery-in-text-with-image.html
`_
- in German: `http://www.rggooglemap.com/dev/rgsmoothgallery
/smoothgallery-in-text-mit-bild.html
`_
Sponsoring
I would like the following sponsors for supporting me and my work.
Die Apothekergenossenschaft `http://www.noweda.de
`_
.. _Upgrade-from-v-1-0-6:
Upgrade from v 1.0.6
--------------------
If you want to upgrade from 1.0.6, you need to consider 2 major
changes:
The flexforms positions changed a little bit and so you need to update
the content element one time. Just open it and press save again.
Because of some changes in the javascript files I introduced the
version number as a suffix to the file names of jd.gallery.js and
slightbox.js. So if you changed something there, take a look at the
originals.
.. _Users-manual:
Users manual
------------
Getting started is very easy!
Import/Download the extension and install it like every other
extension.
Include the static TS (from extension) in the template record (your
root TS or make an ext. template just for the page where you want the
SmoothGallery be displayed). :underline:`**The steps for the real
beginners are**` :
Select your root/first page.
Click in the menu on the left side “Template” and choose “Edit whole
record”.
Scroll down until you see the the same thing as in the screenshot
shown.
Search for the “SmoothGallery” entry on the right side, click on it to
get it on the left side.
Press “Save” and you are done.
|img-8|
Configure the extension using the flexform settings – See the exact
steps below (it is still very easy)
.. _Images-from-a-directory:
Images from a directory
^^^^^^^^^^^^^^^^^^^^^^^
To show all images from a directory you need to do the following
steps:
Follow the steps 1-2 from before
Add the **relative** path to the directory where the images are and
**don't forget the / at the end! The path looks like
fileadmin/myimages/day1/**
Add titles and descriptions to the images if you want. One line = One
image. Title & description are separated with the \| (“pipe”). So it
looks like
::
Title 1 | Text 1
Title 2 | Text 2
Title 4
Title 5 | Text 5
**Important & nice-to-have:** If the extension **rgfolderselector**
is installed, you get a very nice wizard to select the folder (No
mistyping and checking the path with FTP tools/extensions anymore).
.. _Images-from-records:
Images from records
^^^^^^^^^^^^^^^^^^^
To show images from records you need to create first of all some
records. Select a page or sysfolder and create a record “SmoothGallery
Image” and add there a title, description and an image. Then follow
these steps:
Follow the steps 1-2 from before
Add the plugin somewhere to the page and **select “Images from
records” in the dropdown in the flexforms** .
Add the page/sysfolder where you saved your records to the starting
point.
.. _Images-from-tt-content:
Images from tt\_content
^^^^^^^^^^^^^^^^^^^^^^^
This just works with css\_styled\_content.
To show the SmoothGallery inside a content element, follow these
steps:
Follow the steps 1-2 from before.
Create a content element “Text with Image” and fill it with text and
images.
Activate the checkbox “Activate SmoothGallery”.
**Please take also a look into the chapter Configuration -> Images
from tt\_content!**
.. _Images-from-DAM:
Images from DAM
^^^^^^^^^^^^^^^
The extension handles also records from DAM. To show images from DAM
follow these steps:
Follow the steps 1-2 from before.
Add the plugin somewhere to the page and **select “Images from DAM”
in the dropdown in the flexform.**
Select the images you want to display.
.. _Images-from-DAM-Category:
**Images from DAM Category**
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Using the DAM category selector works as “Images from DAM” - just
select “Images from DAM (categories)” instead
.. _Integration-into-tt-news:
Integration into tt\_news
^^^^^^^^^^^^^^^^^^^^^^^^^
Follow the first steps 1-2 from before and you are done. The rest of
the configuration is done with TS and is described in the section
below.
.. _Configuration:
Configuration
-------------
.. _Images-from-tt-content:
Images from tt\_content
^^^^^^^^^^^^^^^^^^^^^^^
This section is about the integration of the extension into the
content element “Text with image”. To activate the SmoothGallery you
need to activate the checkbox “Activate SmoothGallery” inside the
content element.
***DAM & tt\_content***
It is not possible to get the images inside a tt\_content record from
DAM. Who has the knowledge to help. Please contact me!
**Set the sizes**
To change the different sizes follow these steps:
:underline:`Large image (in the middle)` :
Use the width/height field in the content element.
:underline:`Lightbox:`
Use the constant editor or Constants
::
TS-CODE
plugin.tx_rgsmoothgallery {
lightboxWidth = 700
lightboxHeight = 700
}
:underline:`Thumbnails`
Use the constant editor or Constants
::
TS-CODE
plugin.tx_rgsmoothgallery {
thumbWidth = 700
thumbHeight = 700
}
**Usage of title & description**
To use the title and description you need to fill the fields **“Title
Text”** for the title and the **“Caption”** for the description. One
line per image.
**Configuration of the mode, thumbnails,...**
To configure the extension inside a content element you need to fill
the field **“Long Description URL:”** with the following code:
::
timed:true,
delay:2000,
showArrows: true,
showCarousel: false,
embedLinks:true,
lightbox:true
*Explanation:*
.. ### BEGIN~OF~TABLE ###
.. _timed:
timed
"""""
.. container:: table-row
Name
timed
Description
is either false or true
c
false
.. _delay:
delay
"""""
.. container:: table-row
Name
delay
Description
It timed is true, this will be the duration for the slideshow in ms
c
2000
.. _showArrows:
showArrows
""""""""""
.. container:: table-row
Name
showArrows
Description
Is either true or false. If the arrows should get displayed
c
true
.. _showCarousel:
showCarousel
""""""""""""
.. container:: table-row
Name
showCarousel
Description
Is either true or false. If the thumbnails should get displayed
c
true
.. _embedLinks:
embedLinks
""""""""""
.. container:: table-row
Name
embedLinks
Description
Is either true or false. If lightbox should get display
c
true
.. _lightbox:
lightbox
""""""""
.. container:: table-row
Name
lightbox
Description
Should always stay true. To turn off lightbox, use the embedLinks
c
true
.. ###### END~OF~TABLE ######
You can also set these settings via the constant editor with
::
TS-CODE
plugin.tx_rgsmoothgallery {
settings = timed:false,showArrows: true,showCarousel: false,embedLinks:true,lightbox:true
}
*Example:*
If you want a slideshow without arrows which should switch images
every 2s, take this into the TS or the field
::
timed:true,delay:2000,showArrows: false,showCarousel: false,embedLinks:false,lightbox:true
**Usage of a caption**
You can also set a caption which is positioned underneath the
SmoothGallery. To use it you need to fill out the field
**“Alternative Text”** . You can also use the field “Align” to
position the caption.
.. _Integration-into-tt-news:
Integration into tt\_news
^^^^^^^^^^^^^^^^^^^^^^^^^
A working example, used at the demo page
`http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-tt-
news.html `_
The output is fully configurable with TS. All you need to do insert
the following code:
::
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
**Be aware:** There should be no wrap around
###NEWS\_IMAGE###! Otherwise you break the gallery in Internet
Explorer v.6!
**Usage of a caption**
Use the field “caption” in the following way: Title & description are
separated with the \| (“pipe”). So it looks like
::
Title 1 | Text 1
Title 2 | Text 2
Title 4
Title 5 | Text 5
**Change behavior**
If you want to change the size or the behavior of the gallery, take a
look at the the section “Reference”, especially at the last entries.
Here are 2 possible settings which are also used at the demo page:
**LIST view**
In the list view,the thumbnails and the infopane are hidden.
::
TS-CODE
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery {
big.file.maxH = 180
width =240
height = 180
hideInfoPane = 1
showThumbs= 0
}
**SINGLE view**
Some values of the list view are overwritten to get a little bit
bigger images, thumbnails, the infopane and an slideshow with a
duration for every image of 3,5 seconds.
You can see it directly here:
`http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-tt-
news/detailansicht/big-buddha.html
`_
::
TS-CODE
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery {
big {
file.maxW = 300
file.maxH = 345
}
height = 230
width = 330
showThumbs= 1
thumbOpacity = 0.8
arrows = 1
hideInfoPane = 0
duration = 3500
}
To show the gallery only e.g. in LIST-view but not in SINGLE-view just
override the TS in the SINGLE-view. It is also possible to set a
different configuration for each view. Use therefore the following
syntax
::
TS-Code
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
plugin.tt_news.rgsmoothgallery.LIST {
arrows = 0
duration = 3000
}
.. _Using-a-different-field:
Using a different field
"""""""""""""""""""""""
It is possible to use a different field for the images of the gallery.
Therefore all you need is to extend tt\_news with the kickstarter by 2
fields: 1 field for the images and 1 for the caption. Afterwards you
need to specify the new fields by using this code (of course change
the names to the correct ones):
::
TS-Code
plugin.tt_news.rgsmoothgallery {
imageField = imagefieldname
imageFieldPrefix = uploads/tx_yourextensionkey/
captionField = captionfieldname
imageMarker = GALLERY
}
.. _FAQ:
FAQ
"""
- That the extension works in tt\_news it needs at least 2 images. If
you want it also for only one, set the
valueplugin.tt\_news.rgsmoothgallery.minimumImages = 1
- To use a different marker for the gallery, use this
TS:plugin.tt\_news.rgsmoothgallery. imageMarker = GALLERYThe marker
will be ###GALERY###
.. _Plugin-settings:
Plugin settings
^^^^^^^^^^^^^^^
The plugin settings are simple and pretty self explaining. Here are
all available fields:
.. ### BEGIN~OF~TABLE ###
.. _Mode:
Mode
""""
.. container:: table-row
1 sup`st` tab Settings
Mode
Description
The selected mode. Available are “Images from a directory”, “Images
from records” and if DAM is installed “Images from DAM” and “Images
from DAM (categories)”.
.. _Duration-ms:
Duration (ms)
"""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Duration (ms)
Description
If a value is inserted the images automatically change after the given
time.
Be aware: The value is in ms, not in seconds. So 1 second = 1000
.. _Width-Height-of-image:
Width / Height of image
"""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Width / Height of image
Description
The width/height of the large image
.. _Width-Height-of-gallery:
Width/Height of gallery
"""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Width/Height of gallery
Description
The width/height of the gallery
.. _Path-to-the-directory:
Path to the directory
"""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Path to the directory
Description
If mode is “Images from a directory” this is where you add the path to
the images.
.. _Startingpoint:
Startingpoint
"""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Startingpoint
Description
If mode is “Images from records” this is where to select the starting
point.
.. _Records:
Records
"""""""
.. container:: table-row
1 sup`st` tab Settings
Records
Description
If mode is “Images from DAM” this is where to select the records.
.. _2-sup-nd-tab-Advanced-Settings:
**2 :sup:`nd` tab: Advanced Settings**
""""""""""""""""""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
**2 :sup:`nd` tab: Advanced Settings**
Description
**Description:**
.. _Use-Lightbox:
Use Lightbox
""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Use Lightbox
Description
Usage of lightbox if this is active
.. _Use-Arrows:
Use Arrows
""""""""""
.. container:: table-row
1 sup`st` tab Settings
Use Arrows
Description
Usage of the arrows to the previous/next image if this is active
.. _Use-Thumbs:
Use Thumbs
""""""""""
.. container:: table-row
1 sup`st` tab Settings
Use Thumbs
Description
Usage of the thumbnails if this is active
.. _Use-Play-Pause-button:
Use Play/Pause button
"""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Use Play/Pause button
Description
Show a play/pause button to start/stop a slideshow
.. _Use-Watermarks:
Use Watermarks
""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Use Watermarks
Description
Usage of watermarks for the image in the middle and the lightbox-
image.
.. _Limit-Images-Displayed:
Limit Images Displayed
""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Limit Images Displayed
Description
Limit the amount of images. It is useful to show just a selection of
images. The selection uses “order by rand()” but with a cached output
(So no random images on same images if you reload).
.. _Opacity-Thumbnails:
Opacity Thumbnails
""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Opacity Thumbnails
Description
The opacity of the thumbnails. Default is 0.2 and allowed values are
between 0.00 and 1 (as double type).
.. _Spacing-Thumbnails:
Spacing Thumbnails
""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Spacing Thumbnails
Description
The spacing between the thumbnails. Default is 10 and allowed values
are greater than 1 (as int type).
.. _Hide-SlideInfoZone:
Hide SlideInfoZone
""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Hide SlideInfoZone
Description
Hide the zone which holds the title and the description of an image.
.. _Opacity-SlideInfoZone:
Opacity SlideInfoZone
"""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Opacity SlideInfoZone
Description
The opacity of the SlideInfoZone. Default is 0.7 and allowed values
are between 0.00 and 1 (as double type).
.. _External-Thumbs-DIV-ID:
External Thumbs DIV ID
""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
External Thumbs DIV ID
Description
The id of an div element to insert the thumbnails into it. Please read
the section “External Thumbnails”.
.. _Advanced-configuration:
Advanced configuration
""""""""""""""""""""""
.. container:: table-row
1 sup`st` tab Settings
Advanced configuration
Description
Possibility to configure the SmoothGallery by its possible options.
Nothing to do with the TYPO3 extension!
.. ###### END~OF~TABLE ######
.. _Reference:
Reference
^^^^^^^^^
This is the TS reference but I guess it is much easier to include a
slideshow with the cObj RECORDS or CONTENT if you want to it directly
.. ### BEGIN~OF~TABLE ###
.. _mode:
mode
""""
.. container:: table-row
Property
mode
Data type
string
Description
The mode you wanna run the plugin. Available are DIRECTORY and RECORDS
Default
.. _duration:
duration
""""""""
.. container:: table-row
Property
duration
Data type
int
Description
If you want a timed slideshow
Default
.. _startingpoint:
startingpoint
"""""""""""""
.. container:: table-row
Property
startingpoint
Data type
string
Description
The startingpoint with mode = DIRECTORY
Default
.. _startingpointrecords:
startingpointrecords
""""""""""""""""""""
.. container:: table-row
Property
startingpointrecords
Data type
string
Description
The startingpoint with mode = RECORDS
Default
.. _text:
text
""""
.. container:: table-row
Property
text
Data type
string
Description
The description and titles with mode = DIRECTORY
Default
.. _lightbox:
lightbox
""""""""
.. container:: table-row
Property
lightbox
Data type
boolean
Description
Usage of Lightbox
Default
.. _showThumbs:
showThumbs
""""""""""
.. container:: table-row
Property
showThumbs
Data type
boolean
Description
Usage of thumbnails
Default
.. _arrows:
arrows
""""""
.. container:: table-row
Property
arrows
Data type
boolean
Description
Usage of the arrows
Default
.. _thumb:
thumb
"""""
.. container:: table-row
Property
thumb
Data type
IMG\_RESOURCE
Description
The size of the thumbnail. Following is default
::
thumb = IMG_RESOURCE
thumb {
file.maxW = 100
file.maxH = 75
}
Default
.. _big:
big
"""
.. container:: table-row
Property
big
Data type
IMG\_RESOURCE
Description
The size of the big image in the middle. This is automatically
overwritten by the value in the flexforms (height,width)!
Following is default
::
big = IMG_RESOURCE
big {
file.maxW = 460
file.maxH = 345
}
Default
.. _lightbox:
lightbox
""""""""
.. container:: table-row
Property
lightbox
Data type
IMG\_RESOURCE
Description
The size of the lightbox image
::
lightbox = IMG_RESOURCE
lightbox {
file.maxW = 1000
file.maxH = 800
}
Default
.. _pathToMootools:
pathToMootools
""""""""""""""
.. container:: table-row
Property
pathToMootools
Data type
string
Description
Path to mootools.js
Default
EXT:rgsmoothgallery/res/scripts/js/mootools.js
.. _pathToJdgalleryJS:
pathToJdgalleryJS
"""""""""""""""""
.. container:: table-row
Property
pathToJdgalleryJS
Data type
string
Description
Path to the jd.gallery.js
Default
EXT:rgsmoothgallery/res/scripts/js/jd.gallery.js
.. _pathToJdgalleryCSS:
pathToJdgalleryCSS
""""""""""""""""""
.. container:: table-row
Property
pathToJdgalleryCSS
Data type
string
Description
Path to the jd.gallery.css
Default
EXT:rgsmoothgallery/res/scripts/css/jd.gallery.js
.. _pathToSlightboxJS:
pathToSlightboxJS
"""""""""""""""""
.. container:: table-row
Property
pathToSlightboxJS
Data type
string
Description
Path to the slightbox.js
Default
EXT:rgsmoothgallery/res/scripts/js/slightbox.js
.. _pathToSlightboxCSS:
pathToSlightboxCSS
""""""""""""""""""
.. container:: table-row
Property
pathToSlightboxCSS
Data type
string
Description
Path to the slightbox.css
Default
EXT:rgsmoothgallery/res/scripts/css/slightbox.css
.. _advancedSettings:
advancedSettings
""""""""""""""""
.. container:: table-row
Property
advancedSettings
Data type
string
Description
Modify the mode of the gallery by using the values of jd.gallery.js.
Every wrong character will break the whole gallery. A ',' at the end
is required.
Default
.. _limitImagesDisplayed:
limitImagesDisplayed
""""""""""""""""""""
.. container:: table-row
Property
limitImagesDisplayed
Data type
int
Description
Limit the amount of loaded images
Default
.. _showPlay:
showPlay
""""""""
.. container:: table-row
Property
showPlay
Data type
boolean
Description
Activiate the play/pause button
Default
.. _watermarks:
watermarks
""""""""""
.. container:: table-row
Property
watermarks
Data type
boolean
Description
Usage of watermarks. Please read the chapter about it to get more
information!
Default
.. _externalThumbs:
externalThumbs
""""""""""""""
.. container:: table-row
Property
externalThumbs
Data type
string
Description
Id of a div element to insert the thumbnails into it.
Default
.. _advancedSettings:
advancedSettings
""""""""""""""""
.. container:: table-row
Property
advancedSettings
Data type
string
Description
Possibility to configure the SmoothGallery script by its options
Default
.. _noscript:
noscript
""""""""
.. container:: table-row
Property
noscript
Data type
boolean
Description
If set to 0, the noscript part is not shown So no output if no
javascript is available!
Default
1
.. _id:
id
""
.. container:: table-row
Property
id
Data type
string
Description
It is just needed if you insert 2 galleries on the same page with TS,
to differ the 2 galleries.
Default
.. _hideInfoPane:
hideInfoPane
""""""""""""
.. container:: table-row
Property
hideInfoPane
Data type
boolean
Description
If set to 1, the infopane at the bottom is hidden
Default
0
.. _thumbOpacity:
thumbOpacity
""""""""""""
.. container:: table-row
Property
thumbOpacity
Data type
float
Description
The opacity of the thumbnails
Default
.. _slideInfoZoneOpacity:
slideInfoZoneOpacity
""""""""""""""""""""
.. container:: table-row
Property
slideInfoZoneOpacity
Data type
float
Description
The opacity of the Infopane
Default
.. _thumbSpacing:
thumbSpacing
""""""""""""
.. container:: table-row
Property
thumbSpacing
Data type
int
Description
The spacing of the thumbnails
Default
.. _enableSaveButton:
enableSaveButton
""""""""""""""""
.. container:: table-row
Property
enableSaveButton
Data type
boolean
Description
Enable the Save-Button in the Lightbox
Default
0
.. _enablePrintButton:
enablePrintButton
"""""""""""""""""
.. container:: table-row
Property
enablePrintButton
Data type
boolean
Description
Enable the Print-Button in the Lightbox
Default
0
.. _heightGallery:
heightGallery
"""""""""""""
.. container:: table-row
Property
heightGallery
Data type
int
Description
Height of the whole gallery
Default
.. _withGallery:
withGallery
"""""""""""
.. container:: table-row
Property
withGallery
Data type
int
Description
Width of the whole gallery
Default
.. ###### END~OF~TABLE ######
[tsref:(plugin.tx\_rgsmoothgallery\_pi1)]
.. _Advanced-configuration:
Advanced configuration
----------------------
.. _External-Thumbnails:
External Thumbnails
^^^^^^^^^^^^^^^^^^^
It is very easy to show the thumbnails of rgsmoothgallery in an
external place. An example is here:
`http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-
externen-thumbnails.html
`_ (English
`http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with-
external-thumbnails.html
`_ )
All you need is to insert in the field “External Thumbs DIV ID“ the id
of a div element or to add the id with TS
::
plugin.tx_rgsmoothgallery_pi1.externalthumbs = ext-thumbnails
and an html-element with this content
::
To get the output as in the example, you need to include the sample
CSS like in this way:
::
page.includeCSS.file21 = EXT:rgsmoothgallery/res/css/externalThumbs.css
.. _New-example:
New example
"""""""""""
There is a new example which makes it even easier because you don't
need to create this extra div anymore! There is a demo and the needed
configuration online at
`http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-
externen-thumbnails-ii.html
`_
.. _Cropped-images:
Cropped images
^^^^^^^^^^^^^^
Sometimes it is useful to crop images instead of using the proportions
of an image. An example is here:
`http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-
beschnittenen-bildern.html
`_ (English:
`http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with-
cropped-images.html `_ )
The configuration for the samples is
**SmoothGallery I**
::
Width of image: 330c+30
Height of image: 330c-25
Width of gallery: 330
Height of gallery: 330
**SmoothGallery II**
::
Width of image: 420c
Height of image: 160c
Width of gallery: 420
Height of gallery: 160
**SmoothGallery III**
::
Width of image: 420c
Height of image: 160c
Width of gallery: 420
Height of gallery: 190
More information about cropping can be found in the TsRef:
`http://typo3.org/documentation/document-
library/references/doc\_core\_tsref/4.1.0/view/5/2/
`_
.. _Watermarks:
Watermarks
^^^^^^^^^^
If you want to use watermarks on your images you need to activate this
feature inside the flexforms or with Typoscript. An example is located
here: `http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-
mit-wasserzeichen.html `_ (English:
`http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-with-
watermarks.html `_ )
To configure it, take a look at the static TS (located at
ext/rgsmoothgallery/pi1/static/setup.txt):
::
TS-CODE
plugin.tx_rgsmoothgallery_pi1 {
big2 = IMG_RESOURCE
big2 {
file = GIFBUILDER
file {
XY = [10.w],[10.h]
10=IMAGE
10 {
file.maxW=460
file.maxH=345
}
20=TEXT
20 {
text.data = date:Y
text.noTrimWrap = |(c) | by somebody |
align=right
offset=0,[10.h]-45
fontSize=10
fontColor=#ffffff
#niceText=1
}
}
}
}
So this code changes the text of the copyright only:
::
plugin.tx_rgsmoothgallery_pi1.big2.file.20.text.noTrimWrap = |(c) | by Georg Ringer |
To change the lightbox image, you need to do the same thing with
lightbox2 instead of lightbox.
**Please be aware:** Using this features influences the quality of the
image in a bad way. You can see the differences on the example page.
You can make the output better with changing jpg\_quality in the
install tool (Section “All configuration) to 100
::
[GFX][jpg_quality] = 100
.. _Alternative-Layout-Design-I:
Alternative Layout & Design I
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
It is quite boring to see the same layout over and over and it is very
easy to change the layout yourself. The following code and link should
serve as an example:
- DE: `http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-
erweiterten-einstellungen.html
`_
- EN: `http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-
with-advanced-settings.html
`_
You just need to change the path to 2 CSS files which come with the
latest version of rgsmoothgallery.
::
TS-CODE
plugin.tx_rgsmoothgallery_pi1 {
pathToJdgalleryCSS = EXT:rgsmoothgallery/res/css/jd.galleryColor.css
pathToSlightboxCSS = EXT:rgsmoothgallery/res/css/slightboxColor.css
}
.. _Alternative-Layout-Design-II:
Alternative Layout & Design II
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Thanks to Sandro there is another cool design available. You can take
a look at it at
- DE: `http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-
coolem-design.html `_
- EN: `http://www.rggooglemap.com/en/dev/rgsmoothgallery/smoothgallery-
with-a-cool-design.html
`_
All you need to do is:
1.) Load a different stylesheet
::
# TS Code
plugin.tx_rgsmoothgallery_pi1.pathToJdgalleryCSS = EXT:rgsmoothgallery/res/css/jd.galleryCool.css
2.) Set the configuration in the plugin like this:
Image width: 492cImage height: 305cGallery width: 492Gallery height:
305Opacity Thumbnails: 0.8Opacity SlideInfoZone: 0.6
If you want to use different sizes, take a look at the file
/rgsmoothgallery/res/css/img/cooldesign.zip which holds the original
psd file to modify the background of the gallery.
.. _Include-a-gallery-with-TS-only:
Include a gallery with TS only
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To include the rgSmoothgallery just with TS you need to look up the
section “Reference”. 2 simple examples are shown here
**1** :sup:`**st**` **example** : A gallery with images out of a
directory, changing every 5 seconds, lightbox,arrwos and thums
available and limited to 10 images
::
TS-CODE
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
mode = DIRECTORY
duration = 5000
startingpoint = fileadmin/here_are_my_images/
lightbox = 1
showThumbs = 1
arrows = 1
limitImagesDisplayed = 10
}
**2** :sup:`**nd**` **example** : A gallery displaying images out of
records with just arrows to switch to the previous & next image.
::
TS-CODE
lib.randomImage2 < plugin.tx_rgsmoothgallery_pi1
lib.randomImage2 {
mode = DIRECTORY
# 63 = uid of the page where the records are saved
startingpointrecords = 63
arrows = 1
}
**!! Be aware** : If you insert more than one rgsmoothgallery with TS,
you need to add an extra command to differ the 2 galleries. It is not
important what you insert as id but it need to be unique – it can be a
number or just a single character.
::
TS-CODE
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
...
}
lib.randomImage < plugin.tx_rgsmoothgallery_pi1
lib.randomImage {
...
id = something
}
.. _Fun-with-stdWrap:
Fun with stdWrap
^^^^^^^^^^^^^^^^
Since the version 1.0.10 every parameter can use the functions of the
powerful stdWrap! I just want to present 2 examples which seem very
nice.
**Example 1: Show every FE-User a different gallery**
Every FE user which all have a different path, which is in this
testcase fileadmin/upload//
The code should be self explaining.
::
plugin.tx_rgsmoothgallery_pi1 {
startingpoint {
override.data = TSFE:fe_user|user|username
override.wrap = fileadmin/upload/|/
}
}
**Example 2: Override a flexform value**
The usual approach is that the flexform configuration overrides the TS
configuration but it is also possible to override this with TS again.
In this example the gallery will change every 4 seconds, no matter
what in the flexforms is saved,
::
plugin.tx_rgsmoothgallery_pi1 {
duration {
override.value = 4000
}
}
.. _FAQ:
FAQ
---
**Q:** I don't have Imagemagick or GM but I wanna use this wonderful
extension. What should I do? **A:** If GD2 is available, take the
extensions “jb\_gd\_resize”
**Q:** I don't see any images in the frontend. What should I do?
**A:** 1.) First check the source code for the images which should be
in a div like this ..
. If no images
there, you need to add some.
**Q:** The path to the images is empty (src=””). **A:** Check the
rights of the files or if Imagemagick is available and installed.
**Q:** You can I rename the “Pictures” (German: “Thumbnails”)? **A:**
Do it with TS (Setup):plugin.tx\_rgsmoothgallery\_pi1.\_LOCAL\_LANG.de
fault.textShowCarousel = Picturesplugin.tx\_rgsmoothgallery\_pi1.\_LOC
AL\_LANG.de.textShowCarousel = Bilderübersicht
**Q:** The links to the previous/next image don't work. What should I
do? **A:** The given duration (in plugin or TS) is below something
like 1000 (ms, which is 1 second).
**Q:** The thumbnails hop around as soon as I click on the link to
open them. Why? **A:** This is a CSS problem. Please check your
existing CSS files!
**Q:** It takes very long to load the gallery. Why? **A1** : At the
first call all the images get rendered which can take a while. **A2**
: Don't add something like 100 images because it will take long and
nobody will every click through the images. Take a “real” gallery
extension like jm\_gallery, sk\_simplegallery, ....
**Q:** How do I get the print/save button? **A:** Simply enable the
buttons with TS:plugin.tx\_rgsmoothgallery\_pi1.enableSaveButton =
1plugin.tx\_rgsmoothgallery\_pi1.enablePrintButton = 1
.. _Known-problems:
Known problems
--------------
There is currently a problem with pmk\_slimbox and rgsmoothgallery
both installed and with extensions which use
prototype/script.aculo.us.
The save-file feature enables download of any image from the website.
If you use an extension like naw\_securedl this can make this
extension useless!
.. _To-Do-list:
To-Do list
----------
- If you want the extension working inside “Text with image” with DAM
images, please find someone who does it because I don't have got the
knowledge for it.
- Rating of images (development in progress)
- Comment system for images (development in progress)
- Please tell me.
.. _You-like-the-extension:
You like the extension?
-----------------------
If you like this extension, you can do one or more of the following
things:
- Write me a mail or create a posting at
`http://www.rggooglemap.com/dev/rgsmoothgallery.html
`_
- Please rate the extension in the Repository:
`http://typo3.org/extensions/ `_ search
for rgsmoothgallery, click on the title and then at “Ratings” (You
need to be registered and logged in at typo3.org)
- Donate something, so that I can write those kind of extensions for
you. More information is here: German:
`http://www.rggooglemap.com/menu/spende.html
`_ and English:
`http://www.rggooglemap.com/en/2/donate.html
`_ . Thanks!
.. _Thanks-to:
Thanks to
---------
I want to thank the following people
- Jonathan Schemoul for the SmoothGallery. Check out his page:
`http://smoothgallery.jondesign.net/showcase/gallery/
`_
- Jo Hasenau (and the other authors) for the great TYPO3 Cookbook where
I took some TS code from.
- All the people who support me, also financially to let me create those
extensions in my free time and who followed the vision of TYPO3
“inspiring people to share”.
.. _Changelog:
Changelog
---------
Please check out the history online
`http://www.rggooglemap.com/dev/rgsmoothgallery/history.html
`_ if you
are interested. The German version is always up to date and written in
English! ;)
1.2.0 (4.2.2008)- [Bug] Sorting DAM files- [Feature] `Easier external
thumbnails `_ 1.1.4 (25.1.2008)-
[Bug] small typo in savefile.php, thanks to Andreas Kretzer1.1.3
(23.1.2008)- [Bug] bugfix concerning only usage with DAM and non
image-files! thanks to gerards- [Bug] Change the classname
"content"1.1.2 (18.1.2008)- [Bug] Just a small bug concerning empty
directories, thanks Dmitry for providing the patch1.1.1 (7.11.2007)-
[Bug] with Smoothgallery in "Text w Img" & Security fix concerning
saving/printing an img
**1.0.10.** - [Feature] Every config option got its stdWrap option to
make some fancy things. More in the upcoming manual- [Feature]
Suggests Extension t3mootools by Peter Klein for a shared mootool lib.
Thanks a lot for sharing Peter!- [Feature] Split characters can be
changed now in the Extension Manager- [Feature] Print button in
lightbox view. Sponsored by " `Die Apothekergenossenschaft
`_ "- [Feature] Save button in lightbox view.
Sponsored by " `Die Apothekergenossenschaft `_
" **1.0.9. (release 19.8.2007)** - [Feature] Small speed improvement:
no title & description if the infopane is hidden- [Feature]] tt\_news
with more than 1 view on one page possible- [Feature] Better tt\_news
handling, more configuration with TS- [Feature] No possible to add
more galleries with TS (thx Michael Bakonyi)- [Manual] Add section for
including the gallery with TS- [Manual] Add more samples for handling
with tt\_news **1.0.8. (release 12.8.2007)** - [Bug] Images of CE
"Text with Image" were hidden. Sorry guys **1.0.7. (release
8.8.2007)** - [Misc] Update manual (+ some typos)- [Feature] `Ext
rgsmoothgallerylinks `_ which provides links to the images below
the gallery.- [Feature] no h3 & p tags if no text for it (little speed
and seo improvement)- [Feature] noscript can be turned off- [Feature]
2 more hooks- [Feature]works now also in cType "Image" (not only in
"Text with Image)killed in v 1.0.8- [Feature] Alternative, more
colorful css file to show what is possible ( `in action
`_ ).- [Feature] Set opacity with
flexforms- [Feature] Set external thumbnails with flexforms- [Feature]
Checkbox to switch off InfoSlideZone (at the bottom) in flexforms-
[Feature] Show loading bars also if plugin not loaded + show plugin
from beginning in correct height- [Feature] Watermarks in lightbox
image- [Feature] Advanced settings through flexform configuration-
[Feature] Set startingpoint also with TS- [Misc] Code improvement-
[Misc] maxitems to 50 (instead of 22) **1.0.6. (release 19.7.2007)** -
[Feature[ `Watermarks (Wasserzeichen)
`_ for the images- [Feature] Trim whitespaces from
directory path (flexforms + main class)- [Feature] `External controls
`_ no possible- [Feature] Hook added in
function addImage()- [Feature] Cropscale with the images possible-
[Feature] Multilanguage support at "open image" title tag-
[Feature]Sorting of files in mode "Images from directory]Not yet-
[Feature] DAM categories with recursive levels- [Feature] Include
extension rgfolderselector to choose a folder with a wizard- [Misc]New
Icon Setdidn't get in this version- [Bug] in pi1/locallang.xml- [Bug]
Short open Tag fixed- [Bug] DAM categories works now with limitation
**1.0.5. (release 6.7.2007)** - [Bug] A small Bug concerning "Images
from Dam"- [Bug] Bug concerncing the limitation of images solved
**1.0.4. (release 5.7.2007)** - [Feature] Check if static TS included
(fool proof)- [Feature] Check for correct timer duration (fool proof)-
[Feature] Check for activated javascript and set a single image if
not- [Feature] Limit number of images selected- [Feature] Works now
with DAM categories - thx Tobi- [Feature] Show title & description of
tt\_news inside of SmoothGallery- [Feature] No empty tags (p & h3)
because tidy doesn't like it- [Bug] Changed names flexformDAM\_ds.xml
<-> flexform\_ds.xml- [Misc] Update of manual- [Misc] Code cleaning
**1.0.3. (release 28.6.2007)** - [Bug] Sorry guys ;) **1.0.2. (release
27.6.2007)** - [Feature] `Integration into tt\_news
`_ - [Feature] SmoothGallery v.1.2- [Feature] Check for
missing / at the end of file directory- [Feature] Changeable paths to
CSS-Files- [Feature] Hide Thumbnails if an image is chosen or user
klicks on the next/prev-button- [Bug] Works now with pmkslimbox, see
manualnot solved yet, sorry **1.0.1. (release 12.6.2007)** - [Bug] Get
description & title from record **1.0.0. (release 6.6.2007)** - First
Release
|img-9| EXT: rgsmoothgallery - 15
.. ######CUTTER_MARK_IMAGES######
.. |img-1| image:: img-1.png
.. :align: left
.. :border: 0
.. :height: 353
.. :id: Grafik1
.. :name: Grafik1
.. :width: 467
.. |img-2| image:: img-2.png
.. :align: left
.. :border: 0
.. :height: 339
.. :id: Grafik2
.. :name: Grafik2
.. :width: 471
.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 170
.. :id: Grafik6
.. :name: Grafik6
.. :width: 432
.. |img-4| image:: img-4.png
.. :align: left
.. :border: 0
.. :height: 359
.. :id: Grafik3
.. :name: Grafik3
.. :width: 520
.. |img-5| image:: img-5.png
.. :align: left
.. :border: 0
.. :height: 259
.. :id: Grafik7
.. :name: Grafik7
.. :width: 561
.. |img-6| image:: img-6.jpeg
.. :align: left
.. :border: 0
.. :height: 361
.. :id: Grafik8
.. :name: Grafik8
.. :width: 548
.. |img-7| image:: img-7.png
.. :align: left
.. :border: 0
.. :height: 396
.. :id: Grafik4
.. :name: Grafik4
.. :width: 534
.. |img-8| image:: img-8.png
.. :align: left
.. :border: 0
.. :height: 181
.. :id: Grafik5
.. :name: Grafik5
.. :width: 422
.. |img-9| image:: img-9.png
.. :align: left
.. :border: 0
.. :height: 32
.. :id: Graphic1
.. :name: Graphic1
.. :width: 102