.. 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