Vertical Logo Scroller

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

1. Log in to your Joomla backend
2. Navigate to Extensions > Manage > Install
3. Click on the "Upload Package File" tab
4. Select the module installation file (mod_logo_scroller_X.x.zip)
5. Click "Upload and Install"
6. Navigate to Extensions > Modules
7. Click "New" and select "Vertical Logo Scroller"
8. 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

1. Navigate to Extensions > Modules
2. Click "New" button
3. 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