Platinum sponsors
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.
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
plugin.tx_rgsmoothgallery {lightboxWidth = 700
lightboxHeight = 700
}
Thumbnails
Use the constant editor or Constants
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
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.
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 arount ###NEWS_IMAGE###! Otherwise you break the Internet Explorer v.6!
If you want to change the size or the behavior of the gallery, take a look at the possible configuration
Property: | Data type: | Description: | Default: |
|---|---|---|---|
witdh | int | The width of the gallery, not of the images | 230 |
height | int | The height of the gallery, not of the images | 330 |
minimumImages | int | The minimum count of images to get SmoothGallery. Should be at least 2 | 2 |
startingpointrecords | string | The startingpoint with mode = RECORDS | |
settings | string | The behavior of the gallery. For explanation take a look at the chapter “Images from tt_content” -> Configuration of the mode | timed:false,showArrows: true,showCarousel: true,embedLinks:true,lightbox:true,textShowCarousel:'Thumbnails' |
[tsref:(plugin.tx_rgsmoothgallery_pi1)]
A working example, used at the demo page http://www.rggooglemap.com/dev/rgsmoothgallery/smoothgallery-mit-tt-news.html :
List view
plugin.tx_rgsmoothgallery_pi1 {big.file.maxH = 180
width =240
height = 180
}
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
Single view
plugin.tx_rgsmoothgallery_pi1 { big {file.maxW = 300
file.maxH = 345
}
height = 230
width = 330
}
plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1
The plugin is quite simple and pretty self explaining. Here are all available fields
Name: | Description: |
|---|---|
Mode | The selected mode. Available are “Images from a directory”, “Images from records” and if DAM is installed “Images from DAM”. |
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 |
Widt/Heighth of image | The widthheight of the large image |
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 |
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. |
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. |
[tsref:(plugin.tx_rgsmoothgallery_pi1)]
