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
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.
