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

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.

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

0

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

Ben (Vorbly)

Aug 15, 2018

1

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

1

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

2

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

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP