How to make image lightbox appear (image gallery)?

[pc001]

Hello,

I’m building a header with an image gallery – it displays 5 images as default (and no more than 5), but users can upload more images during the listing process.

Here’s what it looks like:

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).

Is there a plugin or external code for this?

Thanks

Edit: I found this post which may help: Passing list of images from repeating group to a pop up - #5 by JP29

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.

[romanmg]

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.

Let me know if you have any questions.

---

Gaby | Coaching Bubble

[pc001]

Thanks, that helps immensely as I was trying to figure out how to hide the empty shapes, a much better solution!

[pc001]

I’ve been attempting to build this feature but I’ve come across a little issue – I can’t seem to get the uploaded images working with the slideshow.

Here’s where I’m at:

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.

Any help is appreciated.

Thanks

[fayewatson]

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:

Then adjusted the thumbnail images within the repeating group’s dynamic data to be “Current Cell’s Image”, since the repeating group is displaying the Parent Group Listing’s List of Property Images.

Repeating Group:

Current cell:

In preview mode it looks like this:

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.

[pc001]

Thanks, that’s a HUGE help!

I did want the thumbnail image to appear in the slideshow, but if I can’t do that I’ll have to build a bit of a workaround.

Could I build my own slideshow by adding arrow icons, and when clicked, they would move to the next image/previous image?

My goal is to get the image gallery finished up today!

Thanks again

[pc001]

I think I’ve done it! It’s not particularly pretty but it’s working well - I’ll neaten it up next! Here’s what it looks like right now:

I actually used this page as assistance: https://buildingonbubble.com/block/thumbnail-gallery-1459450065149x327520738097233900

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.

Woohoo!

[pc001]

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.

[fayewatson]

Looks great! To answers your questions:

@pc001

• 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?

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 repeats for all five images).

@pc001

• 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)

Currently, the listing’s Property images contains 12 images in the Property Images field:

@pc001

• 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.

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, when a thumbnail is clicked, it sets the value of that custom state to the Current Cell’s Index (which is the item # of the Current Cell).

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!

[pc001]

THANKS! This is a huge help. I went through everything and it makes sense, many thanks for the write up and images.

I need to sort out the 12 image issue from the property submission end in that case, looks like 12 images are submitted as default. Shouldn’t be too hard to fix.

Thanks again for your help!

[fayewatson]

My pleasure! Yes, that should be an easy fix - it will depend on your setup but you might be able to add a condition to the workflow such as:

Make Changes to Parent Group Listing
PropertyImages add PictureUploader’sValue
only when: “ParentGroup’sPropertyImages:count<12”

[pc001]

Ok so I’m having a few issues getting the images to update correctly - I’ve tried a few different solutions but can’t come up with anything that seems to work.

This is the general workflow:

1.) Create a listing (submit up to 12 images):

2.) The workflow for submitting a listing (you can only see up to Photo8’s value, but 9-12 are also there beneath Address. So far so good I think!

3.) The images are then displayed on the property page (5 displayed as default, others displayed in the image gallery popup).

4.) Users can then edit their listing by clicking the ‘Edit Listing’ button when logged in.

5.) Here’s the workflow for editing a listing. I feel like it goes wrong here. I’m trying to replace X property image with X image, e.g. property image 5 with a new property image 5.

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!

[fayewatson]

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:

“Popup’sListingImages:plusitemPictureUploader1’svalue:plusitemPictureUploader2’svalue–>throughPictureUploader12”.

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.

[pc001]

Thank you Faye, I’m going to be working on this and will update you with my progress!

[pc001]

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.

Here’s what it looked like:

–

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)’?

Thanks