Gallery
With a gallery you can present dozens of photos to the visitors of your website in a slide show.
You can add a gallery to every page area or area template. To add a gallery, edit the content of a page area or area template and drag the gallery from the items to the editor.
A gallery shows a range of pictures as thumbnails. The visitor of your website can click on each thumbnail to see a larger version. Optional you can add a slideshow, so that the next picture will be loaded automatically.
To add pictures to your gallery, double click on it to edit its content. Drag the pictures around to reorder them or click into the close widget of a picture to delete it. In the properties are several options:
Edit Gallery > Add One Picture | Select a picture from your harddisk to add it to your gallery. |
---|---|
Edit Gallery > Add From Folder | Select a folder with pictures from your harddisk. Goldfish will add all of these pictures to your gallery. |
Edit Gallery > Delete All Pictures | Removes all pictures from your gallery. |
If you add pictures to your gallery, the media import window will appear for every picture. If you have large pictures (e.g. from a digital camera), you should reduce the size to max. 700 x 700 pixels. You can enter a description for every picture if you want. Check For All if you don't that the media import window pops up again for every picture.
If a visitor of your website clicks on a thumbnail, the larger version of the picture will be loaded. There are several display types of the larger version.
Choose Animated Gallery at Presentation Page > Type in the properties and the pictures will pop up in the front, while your website is faded dark.
Choose Image Zoom at Presentation Page > Type in the properties and the pictures will pop up in the front, while your website keeps in the background.
Choose Classic at Presentation Page > Type in the properties and the pictures will be loaded on a seperate page.
If you want to load pictures automatically in a slide show, you can enable Presentation Page > Slide Pause (Sec.) in the properties and enter a time in seconds. Otherwise deactivate this option. If you want to show the comments, which you have entered in the media import window below every picture, enable Presentation Page > Show Description.
To change a comment for a picture, double click on the gallery to edit it and right click (ctrl-click) on an image and choose Edit Comment....
Properties for Gallery
These properties can be set for a gallery. Select a gallery to show its properties.
Item > Left | Sets the distance from the left side of the parent element in pixels. |
---|---|
Item > Top | Sets the distance from the top side of the parent element in pixels. |
Item > Width | Sets the width of the item in pixels. |
Item > Height | Sets the width of the item in pixels. |
Item > Padding Left | Sets the distance from the left side of the item to the content in pixels. |
Item > Padding Right | Sets the distance from the right side of the item to the content in pixels. |
Item > Padding Top | Sets the distance from the top side of the item to the content in pixels. |
Item > Padding Bottom | Sets the distance from the bottom side of the item to the content in pixels. |
Item > Background Color | Select a background color for the item. |
Item > Background Picture Clip | Select a background picture from the Goldfish Clips library. This option is only available if you have the Goldfish Clips library installed. |
Item > Background Picture | Select a background picture for the item. With Repeat, you can choose how the picture will be displayed. |
Item > Border Left Width | Displays a border on the left side of the item in the choosen width (pixels). |
Item > Border Left Color | Select a color for the left border. |
Item > Border Right Width | Displays a border on the right side of the item in the choosen width (pixels). |
Item > Border Right Color | Select a color for the right border. |
Item > Border Top Width | Displays a border on the top side of the item in the choosen width (pixels). |
Item > Border Top Color | Select a color for the top border. |
Item > Border Bottom Width | Displays a border on the bottom side of the item in the choosen width (pixels). |
Item > Border Bottom Color | Select a color for the bottom border. |
Item > Add HTML Code | Add custom html code to the item to extend Goldfish's functionality. |
Item > Add CSS Code | Add custom css code to the item. The code will be stored in the css section of your website. You can't change the css code of internal items, but you can use the css code in your custom html code. |
Item > Identifer (Id) | Sets the value for the id property. You can use this id to access the item with JavaScript. |
Gallery > Edit Content | Click here to edit the content of a gallery or double click on it. |
Gallery > Title | The title of your gallery. It is shown on the presentation page in the title bar of the web browser (only if you choose Classic as gallery type). |
Preview Icon > Icon width (max) | Sets the maximal with of a thumbnail. Maximal because the picture is resized in aspect ratio. |
Preview Icon > Icon height (max) | Sets the maximal height of a thumbnail. Maximal because the picture is resized in aspect ratio. |
Preview Icon > Margin horizontal | Sets the space between the bottom of a thumbnail and the top of the next thumbnail. |
Preview Icon > Margin vertical | Sets the space between the right of a thumbnail and the left of the next thumbnail. |
Preview Icon > Padding Left | Sets the distance from the left side of a thumbnail to the content in pixels. |
Preview Icon > Padding Right | Sets the distance from the right side of a thumbnail to the content in pixels. |
Preview Icon > Padding Top | Sets the distance from the top side of a thumbnail to the content in pixels. |
Preview Icon > Padding Bottom | Sets the distance from the bottom side of a thumbnail to the content in pixels. |
Preview Icon > Background Color | Select a background color for a thumbnail. |
Preview Icon > Background Picture Clip | Select a background picture from the Goldfish Clips library. This option is only available if you have the Goldfish Clips library installed. |
Preview Icon > Background Picture | Select a background picture for a thumbnail. With Repeat, you can choose how the picture will be displayed. |
Preview Icon > Border Left Width | Displays a border on the left side of a thumbnail in the choosen width (pixels). |
Preview Icon > Border Left Color | Select a color for the left border. |
Preview Icon > Border Right Width | Displays a border on the right side of a thumbnail in the choosen width (pixels). |
Preview Icon > Border Right Color | Select a color for the right border. |
Preview Icon > Border Top Width | Displays a border on the top side of a thumbnail in the choosen width (pixels). |
Preview Icon > Border Top Color | Select a color for the top border. |
Preview Icon > Border Bottom Width | Displays a border on the bottom side of a thumbnail in the choosen width (pixels). |
Preview Icon > Border Bottom Color | Select a color for the bottom border. |
Presentation Page > Type | Choose the type of the gallery. The type affects how the larger version of a thumbnail will be presented. |
Presentation Page > Slide Pause (Sec) | Sets how long a pictures is shown in the slideshow. Deactivate this to have no slideshow. |
Presentation Page > Show Description | Shows the comment of a picture below the large version picture on the presentation page. |
Presentation Page > Font Style | Sets the font style for the presentation page. |
Presentation Page > Background Color | Select a background color for the presentation page. |
Presentation Page > Background Picture Clip | Select a background picture from the Goldfish Clips library. This option is only available if you have the Goldfish Clips library installed. |
Presentation Page > Background Picture | Select a background picture for the presentation page. With Repeat, you can choose how the picture will be displayed. |
Presentation Page > Opacity (%) | Sets the opacity of the background (only available for Animated Gallery as gallery type. |
Did this help page answer your questions?
If you need additional assistance regarding this topic or if there's missing some information in this chapter, please write us.