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
Create a database for your images, then create a dynamic page. Next, add a gallery and text to your dynamic page.
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.
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
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
2
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