Why are my repeater images flickering?

Ask the community
,
1

Hi guys, would really appreciate some help with this.

I’m building a gallery with items that can be filtered into several categories via buttons in the header. Each container consists of a main thumbnail image, with a rich text title and logo image overlayed. Then when any container is clicked on, it will open a lightbox displaying that project in more detail.

The filter and lightbox functions do work - my problem is that whenever the results are filtered, there is a short lag before the repeater properly updates each container, in which the main image flickers to whatever it was showing before the filter was applied, and the logo item briefly appears broken.

All in all it looks really messy, and I’d love to figure out why! I suspect I’ve gone about coding/designing things in a slightly dodgy way and I’m hoping one of you can point me in the right direction.

Here’s a clip of the issue:

And the website itself is here: https://www.tommcphee.net/

To achieve the filtering, I have a repeater connected to a dataset containing all the images & info, and buttons that filter the repeater to only show items in those categories, using the following code in masterpage.js.

import wixData from "wix-data";

$w.onReady(function () {
       $w("#DocButtonSelect").hide();
    $w("#MusicButtonSelect").hide();
    $w("#ComedyButtonSelect").hide();
 });
 
export function docMenuButton_click_1(event) {
console.log("documentary button js");
$w("#dataset1").setFilter(wixData.filter().contains('category', "doc"));
$w("#AllButtonSelect").hide();
    $w("#DocButtonSelect").show();
    $w("#MusicButtonSelect").hide();
    $w("#ComedyButtonSelect").hide();}

export function comedyMenuButton_click_1(event) {
console.log("comedy button");
$w("#dataset1").setFilter(wixData.filter().contains('category', "comedy"));
$w("#AllButtonSelect").hide();
    $w("#DocButtonSelect").hide();
    $w("#MusicButtonSelect").hide();
    $w("#ComedyButtonSelect").show();
}

export function musicMenuButton_click_1(event) {
    console.log("music button");
$w("#AllButtonSelect").hide();
    $w("#DocButtonSelect").hide();
    $w("#MusicButtonSelect").show();
    $w("#ComedyButtonSelect").hide();
$w("#dataset1").setFilter(wixData.filter().contains('category', "music"));
}

export function allMenuButton_click_1(event) {
console.log("all button");
$w("#dataset1").setFilter(wixData.filter().contains('category', "all"));
$w("#AllButtonSelect").show();
    $w("#DocButtonSelect").hide();
    $w("#MusicButtonSelect").hide();
    $w("#ComedyButtonSelect").hide();
}

For the lightbox functionality, I have a lightbox field in my data collection and individual lightboxes for each item - then the following in my main page’s code:

import wixWindow from 'wix-window';
import wixData from "wix-data";
$w.onReady(function () {
    wixData.query("GALLERY2")
 .find()
 .then((results) => {
        $w(`#repeater1`).data = results.items;
 })
.catch((err) => {
 let errorMsg = err;
 });
    $w(`#repeater1`).onItemReady(($w, itemData) => {
        console.log(itemData);
        $w(`#container1`).onClick((event)=>{
            wixWindow.openLightbox(itemData.lightbox);
        console.log("lightbox");
 });
 });
 });

Thanks so much in advance!
Tom

2

Bump for visibility :slightly_smiling_face: