Effects
Effects manage the slideshow used for article gallery images, working together with the skin. The administration area has three pages: Effect List, Options and Style.
Effect List
Effect List shows the available effects as cards with a preview image, name, description, version and a Demo Url link. Click Activate to enable an effect. The effect in use shows an Activated state plus a shortcut button for the selected theme (e.g. Theme_Slider_Default) that jumps straight to the effect options.
Two effects are built in, both based on UnoSlider — an advanced image and content slider built with responsive design and mobile devices in mind:
| Effect | Description |
|---|---|
| Effect_01_Carousel | A rotating carousel showing multiple items at once |
| Effect_02_Slider | A focus slider showing one item at a time |
Effect Options
The Effects → Options page configures the active effect, in two panels.
General Settings: choose the effect Theme Name (effects offer different numbers of themes). The preview image below updates as you switch; save once you are satisfied.
Basic Options (using Effect_02_Slider as an example — parameters vary by effect):
| Field | Description |
|---|---|
| Autoplay | Play automatically (on by default) |
| Autoplay Speed | Interval in milliseconds, default 3000 (3 seconds per slide) |
| Fade | Use fade transitions instead of sliding (off by default) |
| cssEase | CSS3 easing: linear (default) / ease / ease-in / ease-out / ease-in-out |
| Speed | Slide/fade animation duration in milliseconds, default 300 |
| Dots | Show dot indicators (on by default) |
| Arrows | Show prev/next arrows (on by default) |
Effect Style
The Effects → Style page provides a Theme Settings editor containing the complete CSS of the current effect theme. Edits take effect after saving.
Using Theme_Slider_Default as an example:
| Block | Controls |
|---|---|
.slick-* base styles | The slider itself, arrows and dots |
.pro-single-item | Image entry overlays, zoom/link buttons, captions in four directions |
@media rules | Arrow positions at different screen widths |
.Theme_Slider_Default | Theme-specific styles (borders, arrow colors, dots) |
Editing tips
Same as Skin Style: append overrides at the end of the stylesheet and back up everything before editing.
Working with Gallery Images
The gallery images uploaded while adding an article are displayed as a slideshow on the article detail page, using the effect activated here.
Effects vs. DashBoard effects
- These Effects — belong to the xBlog main module and drive article galleries and similar carousels
- DashBoard effects — belong to the DashBoard sub-module and provide categories, archives, tag clouds, latest-article sliders and more