Hi, folks! I am trying to create a photogallery (not a slideshow) - a few pictures in a row, and so that when people click on a small picture, the big version of the picture is shown or the small picture is zoomed. Please, help!
You’ll need a repeating group for this. IN the RG you will put the images from your database.
Have a look at this:
but use images.
Thank you, lonetour, but I still can’t do it. I have created the Repeating Group, and started editing it by setting “type of content” to “image”. What should I do for “Data Source”. The pictures to be shown are on my computer. Do I upload them to my Bubble?
Are the images fixed, or will they change? If they are fixed, then you don’t need a RG, which you would only use for data.
For dynamic images you need to create a Data Source… in the DATA tab: Data type (images) and field (image, title etc.) etc.
Thank you, Jonathan. The images will be fixed, and they won’t change. How do I store a bigger version of a picture on Bubble, which will be shown when the smaller version of the picture is clicked on?
Upload the largest version of the photo that you want. Bubble automatically resizes images depending on the pixel size you make the image box. You can also change things… In the dynamic image source, click more and look for : processed with Imgix for more settings
OK, I’ve uploaded images and they are small. My goal is for the pictures to be shown big when they are clicked on. I have small images but I can’t set it so that they are shown big when they are clicked on. Thank you
Did you find a solution?
Hey @d.anagiotou Here is a forum example of how to do this with a repeating group showing the small images, and a popup showing the selected image, enlarged.
In this example, each cell of the repeating group contains a small image. When a small image is clicked, the workflow shows a popup. In that popup is a larger image element within it. After ‘showing’ the popup, the next action in the workflow ‘displays data’ in the popup (the data that is displayed is the repeating group entry that the User just clicked on).
(“Pinterest Grid” is the data type I used because the forum app has a lot of image entries with the Pinterest Grid’s Image field.)
To provide a more common example - If you had a repeating group of Users, and each cell contained an image element to display their profile picture (Current cell’s User’s Profile Picture). The repeating group’s type of content would be User, the dynamic data of the image could be “Current cell’s User’s Profile Picture”, and the data to send to the popup would be “Current cell’s User” (we’re sending all of the User’s data to the popup, not only an image). Then the other step needed is just to define the type of content of the popup to be User, so that the image in the popup’s data is “Parent Group User’s Profile Picture”). You can leave the data source for the popup empty, since the data that is displayed is sent in the workflow in this example. The close button will close the popup to take the User back to the repeating group of smaller images. And that should work!
Hey! Thank you, you helped be a lot. But I still make something wrong.
The popup appears but it is empty.
I dont know how to define the type of content of the popup, so that the clicked image would appeared in the popup. Have you any idea?
You set the content type in the popup parameters panel, then you use the display data in group from the workflow, for the when the image is clicked event to send the thing to the popup and then display the popup. In the popup put the image element on the popup and set its source to the parent group.
Parent group is not an option. Could you please help me how to connect them?
Sorry but I am very beginner.
Put the image inside a popupgroup, not on its own.
No worries at all - Here is the forum app example updated with User profile pictures instead. In the first screenshot, the type of content of the popup is User, and then in the second screenshot there is an image element within that popup where the data source is “Parent group User’s Profile Picture”:
In preview mode it will look like this:
Thank you very much. It worked
Awesome! My pleasure!