When a user clicks any of the images, I’d like the image to open in a lightbox with the other images displayed below so that the user can scroll through (e.g Airbnb style – when you click the main Airbnb property image, the image opens in a lgithbox and other images are displayed below).
I was thinking of using a popup with a slideshow element, and then draw image shapes below the main slider, and then set those item# to each corresponding image number (maximum of 12 images, so 12 items). Not sure if there’s a more elegant solution though.
The only thing I’d change here is instead of 12 shapes, just use a repeating group set to horizontal layout so that it’s dynamic - if 1 listing has 5 images versus 12, you won’t have empty shapes. It’ll just show what exists. This is much easier to manage. Set the repeating group’s source to the listings list of images.
I’ve created a popup with a slideshow element, and I’m trying to give each slideshow image a data source, but when I view the overlay (by clicking the main property image), I just see a blue ‘?’ icon. I can’t work out what I’m doing incorrectly - I can get the slideshow to work on the page itself, but not on the popup, it seems linked to the fact that it’s in a popup so isn’t pulling the ‘parent group’s listing’ data. If anyone could shed some light, that would be great.
Hey @pc001 It looks like the images are displayed in the slideshow now, using the dynamic list instead of the individual images. However, since the Popup doesn’t have a Listing data source, the repeating group of thumbnails below, which references that Popup’s data source is empty as well, and doesn’t display any results.
I just changed the Gallery Popup’s Listing to match the Slideshow’s Listing:
However, you probably want the User to be able to click on each thumbnail image, and have that become the large image in the popup. I don’t think this is currently possible with the Slideshow element, but you can instead using an image element. If you need any assistance setting that up I can explain how to do this.
I clicked ‘View Example’, and then I clicked one of the fruit images, and tested the back / next buttons. Once I saw it was working, I used the Editor as a guide and managed to build the functionality. I also built the functionality that populates the main image with the thumbnail’s image when clicked.
The final issue I need to sort out:
1.) I’ve only uploaded 5 images for the property, but 12 images are displayed (the max limit item number) - I need to limit it to only the images and number of images that the user has uploaded.
Okay, I have the slider looking the way I want it, but I need to fix a few things, would be great if someone could offer some assistance with the following 3 points:
• When I click one of the tiles on the property page, the gallery opens. I’d like it to open the image that I clicked instead of the first image of the repeating group. Can that be done?
• Currently there’s a list of 12 thumbnails (users can upload 12 images per listing maximum), I set the expression as: Parent group’s Listing’s Property Images: items until #12 but clearly that isn’t quite correct - what I need really is to have only the number of images uploaded by the landlord to display (in this case, it’s 5)
• When an image in the thumbnail repeating group is showing in the main image space above the repeating group, I’d like the thumbnail in question to be outlined if possible.
Yes, I just added a workflow to each image which uses the ‘Go to Page’ action. Since we can’t use “Current cell”, we can just manually type in the number in the list of images should be displayed. For example, when Main Image is clicked --> Go to Page “1”. When Image 2 is clicked --> Go to Page “2”. (shown below)
This can be accomplished by creating a custom state which temporarily stores the page number of the repeating group. For example, I just created a custom state on the Gallery Popup called Current Page (Type: Number). This is confusing at first, but in summary, custom states are really useful because they don’t cost any workflows and allow us to keep ‘track’ of values of any kind (text, numbers, Listings - any data type), until the page is refreshed. When a custom state is not a list, it’s value will be one thing (a single number, for example). If a custom state is a list, it can hold many values (a list of numbers, for example). Here we need it to be a number since ‘Current Cell Index’ will always be a number.
Then I created a separate conditional statement on the thumbnail image which shows a white border when the Current Page’s custom state’s Number is equal to the Thumbnail’s Index Number. (Ex: When Popup Gallery’s CurrentPage is “1” --> Show a Border on the First Item in the Thumbnail Repeating Group)
Note: it doesn’t really matter which element you choose to set the custom state on, but it’s best not to do it on elements inside of the repeating group (since they can’t always be accessed by outside elements in workflows). You can also set them on the page itself since the page is considered an element, but if you choose to transfer elements which refer to a page’s custom state, to a new page, you’d have to re-do them.
Sorry for the length of this! Feel free to let me know if you have any questions!
Currently the database entry for images is ‘Property images’ - I’m not sure if I should have a separate entry for each image and then reference them like that instead (e.g. property image 1’s value = property image 1’, but then I think it’ll mess with the thumbnail system so I’ll have to re-do that and there may be a more elegant solution out there.
Any help that you guys can offer is much appreciated!
Yes, I think the editing workflow is where the error occurs since images are only being added, and none are currently being removed from the list. You could keep it the way that it is and then create a custom state list such as (“ListingImages” type: Image, list: yes) on the popup. Then create a ‘Do every 0.5 seconds’ action which sets the state’s value to be:
It would technically ‘store’ the value of all Picture Uploaders values locally as a list of images, but this doesn’t cost any workflows since it’s a custom state and not changing anything in the database. Then when a User is happy with their list, the workflow of the ‘Save’ button would be "Property Images set list PopupListingImages’s value, instead of 12 separate add image field changes. That should work.
Another way would be to use the “Multi-File Uploader Dropzone” plugin for this instead of 12 picture uploaders. This way, the User could drag and drop a list of files from their computer into the Dropzone (and you can set a maximum of 12). It would be a bit time-consuming to setup in a way that would create a new data type, use an API workflow to create a new Thing for each uploaded file, and then allow the User to re-order their list of uploaded images merged with the Listing’s current images, using drag and drop plugin within a repeating group.
OK, so I’ve been working on this and have become a little stuck -
I wasn’t 100% sure where to create the custom state, so I created the custom state on the gallery popup, but I didn’t see the option to create the ‘Do every 0.5 seconds’ action which I know you do in the Workflow area.
I then tried to create the expression in the Workflow area but couldn’t figure out how to get the above state to in the Workflow area.
Which popup do I need to create a custom state on? Is it the gallery popup or the edit listing popup? Does that mean I remove the existing data source, e.g. for the gallery popup, instead of having ‘property_id’s Listing’, I would have ‘property_id’s ListingImages (and the rest of the expression)’?