Is it possible to create a dynamic gallery if all images are in the same row as shown? I can do if they are in separate rows but can only pick 1 image if they all in the same? TIA
Hi,
It is possible using code.
You’ll need to construct the gallery items array and set it as shown here .
Use wixData.quey() to get the item from the database, and read the fields.
Liran.
1 Like
Hi Liran,
This is a common question, can you please show the code here?
Thank you!
2 Likes
Thanks. I think an example on this code would be very helpful please?
1 Like
I can write a sample code, but you may need to adjust it to your site, so please read the code and comments in it:
wixData.query('collectionName').eq('name', 'Jarryd')
.find().then(result => {
//Get data of the first row
const rowInDatabase = result.items[0];
//Creating array for images to put it gallery
const imagesToShow = []; //going over all fields in the row
for (let key in rowInDatabase) {
//assuming images fields have the word 'image' in them
if (key.includes('image')) {
imagesToShow.push({src: rowInDatabase[key]}); }
}
$w('gallery1').items = imagesToShow;
})
Hope this helps
Liran.
2 Likes
Thanks Liran. I can’t get it to display though. How do I have the dataset connected? Or do I not? Code below. Not sure of the collectionName either?
import wixData from ‘wix-data’;
wixData.query(‘Jarryd’).eq(‘name’, ‘Jarryd’)
.find().then(result => {
//Get data of the first row
const rowInDatabase = result.items[0];
//Creating array for images to put it gallery
const imagesToShow = []; //going over all fields in the row
for (let key in rowInDatabase) {
//assuming images fields have the word ‘image’ in them
if (key.includes(‘image’)) {
imagesToShow.push({src: rowInDatabase[key]}); }
}
$w(‘#gallery1’).items = imagesToShow;
});
Hi,
You do not need to connect the dataset (using code is enough).
Try to remove the connection.
If that doesn’t, please share console errors if you have any.
Liran.
Thanks Liran. I have no dataset connected but nothing at all displays, not even an error code!?
Can you please share a link to your site, and the name of the page?
Liran.
Page is called test
Hi,
First of all, your code should run when page is ready, should be in $w.onReady:
import wixData from 'wix-data';
$w.onReady(function() {
wixData.query('Jarryd').eq('name', 'Jarryd')
.find().then(result => {
//Get data of the first row
const rowInDatabase = result.items[0];
//Creating array for images to put it gallery
const imagesToShow = []; //going over all fields in the row
for (let key in rowInDatabase) {
//assuming images fields have the word 'image' in them
if (key.includes('image')) {
imagesToShow.push({src: rowInDatabase[key]}); }
}
$w('#gallery1').items = imagesToShow;
});
});
Secondly, ‘Jarryd’ is a field that is a reference. You’re looking for a string here:
eq('name', 'Jarryd')
You’ll need to change it to a string in order for this to work.
Liran.
import wixData from ‘wix-data’;
$w.onReady(function () {
let image1 = $w(“#dynamicDataset”).getCurrentItem().image;
let image2 = $w(“#dynamicDataset”).getCurrentItem().imag2;
$w(“#myGallery”).items = [ { src: image1, }, { src: image2, } ];
} );
What you think about that?
It Perfect when you know the exact number of the images
3 Likes
Ok thanks Liran. I have applied this to my new site https://tailoredwebdesign.wixsite.com/book-the-best
On the dynamic page this does display my images, but now I need it linked to the correct row? How can I get the correct data for each property?
import wixData from ‘wix-data’;
$w.onReady(function() {
wixData.query(‘Queensland’)
.find().then(result => {
//Get data of the first row
const rowInDatabase = result.items[0];
//Creating array for images to put it gallery
const imagesToShow = ; //going over all fields in the row
for (let key in rowInDatabase) {
//assuming images fields have the word ‘image’ in them
if (key.includes(‘image’)) {
imagesToShow.push({src: rowInDatabase[key]}); }
}
$w(‘#gallery1’).items = imagesToShow;
});
});
Thanks, do I just replace something or a whole new code? Sorry, I am very new to this and need a bit more guidance than that
Hi,
Try reading the code (both the one I wrote and the one in the link). It should be pretty easy to read.
If you have any specific questions about it, share them.
Liran.
Ok, I should have just gone with Ivan! Thanks bro! For anyone else this code works perfectly if you have the same amount of images in each row:
import wixData from ‘wix-data’;
$w.onReady(function () {
let image1 = $w(“#dynamicDataset”).getCurrentItem().image1;
let image2 = $w(“#dynamicDataset”).getCurrentItem().image2;
let image3 = $w(“#dynamicDataset”).getCurrentItem().image3;
$w(“#gallery1”).items = [ { src: image1, }, { src: image2, }, { src: image3, } ];
} );
One issue I have though is gallery animations seem to work only once on the first load? Is there any way to fix that?
1 Like
Hi All
First im uploading images through form i created.
The code is working fine to save and display the images from database row to gallery but the filename change, im guessing the url of image which shows in the image/ gallery when hover or pop up.
Can someone help me to find ways on to display the original name of the file when uploading it. Im exhausted from trying so many combination yet its not working.
Your help is much appreciated.
Thanks,
DA
Hay Darken,
This thread is about a different subject. Can you please open a new thread for your question?
Will be happy to help you then.
Thanks,
Yoav
Hi
I am using the same code and its working;
import wixData from ‘wix-data’;
$w.onReady(function () {
let image1 = $w(“#dynamicDataset”).getCurrentItem().image1;
let image2 = $w(“#dynamicDataset”).getCurrentItem().image2;
let image3 = $w(“#dynamicDataset”).getCurrentItem().image3;
$w(“#gallery1”).items = [ { src: image1, }, { src: image2, }, { src: image3, } ];
} );
The only issue it, when images are from upload (form submission) it does not display the original name of image ex. Mountains, instead only the url (ehd00930.jpg/jpeg) of the image. Can someone help me?
Appreciated it much.
DA