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:
Large image (in the middle):
Use the width/height field in the content element.
Lightbox:
Use the constant editor or Constants
TS-CODE
plugin.tx_rgsmoothgallery {lightboxWidth = 700
lightboxHeight = 700
}
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:5000,
showArrows: true,
showCarousel: false,
embedLinks:true,
lightbox:true
Explanation:
Name: | Description: | |
|---|---|---|
timed | is either false or set it to the ms you want as a delay | false |
showArrows | Is either true or false. If the arrows should get displayed | true |
showCarousel | Is either true or false. If the thumbnails should get displayed | true |
embedLinks | Is either true or false. If lightbox should get display | true |
lightbox | Should always stay true. To turn off lightbox, use the embedLinks | true |
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: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.
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 <!--###LINK_ITEM###--> 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 pag:
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.
The plugin settings are simple and pretty self explaining. Here are all available fields:
1st tab: Settings | Description: |
|---|---|
Mode | 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) | 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 | The width/height of the large image |
Width/Height of gallery | The width/height of the gallery |
Path to the directory | If mode is “Images from a directory” this is where you add the path to the images. |
Startingpoint | If mode is “Images from records” this is where to select the starting point. |
Records | If mode is “Images from DAM” this is where to select the records. |
2nd tab: Advanced Settings | Description: |
Use Lightbox | Usage of lightbox if this is active |
Use Arrows | Usage of the arrows to the previous/next image if this is active |
Use Thumbs | Usage of the thumbnails if this is active |
Use Watermarks | Usage of watermarks for the image in the middle and the lightbox-image. |
Limit Images Displayed | 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 | The opacity of the thumbnails. Default is 0.2 and allowed values are between 0.00 and 1 (as double type). |
Spacing Thumbnails | The spacing between the thumbnails. Default is 10 and allowed values are greater than 1 (as int type). |
Hide SlideInfoZone | Hide the zone which holds the title and the description of an image. |
Opacity SlideInfoZone | 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 | The id of an div element to insert the thumbnails into it. Please read the section “External Thumbnails”. |
Advanced configuration | Possibility to configure the SmoothGallery by its possible options. Nothing to do with the TYPO3 extension! |
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
Property: | Data type: | Description: | Default: |
|---|---|---|---|
mode | string | The mode you wanna run the plugin. Available are DIRECTORY and RECORDS | |
duration | int | If you want a timed slideshow | |
startingpoint | string | The startingpoint with mode = DIRECTORY | |
startingpointrecords | string | The startingpoint with mode = RECORDS | |
text | string | The description and titles with mode = DIRECTORY | |
lightbox | boolean | Usage of Lightbox | |
showThumbs | boolean | Usage of thumbnails | |
arrows | boolean | Usage of the arrows | |
thumb | IMG_RESOURCE | The size of the thumbnail. Following is default thumb = IMG_RESOURCE thumb {file.maxW = 100 file.maxH = 75 } | |
big | IMG_RESOURCE | 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 } | |
lightbox | IMG_RESOURCE | The size of the lightbox image lightbox = IMG_RESOURCE lightbox {file.maxW = 1000 file.maxH = 800 } | |
pathToMootools | string | Path to mootools.js | EXT:rgsmoothgallery/res/scripts/js/mootools.js |
pathToJdgalleryJS | string | Path to the jd.gallery.js | EXT:rgsmoothgallery/res/scripts/js/jd.gallery.js |
pathToJdgalleryCSS | string | Path to the jd.gallery.css | EXT:rgsmoothgallery/res/scripts/css/jd.gallery.js |
pathToSlightboxJS | string | Path to the slightbox.js | EXT:rgsmoothgallery/res/scripts/js/slightbox.js |
pathToSlightboxCSS | string | Path to the slightbox.css | EXT:rgsmoothgallery/res/scripts/css/slightbox.css |
advancedSettings | string | 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. | |
limitImagesDisplayed | int | Limit the amount of loaded images | |
watermarks | boolean | Usage of watermarks. Please read the chapter about it to get more information! | |
externalThumbs | string | Id of a div element to insert the thumbnails into it. | |
advancedSettings | string | Possibility to configure the SmoothGallery script by its options | |
noscript | boolean | If set to 0, the noscript part is not shown So no output if no javascript is available! | 1 |
id | string | It is just needed if you insert 2 galleries on the same page with TS, to differ the 2 galleries. | |
hideInfoPane | boolean | If set to 1, the infopane at the bottom is hidden | 0 |
thumbOpacity | float | The opacity of the thumbnails | |
slideInfoZoneOpacity | float | The opacity of the Infopane | |
thumbSpacing | int | The spacing of the thumbnails |
[tsref:(plugin.tx_rgsmoothgallery_pi1)]
