Gallery Random Order Plugin FAQs

Installation & Setup

Basic Plugin Implementation

Add this code to your site's header via Settings > Advanced > Code Injection:

<!-- Gallery Random Order Plugin -->
<link href="/s/plugin-gallery-random.css" rel="stylesheet">
<script src="/s/plugin-gallery-random.js"></script>
<script>
pluginGalleryRandom({
    'randomizeOnLoad': true
});
</script>
<!-- end Gallery Random Order Plugin -->

Why isn't my gallery randomizing on page load?

Complete troubleshooting checklist:

• Plugin files uploaded - Both CSS and JS to file manager

• Code injection correct - Header section with proper syntax

• Target correct gallery - Use specific block ID if needed

• Clear browser cache - Test in incognito mode

• Check JavaScript console - Look for errors

How often does the gallery randomize - on every page load or just once?

Default behavior: Randomizes on each page load/refresh

Customizable options:

pluginGalleryRandom({
    'randomizeOnLoad': true,        // Every page load
    'randomizeInterval': 5000,      // Every 5 seconds
    'continuousRandom': false,      // Only on load
    'userTriggered': true          // Manual button trigger
});

Targeting Specific Galleries

How do I apply the random order to only specific galleries?

Method 1: Target by block ID

pluginGalleryRandom({
    'galleryIDs': ['#block-yui_3_17_2_1_1234567890_12345'],
    'ignoreOthers': true
});

Method 2: Target by CSS class

pluginGalleryRandom({
    'selector': '.gallery-random-enabled',
    'ignoreGalleryIDs': 'on'
});

To find gallery block ID:

1. Right-click on gallery

2. Select "Inspect Element"

3. Look for id="block-yui_..." in the HTML

4. Copy the full ID including the # symbol

Can I exclude certain galleries from being randomized?

Method 1: Use ignoreGalleryIDs

pluginGalleryRandom({
    'ignoreGalleryIDs': '#block-instagram-feed,#block-main-gallery',
    'randomizeAll': false
});

Method 2: Add CSS class to exclude

.gallery-no-random {
    /* This gallery won't be randomized */
}

Common galleries to exclude:

• Instagram feed galleries

• Logo galleries

• Team photo galleries where order matters

• Before/after galleries

Customization & Animation

How do I make the randomization smoother with animations?

Add transition CSS:

.gallery-item {
    transition: all 0.5s ease !important;
    opacity: 1;
}

.gallery-container {
    transition: all 0.3s ease !important;
}

/* Fade effect during randomization */
.gallery-randomizing .gallery-item {
    opacity: 0.7;
}

.gallery-randomizing.complete .gallery-item {
    opacity: 1;
}

Advanced animation options:

pluginGalleryRandom({
    'animationType': 'fade', // 'slide', 'scale', 'fade'
    'animationDuration': 500,
    'staggerDelay': 100 // Stagger animation between items
});

Can I add a "randomize" button for manual control?

Yes, add manual trigger:

<button id="randomize-gallery" class="btn">Shuffle Gallery</button>

<script>
document.getElementById('randomize-gallery').addEventListener('click', function() {
    pluginGalleryRandom.randomize();
});
</script>

Gallery Types & Compatibility

Does this work with all gallery types (grid, slideshow, etc.)?

Compatibility by gallery type:

• ✅ Grid galleries - Full support

• ✅ Masonry galleries - Full support

• ✅ Simple list galleries - Full support

• ⚠️ Slideshow galleries - Limited support (may break navigation)

• ❌ Carousel galleries - Not recommended

• ❌ Instagram blocks - Should be excluded

The randomization breaks my gallery layout. How do I fix this?

Layout preservation CSS:

.gallery-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

.gallery-item {
    flex: 0 0 auto !important;
    /* Maintain original dimensions */
    max-width: none !important;
}

/* For grid layouts */
.sqs-gallery-design-grid .gallery-item {
    width: calc(33.333% - 20px) !important; /* 3 columns */
    margin: 10px !important;
}

/* For masonry layouts */
.sqs-gallery-design-masonry .gallery-item {
    break-inside: avoid !important;
    margin-bottom: 20px !important;
}

Can I randomize the order but keep certain images in fixed positions?

Pin specific images:

.gallery-item.pinned {
    order: -1 !important; /* Always first */
}

.gallery-item.pinned-last {
    order: 999 !important; /* Always last */
}

pluginGalleryRandom({
    'excludeClasses': ['pinned', 'pinned-last'],
    'respectPinned': true
});

Performance & Mobile

Does randomization affect page load performance?

Performance considerations:

• Minimal impact on small galleries (< 20 images)

• May cause layout shift during randomization

• Can delay initial paint if not optimized

Performance optimization:

pluginGalleryRandom({
    'delayRandomization': 500, // Wait for images to load
    'useCSS': true, // CSS-based randomization (faster)
    'respectLoadOrder': true // Don't randomize until all images loaded
});

How does random order work on mobile devices?

Mobile-specific considerations:

• Touch scrolling may be affected during randomization

• Slower processors may show animation lag

• Memory constraints on older devices

Mobile optimization:

@media screen and (max-width: 767px) {
    .gallery-item {
        transition-duration: 0.2s !important; /* Faster animations */
    }
}

// Detect mobile and adjust settings
var isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

pluginGalleryRandom({
    'animationDuration': isMobile ? 200 : 500,
    'randomizeInterval': isMobile ? 8000 : 5000
});

Configuration Examples

Basic Configuration

pluginGalleryRandom({
    'randomizeOnLoad': true
});

Advanced Configuration

pluginGalleryRandom({
    'randomizeOnLoad': true,
    'randomizeInterval': 10000,
    'animationType': 'fade',
    'animationDuration': 300,
    'galleryIDs': ['#block-specific-gallery'],
    'ignoreGalleryIDs': '#block-instagram,#block-logo-gallery',
    'excludeClasses': ['pinned'],
    'respectPinned': true,
    'delayRandomization': 1000
});

Mobile-Optimized Configuration

var isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

pluginGalleryRandom({
    'randomizeOnLoad': true,
    'animationDuration': isMobile ? 200 : 500,
    'randomizeInterval': isMobile ? 0 : 5000, // No auto-randomize on mobile
    'useCSS': true,
    'respectLoadOrder': true
});

Manual Control Setup

pluginGalleryRandom({
    'randomizeOnLoad': false,
    'userTriggered': true
});

<div class="gallery-controls">
    <button id="shuffle-btn" class="btn btn-primary">Shuffle Gallery</button>
    <button id="reset-btn" class="btn btn-secondary">Reset Order</button>
</div>

<script>
document.getElementById('shuffle-btn').addEventListener('click', function() {
    pluginGalleryRandom.randomize();
});

document.getElementById('reset-btn').addEventListener('click', function() {
    pluginGalleryRandom.reset();
});
</script>

Troubleshooting

Gallery shows briefly in original order before randomizing

Solution: Add CSS to hide gallery initially:

.gallery-container {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-container.randomized {
    opacity: 1;
}

Randomization stops working after page navigation

Solution: Ensure plugin reinitializes on AJAX navigation:

document.addEventListener('DOMContentLoaded', initGalleryRandom);
window.addEventListener('mercury:load', initGalleryRandom);

function initGalleryRandom() {
    pluginGalleryRandom({
        'randomizeOnLoad': true
    });
}

Images appear overlapped or misaligned after randomization

Solution: Ensure proper image dimensions and container CSS:

.gallery-item {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
}

.gallery-item img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

For additional support, ensure you're targeting the correct gallery elements and check browser console for JavaScript errors. Test with a simple configuration first before adding advanced features.