Adding Custom Hover Effects to Wix Pro Gallery with Velo: Is It Possible?

Discussion Ask a question
, , , ,
1

Using Wix Editor

Hello Wix Community,

I’ve been working on a website where I utilized the Wix Pro Gallery to display a list of projects on one of my website pages. Each item in the gallery is clickable and directs the user to a specific project page when selected.

I’m looking to enhance the user experience by adding a custom hover effect to the gallery items. Specifically, my goal is to dim the color of all gallery items to a light grey with 50% opacity when any single item is hovered over, while keeping the hovered item at full color and opacity. This is intended to help the hovered item stand out to users.

I understand this might require custom Velo code, but I’m not sure how to approach this implementation. Is it possible to achieve this effect using Velo with the Wix Pro Gallery? If so, could anyone guide me on how to set this up or point me to relevant resources or examples?

I appreciate any advice or insights you can provide!

This is the response I received from ChatGPT 4, however it tells me that it may not work.

ChatGPT 4

I mentioned that the direct manipulation of individual items within the Wix Pro Gallery, such as changing the id or style.opacity of each item through Velo code, might not work as intended because the Wix Pro Gallery API does not typically expose gallery items for direct manipulation in this way. This limitation means achieving the hover effect—where the color of all other gallery items changes when one is hovered over—requires a different approach than directly adjusting properties of gallery items via Velo.

// Import necessary modules from 'wix-window'
import { $w } from 'wix-window';

$w.onReady(function () { 
  // Placeholder for gallery items interaction
  // Note: This approach is conceptual and may not align with actual Wix Pro Gallery capabilities
  let galleryItems = []; // This line is illustrative and does not directly access gallery items

  galleryItems.forEach((item, index) => {
    const itemId = `galleryItem${index}`; // Conceptual ID assignment

    // Event listeners for mouse hover effects
    // Note: Actual implementation may vary based on Wix Pro Gallery's support for such interactions
    $w(`#${itemId}`).onMouseIn(() => highlightItem(itemId));
    $w(`#${itemId}`).onMouseOut(resetHighlights);
  });
});

function highlightItem(highlightedItemId) {
  // Conceptual function to change opacity; actual support for this operation may vary
  console.log(`Highlight item: ${highlightedItemId}`);
}

function resetHighlights() {
  // Conceptual function to reset item opacity; actual implementation details may vary
  console.log("Reset highlights");
}

Thank you!

2

Unfortunately, it’s not possible to add a custom hover effect to the Wix Pro Gallery items directly through the Velo by Wix API. The wix-pro-gallery-backend module allows you to manage the galleries and gallery items, but it doesn’t provide the functionality to customize the hover effect of the gallery items.

But, what you are trying to achieve could be done using other methods, not the Wix Pro Gallery.

3

This specific function is not codable. (Trust me, I tried for a long time and I ended up moving my landing page to another platform JUST to get this effect because it was codable in less than 5 minutes. Ironically, I ended up removing it from my page altogether after a year and don’t use that effect anymore.)

Anyway, what you CAN do is play with the design settings to set the item style. You can either have all images in color and hover turns it to black and white. Or have all the images in black and white and hover turns it to color.

IMG_7553
IMG_75531284×1530 259 KB