# Wix Pro Gallery questions how do I?

**URL:** <https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443>\
**Category:** Ask the community\
**Tags:** code, wix-blocks, question, wix-studio\
**Created:** [December 7, 2024, 12:30pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443 "2024-12-07T12:30:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michele\_Simonetti](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/michele_simonetti/32/100941_2.png) [@Michele\_Simonetti](https://forum.wixstudio.com/u/Michele_Simonetti)\
**Post date:** [December 7, 2024, 12:30pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/1 "2024-12-07T12:30:05Z")

</div>

I’m using the pro gallery widget in Wix Studio, to show a series of images. But I have a few customizations I cant seem to be able to find in the settings:

I would like to have no transition effect. Kinda like what cross fade does but more brutally

I would like for the gallery to have no button, but when you click on it, it changes to the next image.

I would like to have a image counter at the bottom showing current image over total number of image i.e. 1/5 one being the first image on the gallery 5 the total number of images.

I have tried to use the AI function but the code it gives me for both the click to slide and the image counter are not working.

```javascript
/***
* Code added by AI Assistant
* Prompt: When I click on the gallery I want it to slide to the next image
***/
$w('#imggallery').onItemClicked(() => {
    $w('#imggallery').next();
});

```

```javascript
$w.onReady(() => {
    // Wait for the dataset to load
    $w("#dataset1").onReady(() => {
        const gallery = $w("#imggallery");
        const counterText = $w("#counter1");

        // Get the total number of items in the #materials column
        const totalImages = $w("#dataset1").getTotalCount();

        // Function to update the counter
        const updateCounter = () => {
            // Get the current index from the dataset (zero-based index)
            const currentIndex = $w("#dataset1").getCurrentItemIndex() + 1; // Convert to one-based index
            counterText.text = `${currentIndex}/${totalImages}`;
        };

        // Initialize the counter when the dataset is ready
        updateCounter();

        // Listen for changes in the current index of the dataset
        $w("#dataset1").onCurrentIndexChanged(() => {
            updateCounter();
        });
    });
});

```

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [December 7, 2024, 4:46pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/2 "2024-12-07T16:46:54Z")

</div>

Hi, Michele\_Simonetti !!

For that purpose, it might be better to use a slideshow repeater instead of a Pro Gallery. You just need to display one image at a time, right? First, add a slideshow repeater to the editor.

Next, open the settings for the slideshow repeater. Hide the navigation buttons, configure the transition settings if necessary, turn off auto-play, and enable infinite looping. Finally, add the following Velo code, and you’re all set! 😉 🙌

```javascript

$w.onReady(async function () {

    $w("#containerBox").onClick(()=>{
        $w("#slideshowRepeater").next();
    });

});

```

---

<div class="post-metadata">

**Author:** ![Michele\_Simonetti](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/michele_simonetti/32/100941_2.png) [@Michele\_Simonetti](https://forum.wixstudio.com/u/Michele_Simonetti)\
**Post date:** [December 7, 2024, 10:33pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/3 "2024-12-07T22:33:25Z")

</div>

Hi!

Thank you for you reply, I’ve tried this work around, but the slideshows repeater won’t let me connect to a CMS gallery, just single images.  
It’s my fault, I forgot to mention that I’m putting this in a dynamic page.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [December 8, 2024, 2:00am UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/4 "2024-12-08T02:00:13Z")

</div>

If you don’t mind, could you please explain the operational image in detail once again? 🤔

---

<div class="post-metadata">

**Author:** ![Michele\_Simonetti](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/michele_simonetti/32/100941_2.png) [@Michele\_Simonetti](https://forum.wixstudio.com/u/Michele_Simonetti)\
**Post date:** [December 8, 2024, 3:44pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/5 "2024-12-08T15:44:09Z")

</div>

Basically I want to make a gallery on a dynamic page to display project images.  
I have a CMS dataset organized by rows, each row is a project, and for every project I have the same columns (drawings, images, Title etc). Each dynamic page pulls the data for the gallery from a CMS list.

The reason why I was using the Pro gallery widget, is because it allows me to connect to a media gallery in the CMS, while the slideshow repeater allows just single image.

 ![Screenshot 2024-12-08 alle 16.40.30](https://us1.discourse-cdn.com/wix/original/3X/3/9/39397f339e2d57fe222176e2bf59318d4afcfbc9.png)

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [December 8, 2024, 3:57pm UTC](https://forum.wixstudio.com/t/wix-pro-gallery-questions-how-do-i/65443/6 "2024-12-08T15:57:26Z")

</div>

I see, I understand. Personally, I’m not very fond of using galleries, so if I were to implement this myself, I would consider using a slideshow repeater. However, I assume you wouldn’t want to disrupt your current CMS data structure, so I’ll try to come up with a method that utilizes a gallery instead. 🤔

However, I don’t think there’s much that needs to be done. While I can’t say for certain since I don’t recall doing this often, it should be possible to inject items into the Pro Gallery via a dataset connection through manual operations in the editor, followed by writing just a little bit of code.

The main reason your code isn’t working is probably related to the `.onItemClicked()` event. From what I remember, there’s a bug in this event that Wix has left unresolved. This could be causing `.next()` not to trigger, resulting in the functionality not working. (Apologies if I’m mistaken! 🫠)

For now, please try testing with just this code to see if it works.

```javascript

$w('#imggallery').onClick(() => {

    if($w('#imggallery').navigateNextEnabled()) {
        $w('#imggallery').next();
    }

});

```