Effects
Effects determine how photos are presented on the album detail page. This page covers the effect list, effect options and effect styles.
The module ships with ten animated presentation effects:
| Effect | Description |
|---|---|
| Effect_01_Gallery | Gallery |
| Effect_02_Gallery | Gallery (another layout) |
| Effect_03_Carousel | Carousel |
| Effect_04_ArticleList | Article-list style |
| Effect_05_TransBanner | Transition banner |
| Effect_07_UnoSlider | UnoSlider sliding |
| Effect_08_ImageScroll | Image scrolling |
| Effect_09_ImagesLoaded | Progressive loading / masonry |
| Effect_10_Portfolio | Portfolio |
| Effect_11_PhotoGallery | Photo gallery |
Different themes per album
Themes (effects) can be switched on individual albums, so each album can be presented in the style that suits it best. New effects are added in regular updates.
Effect List
Open the Effect List page in the management menu, choose the photo presentation for the album detail page and apply it. The list uses the same card layout as Skin List:
- Each card shows a preview image, name and version, a description (for some effects) and a Demo Url link to the official demo.
- Effects that are not applied show a green apply button (play icon); click it to apply.
- The currently applied effect shows a disabled stop button, and a gear button (labeled with the current theme name) appears next to its name, linking to that effect's Effect Options page.
Single effect version
If the interface says "The module you are using is just a single effect version", your license only covers one effect. Purchase the full version of DNNGo.PhotoAlbums to use all effects.
Effect Options
After an effect is applied, the Effect Options page configures its parameters. At the top is the General Settings panel whose Theme Name dropdown picks and previews a theme of the effect; below is the effect-specific parameter panel, with Update / Cancel buttons at the bottom. Available parameters differ per effect — the following uses the carousel Effect_04_Carousel as the example.
Basic Options (carousel parameters)
| Option | Description |
|---|---|
| Infinite | Infinite loop sliding |
| Accessibility | Enable Tab and arrow key navigation |
| AdaptiveHeight | Adaptive height for single-image horizontal carousels |
| Autoplay / AutoplaySpeed | Autoplay and its interval in milliseconds (default 3000) |
| Speed | Slide animation speed in milliseconds (default 500) |
| Arrows | Show previous/next arrows |
| Dots | Show dot indicators |
| CssEase | Easing: linear / ease / ease-in / ease-out / ease-in-out |
| Draggable | Enable mouse dragging |
| PauseOnHover | Pause autoplay on hover |
| Items | Items per page (default 6) |
| Desktop / DesktopSmall / Tablet / Mobile Items | Items per page at responsive breakpoints (<1199 / <979 / <768 / <479px, default 6 / 5 / 4 / 2) |
| Items Spacing | Spacing between items |
| Slides To Scroll | Scroll unit: One Page / One Item |
| Display Title / Display Summary | Whether to show photo titles and summaries |
prettyPhoto Setting (lightbox parameters)
Behavior when a photo is clicked to enlarge (prettyPhoto lightbox):
| Option | Description |
|---|---|
| prettyPhoto Theme | Lightbox theme: pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook |
| Animation speed | Lightbox animation speed: fast / slow / normal |
| Slide Show | Autoplay interval inside the lightbox in milliseconds (default 3000) |
| Auto Play | Autoplay after the lightbox opens |
| Overlay gallery | Show a thumbnail filmstrip at the bottom of the lightbox |
| Display Title | Show the photo title in the lightbox |
Effect Style
The Effect Style page is an online CSS editor, just like Skin Style: the Theme Settings textarea in the Basic Settings panel holds the style overrides for the current effect theme (it may be empty if never edited). Write or change CSS and click Update to save, or Cancel to discard — fine-tune the effect's appearance this way.
TIP
Only write overrides for the selectors you actually need to adjust, and keep a local backup; after saving, force-refresh the browser (Ctrl+F5) to see the result.
Next Steps
- Skins — configure the album list page appearance
- DashBoard module — use these effects in a sidebar