I’ll try to make this clear, my project was to 1) create a plage for students to upload images to a folder, then 2) display the images in a masonry grid, 3) with the ability to click on a specific image in a new page or the image in a modal to be used in the next step.
Everything works fine until I reach step 3. No matter what image I click on it opens the first image in the series. I know the masonry grid creates an # $index value but I can’t figure out how to bind it to the image. I am able to click on the image thumbnail and open it but then you can’t do anything with it.
The last thing I tried was adding a container below the images that contained a repeat row. column I placed a button. Each button had used the index value as a label. I thought that perhaps I could click on the button and then open the associated image in a modal. But all I can do is open the first image.
I’m looking for suggestions to try as I’m sure it is not that difficult it’s just not familiar to me.
Hi.
What is the source data structure which you are binding in masonry?
If it has an id field, you can make use of that to identify which image has been clicked and use that in next step.
If you can share a link to the page, that would be helpful in helping you. You don’t need to rely on #index for this.
Why not wrap your images in an anchor tab and use their Id in the href for example? When sending the image id in the url param you can filter the data source and display that image.
@Teodor so I have been working on this and have a question. If I use the id value from the anchor tag or any other field like the basename how do I set the filter condition on the server-side?
I created the variable but because there is no query involved I’m not sure how to set the variable = to the value of the bound item?
I had another thought, what if I used a session variable and then set it = to the selected name value? I’m not sure of the mechanics but at least I could filter the record that way?
I figured it out by using client-side session variables. I create two, one for the index and the second for the path. I’m not sure if I actually needed both, maybe just the path. I never did figure out how to filter the get variable since there was no query, if there is a way I would like to understand how.
