Use a query to load images in a gallery (Solved)

I have a repeater set up so that when a user clicks on an item in the repeater it opens a lightbox showing more details for the selected item. All that is working except that I need a gallery on the lightbox to be populated by a query. The query works and pulls in the correct information including images that I want to appear in the gallery. I can’t figure out the syntax to make that happen,

Here is the working code that produces the correct data. This query will produce a variable number of images depending on the repeater item selected, In other words, each repeater item can have a different number of related images,

Can anyone help me get the results of the query (resultGallery) into the gallery (gallery1)? Thanks in advance,

//Load images into slideshow gallery on the Lightbox
let resultGallery = wixData.query( “ProjectImages” )
//.include(“projectId”)
.eq( “imageInclude” , true )
.eq( “projectId” ,projectRecord)
.gt( “sequence” , 1 )
.limit( 29 )
.find()
.then((results) => {
let firstItemGallery = results.items

console.log( “Query for gallery completed” )

You need to do:

  1. send firstItemGallery.items (an array) to LightBox (see: www.wix.com/velo/reference/wix-window/lightbox-obj, and look at the right hand side for example “A scenario where information is passed between a page and a LightBox”;
  2. on the LightBox-side, retrieve this info (see same example)
  3. (filter array for images, type, title only) and throw array to the gallery (https://www.wix.com/velo/reference/$w/gallery/items)

Have fun.

Thanks Giri Zano. I will give this a try but looks like exactly what I am looking for. Much appreciated.

Thanks again Giri Zano, I think I am getting close but I’m still a bit confused. I’ve done a lot of coding in other languages but am new to Wix and their implementation of Javascript.

In my post I didn’t make a couple of things clear. My apologies.
1. The code I posted is within the onReady structure on the Lightbox.
2. The images I am trying to push into the gallery are in a data collection (Images) rater than links/URLs.
3. The query that is shown in my code snippet runs and generates the array I want to load/push into the gallery
4. The gallery is not connected to the collection using the GUI. Trying to use code to connect to the array.
5. I only need to load the images - don’t need the title, description, etc. Also no videos - just jpeg images.
6. Here is the gallery I am trying to use but I am open to a different version if that makes a difference.

I’ve posted the new code incorporating the details Giri Zano was kind enough to provide. I think I am closer but my lack off knowledge and experience are keeping me from getting this to work. Any comments or advice would be greatly appreciated. Many thanks for getting me this close.

//Load images into slideshow gallery on the Lightbox
//Run the query to get the images from the Images collection
let resultGallery = wixData.query( “ProjectImages” )
//.include(“projectId”)
.eq( “imageInclude” , true )
.eq( “projectId” ,projectRecord)
.gt( “sequence” , 1 )
.limit( 29 )
.find()
.then((results) => {
let firstItemGallery = results.items

//Get the list of items and the first item’s information
let itefirstItemGalleryms = $w( “#gallery1” ).items;
let type = firstItemGallery[ 0 ].type; // “image”
let src = firstItemGallery[ 0 ].src; // “wix:image from Images collection
//let description = items[0].description; // “Description”
//let title = items[0].title; // “Title”
//let link = items[0].link; // “http”//wix.com

//Set the list of items for a gallery
$w( “#gallery1” ).items = [{
“type” : “image” ,
//“title”: “A View”,
//“src”: “w???”
“src” : “wix:image://v1/99bc1c6f66444769b531221214c885ac.jpeg/A%20View.jpeg#originWidth=3264&originHeight=2448”
//}
//, {
// “type”: “video”,
// “description”: “Another beautiful view”,
// “title”: “Another View”,
// “src”: “wix:video://v1/80c05f_e2c524db1f264178a8558c92dbf76fb0/_#posterUri=80c05f_e2c524db1f264178a8558c92dbf76fb0f000.jpg&posterWidth=1920&posterHeight=1080”
}];

//Add an item to a gallery
//This example retrieves the items of a gallery, adds a new item, and then overwrites the old items.

//This section shows the only visible error - doesn’t like “src”
let items = $w( #gallery1 ).items;
items.push( {
“src” : firstItemGallery
//‘’“description”: “Description”,
//“title”: “Title”
} );

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

console.log( "Query for gallery completed" )

Ok, I have no clue what your code was trying to achieve, but I wrote something for you. Did not test it, I have no collection with images, but it should work or it should be pretty close:

wixData.query("ProjectImages")
 //.include("projectId")
        .eq("imageInclude",true)
        .eq("projectId",projectRecord)
        .gt("sequence",1)
        .limit(29)
        .find()
        .then((results) => {
 if(results.items.length > 0) {
 let arrGallery = [];
 for (var i = 0; i < results.items.length; i++){
 arrGallery.push({src : results.items[i].theFieldnameInYourCollectionThatHoldsTheImage})
        }
 $w("#gallery1").items = arrGallery;
    } else {
 // handle case where no matching items found
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

Change theFieldnameInYourCollectionThatHoldsTheImage with …, well, you know.

Thanks. I realized that I didn’t do a good job of making it clear what I was trying to do and where I was running into problems. I will give this a try. I appreciate your help and your patience.

Once again many thanks to Giri Zano. Working exactly the way I imagined. And I added to my Wix/Velo tool set.