Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX GALLERY IMAGES FROM DATABASE

Need a gallery for your dynamic pages? This tutorial will show you how to create a gallery with images from a database. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

When visitors navigate to different dynamic pages, a unique set of images will be displayed in your gallery.

Create a database for your images, then create a dynamic page. Next, add a gallery and text to your dynamic page.

1/2

THE ELEMENTS

The Page

Image Gallery: #gallery1

(DO NOT USE Wix Pro Gallery)

Text Elements:

#title
#description

The Database

Create a database: Menu (dynamicDataset)

Recommended fields:

Menu Name Field: menu
Menu Description Field: description
Image Fields: image1, image2, image3, image4, image5, image6
Image Title Fields: image_title1, image_title2, image_title3, image_title4, image_title5, image6
Image Description Fields: image_desc1, image_desc2, image_desc3, image_desc4, image_desc5, image_desc6

Create a dynamic page and link your database fields.

The Dynamic Page

Create a dyanmic page: Menu (Title)

Link fields on dynamic page to your database.

THE CODE

Page Code

$w.onReady(function () {

let item = $w("#dynamicDataset").getCurrentItem();

$w("#gallery1").items = [

{src: item.image1, title: item.image_title1, description: item.image_desc1},

{src: item.image2, title: item.image_title2, description: item.image_desc2},

{src: item.image3, title: item.image_title3, description: item.image_desc3},

{src: item.image4, title: item.image_title4, description: item.image_desc4},

{src: item.image5, title: item.image_title5, description: item.image_desc5},

{src: item.image6, title: item.image_title6, description: item.image_desc6}

];

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

Please complete all required fields.

No comments. Be the first to leave a comment.

Hi,

I tried to implement the code but it doesn't seem to work for me. Can someone help please?

Terence Wong

Aug 14, 2018

Hi Terence, would you be able to share your code so we can take a look? Thanks!

Ben (Vorbly)

Aug 15, 2018

Hi Ben,

Please see my code below.

$w.onReady(function () {
let item = $w("#Dataset1").getCurrentItem();

$w("#gallery1").items = [
{src: item.image1, title: item.image_title1, description: item.image_desc1},
{src: item.image2, title: item.image_title2, description: item.image_desc2},
{src: item.image3, title: item.image_title3, description: item.image_desc3},
];
});

Been trying for a few days, please help me. Thanks!

Terence Wong

Aug 16, 2018

Hi Terence,

I have reviewed your code and there are a few possible errors. 1. Check your dataset name, usually it's "dataset1"
2. Remove the comma "," from image3 array
3. Are you using a regular Wix gallery or Wix Pro gallery?

$w.onReady(function () {
let item = $w("#dataset1").getCurrentItem();

$w("#gallery1").items = [
{src: item.image1, title: item.image_title1, description: item.image_desc1},
{src: item.image2, title: item.image_title2, description: item.image_desc2},
{src: item.image3, title: item.image_title3, description: item.image_desc3}
];
});

Hope this helps! Good luck!

Ben (Vorbly)

Aug 17, 2018

Hello Good afternoon,
My question is if my clients randomly add 2 photos, other 3 photos, etc, if i add six objects (six src) in the code, there will be black photos, photos with nothing.
How can i solve it? thank you

jose manuel

Jun 22, 2020

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX GALLERY IMAGES FROM DATABASE

Need a gallery for your dynamic pages? This tutorial will show you how to create a gallery with images from a database. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO