Introduction
Vertical Logo Scroller is a powerful Joomla module that displays logos, images, or brand icons in a smooth vertical scrolling carousel. Perfect for showcasing partner logos, client testimonials, brand partnerships, or any collection of images in an elegant, space-saving vertical format.
Key Highlights
- Full Joomla 4.x Compatibility
- Native Image Resizing
- Flexible Image Sources (Folder or Slides)
- Customizable Scrolling Options
- Auto-Scroll Support
- Link Management
- Performance Optimized
- Security Enhanced
- Fully Responsive Design
- No External Dependencies
Perfect For:
- Partner logos display
- Client testimonials
- Brand partnerships
- Product showcases
- Award badges
- Social proof
- Portfolio items
- Team member photos
Installation
Downloading the Extension
After purchasing the extension, you will receive a download link for the module package.
Installing the Module
- Log in to your Joomla backend
- Navigate to Extensions > Manage > Install
- Click on the "Upload Package File" tab
- Select the module installation file (
mod_logo_scroller_X.x.zip) - Click "Upload and Install"
- Navigate to Extensions > Modules
- Click "New" and select "Vertical Logo Scroller"
- Configure and publish the module
A success message will be displayed once the installation is complete.
System Requirements
- Joomla 4.0 or higher
- PHP 7.4 or higher
- jQuery (included with Joomla)
Image Settings
Access module settings by navigating to Extensions > Modules, create or edit a "Vertical Logo Scroller" module.
Image Source
- Image Path Selection: Select whether to use folder-based images or individual slides
- Choose "From Folder" to automatically load all images from a folder
- Choose "Individual Image Path" to add images manually with custom settings
Folder Mode Settings
- Image Folder Path: Enter the path to your image folder (e.g.,
images/partners/) - Folder must be within the
images/directory - All image files (JPEG, PNG, GIF, WebP) will be automatically loaded
- Show Images: Choose Sequential or Random display
- Sort Images By: Ascending (A-Z) or Descending (Z-A)
Slides Mode Settings
- Slides: Click the "Add" button to add individual images
- Each slide has Image, Link, Alt Text, and Status fields
- You can add multiple slides
- Enable/disable individual slides
Image Resizing
- Enable Image Resizer: Enable automatic image resizing
- Resize Image By: Height, Width, or Both
- Image Height: Set height in pixels (when resizing by height or both)
- Image Width: Set width in pixels (when resizing by width or both)
- Uses Joomla's native Image class for efficient processing
- Resized images are cached for better performance
Scrolling Settings
Scroll Configuration
- Scrolled Items: Number of items to scroll at once (default: 1)
- Minimum value is 1
- Higher values scroll more items per animation
Animation Settings
- Animation Speed: Speed of scroll animation in milliseconds (default: 500)
- Lower values = faster animation
- Set to 0 to disable animation
- Animation Effects: Choose Linear or Swing easing
- Linear: Constant speed
- Swing: Easing animation with acceleration/deceleration
Wrapping Options
- Wrapping Type: Controls how scrolling wraps at ends
- First: Wrap at first item
- Last: Wrap at last item
- Both: Wrap at both ends
- Circular: Continuous loop
- Null: No wrapping, stops at ends
Auto-Scroll
- Auto Scroll: Enable/disable automatic scrolling
- Auto Scroll Time: Time between scrolls in milliseconds (default: 2000)
- Lower values = faster auto-scroll
- Auto-scroll pauses on user interaction
Styling Settings
Dimensions
- Slider Height: Set height in pixels or "auto" (default: auto)
- Slider Width: Set width in pixels (default: 200px)
- Use pixels (e.g., 300px) or percentage (e.g., 100%)
- Responsive design adapts to container
Colors
- Background Color: Container background color (default: rgba(255, 255, 255, 0))
- Supports RGBA colors for transparency
- Use color picker or enter hex/rgba values
Navigation Arrows
- CSS-based arrows (no image files needed)
- Smooth hover effects
- Disabled state styling
- Responsive positioning
- Customizable appearance
Module Class Suffix
- Module Suffix: Add custom CSS classes
- Perfect for theme integration
- Multiple module instances support
- Use for custom styling
Link Settings
Link Configuration
- Enable Link: Enable/disable links for images
- Only available when using Individual Image Path mode
- Set per-image links in slides
Link Target
- Open in: Choose how links open
- New Tab: Opens link in new browser tab
- Same Window: Opens link in same window
- Perfect for linking logos to partner websites
Adding Links to Slides
- When adding slides, enter URL in "Link" field
- Links are optional - leave empty to disable link for that image
- Each slide can have its own link
- Alt text should be provided for accessibility
Configuration Guide
Step-by-Step Configuration
Step 1: Create Module Instance
- Navigate to Extensions > Modules
- Click "New" button
- Select "Vertical Logo Scroller" from the list
Step 2: Choose Image Source
- Choose "From Folder" to load images automatically from a folder
- Or choose "Individual Image Path" to add images manually
Step 3: Configure Folder Mode (if using folder)
- Enter folder path (e.g.,
images/partners/) - Choose display mode (Sequential or Random)
- Set sort order (Ascending or Descending)
- Enable image resizing if needed
Step 4: Add Slides (if using slides)
- Click the "Add" button to add a new slide
- Select image using media manager
- Add link URL (optional)
- Enter alt text for accessibility
- Set status (Show or Hide)
- Repeat to add more slides
Step 5: Configure Scrolling
- Set slider height and width
- Configure scroll speed and animation
- Set wrapping type
- Enable auto-scroll if desired
- Set auto-scroll timing
Step 6: Configure Styling
- Set background color
- Add module class suffix if needed
Step 7: Assign and Publish
- Select module position
- Set menu assignment
- Set access level if needed
- Publish the module
Best Practices
- Use consistent image dimensions for best results
- Optimize images before upload
- Enable image resizing for better performance
- Use appropriate scroll speed (not too fast)
- Always provide alt text for accessibility
- Test on different screen sizes
Features
Core Features
- Vertical Scrolling: Smooth vertical carousel with professional animations
- Flexible Image Sources: Load from folder or add individual slides
- Automatic Image Resizing: Uses Joomla's native Image class
- Customizable Scrolling: Control speed, animation, and wrapping
- Auto-Scroll Support: Automatic scrolling with customizable timing
- Link Management: Add links to individual images
- Responsive Design: Works perfectly on all devices
- Performance Optimized: Lightweight and fast
Image Management Features
- Folder-Based Loading: Automatically load all images from a folder
- Individual Slides: Add images one by one with custom settings
- Image Resizing: Resize by height, width, or both
- Image Sorting: Sequential or random display
- Format Support: JPEG, PNG, GIF, WebP
Scrolling Features
- Smooth Animations: Linear or swing easing
- Wrapping Options: First, Last, Both, Circular, or None
- Auto-Scroll: Automatic scrolling with pause on hover
- Manual Controls: Navigation arrows for user control
- Touch Support: Works on mobile devices
Styling Features
- Customizable Dimensions: Set height and width
- Background Colors: RGBA color support
- CSS Arrows: No image files needed
- Module Class Suffix: Custom CSS classes
- Responsive Design: Adapts to screen size
Compatibility
- Joomla 4.x Compatible: Full support for modern Joomla versions
- Modern PHP: PHP 7.4+ syntax and features
- No External Dependencies: Uses only Joomla native libraries
- Future-Proof: Regular updates and security patches
FAQ
General Questions
Which Joomla versions are supported?
- The module is fully compatible with Joomla 4.0 and higher
How do I create a vertical logo scroller module?
- Go to Extensions > Modules > New
- Select "Vertical Logo Scroller"
- Choose image source (Folder or Slides)
- Configure scrolling and styling options
- Assign to module position and publish
Can I load images from a folder automatically?
- Yes, set Image Path Selection to "From Folder"
- Enter the folder path (e.g.,
images/partners/) - All images in the folder will be automatically loaded
- Images are sorted alphabetically by default
Configuration Questions
What's the difference between Folder and Slides mode?
- Folder: Automatically loads all images from a folder
- Slides: Allows you to add images manually with custom links and alt text
- Choose based on your needs
How do I add links to images?
- Use Individual Image Path mode
- Add slides and enter URL in the Link field
- Set link target (New Tab or Same Window)
- Links are optional per slide
How does image resizing work?
- Enable Image Resizer in module settings
- Choose resize method (Height, Width, or Both)
- Set dimensions
- Images are automatically resized and cached
- Uses Joomla's native Image class
Scrolling Questions
How do I control scroll speed?
- Use Animation Speed setting (in milliseconds)
- Lower values = faster animation
- Default is 500ms
What's the difference between Linear and Swing animation?
- Linear: Constant speed throughout animation
- Swing: Easing animation with acceleration/deceleration
- Swing provides smoother, more natural movement
How does auto-scroll work?
- Enable Auto Scroll in settings
- Set Auto Scroll Time (time between scrolls)
- Auto-scroll pauses when user hovers over slider
- Resumes when user moves mouse away
Technical Questions
Does the module use external libraries?
- No, uses only Joomla native libraries
- Uses Joomla's Image class for resizing
- Uses jQuery (included with Joomla)
- Uses jCarousel library (included in module)
Is the slider responsive?
- Yes, the slider is fully responsive
- Adapts to screen size automatically
- Works on desktop, tablet, and mobile
- Touch-friendly controls
How are images cached?
- Resized images are stored in
images/logo_scroller/ - Images are cached after first resize
- Cache improves performance
- Clear cache by deleting folder if needed
Troubleshooting
Common Issues and Solutions
Module Issues
Module Not Displaying
- Ensure the module is published
- Check module position is correct for your template
- Verify menu assignment includes the current page
- Check that module is assigned to correct user groups
- Clear Joomla cache
- Verify folder path is correct (if using folder mode)
- Check that slides are added (if using slides mode)
No Images Displaying
- Check that folder path is correct (for folder mode)
- Verify folder contains image files
- Check that images are in supported formats (JPEG, PNG, GIF, WebP)
- Verify slides are added and enabled (for slides mode)
- Check that image paths are correct
- Verify folder is within
images/directory
Scrolling Issues
Slider Not Scrolling
- Check that jQuery is loaded (included with Joomla)
- Verify jCarousel JavaScript file is loading
- Check browser console for JavaScript errors
- Ensure no other scripts are conflicting
- Clear browser cache
- Verify WebAssetManager is working correctly
Auto-Scroll Not Working
- Check that Auto Scroll is enabled
- Verify Auto Scroll Time is set (greater than 0)
- Check that there are multiple images
- Verify wrapping is enabled if needed
Image Issues
Images Not Resizing
- Check that Image Resizer is enabled
- Verify dimensions are set correctly
- Check that resize method is selected
- Verify folder permissions for
images/logo_scroller/ - Check Joomla error logs for image processing errors
Images Displaying Incorrectly
- Check image file formats are supported
- Verify image paths are correct
- Check for broken image links
- Verify folder permissions
Styling Issues
Styling Not Applied
- Check CSS files are loading correctly
- Verify no CSS conflicts with your template
- Check browser console for CSS errors
- Use browser developer tools to inspect styles
- Try disabling other modules/plugins temporarily
Navigation Arrows Not Showing
- Check that CSS file is loading
- Verify no CSS conflicts
- Check browser console for errors
- Clear browser cache
Getting Help
If you continue to experience issues:
- Check Joomla error logs for PHP errors
- Visit our support forum: https://support.joomlax.com
- Ensure you're using the latest version
- Verify your Joomla version is compatible (4.0+)
- Check documentation: https://joomlax.com/documentation/vertical-logo-scroller