Image carousels are quite popular these days on the web. In fact it may have been Apple’s iTunes that popularised image carousels, but don’t quote me on that one.

It’s rather easy to create your own image carosel in FileMaker.

Step 1 – Create a photo table

If you don’t have one already, your FileMaker app will need a table to store all your photos. In this example, the photo’s aren’t related to any other table, so we’ll be scrolling through all the photos in the table. If your photos use a relationship, you can easily modify the code to suit. But for simplicity, we’ll be displaying all photos.

Create a table called ‘Photos’, and create a container field called ‘Photo’.

Step 2 – Add calculation fields to photo table

In order to achieve a smooth scrolling effect within your carousel, you need to create two calculation fields within your photos table. One calculation field displays the previous image, and the other calculation field displays the next image. As you scroll left or right within your carousel, it needs to display the previous or next image as it loads in order to achieve a smooth scrolling effect. We’ll go over this more later.

You can simply copy and paste the two calculation fields from our demo file to save some time – or you can manually create the fields yourself as shown below.

cNext calculation

1. Create a new calculation field called ‘cNext’.

2. Set the calculation to: GetNthRecord ( Photo ; Get(RecordNumber ) + 1 )

3. Choose ‘Container’ as the calculation result.

4. Click ‘Storage Options’ and choose ‘Do not store calculated result’.

5. Save your new calculation.

 

cPrev calculation

1. Similar to above, create a new calculation field called ‘cPrev’.

2. Set the calculation to: GetNthRecord ( Photo ; Get(RecordNumber ) – 1 )

3. Choose ‘Container’ as the calculation result.

4. Click ‘Storage Options’ and choose ‘Do not store calculated result’.

5. Save your new calculation.

Step 3 – Create a new layout

You’ll be needing a new layout to display your carousel. Create a new layout and call it what you like. For this tutorial we’ll be using the layout name ‘Carousel’.

Just leave the layout blank for now. We’ll add the necessary objects shortly.

 

Step 3 – Write your code in FileMaker

There are four scripts you need to create within your FileMaker app.

You can copy the scripts from the demo file over to your app. Or if you prefer you can create the scripts yourself by following the steps below:

Script: Show Carousel

Call this script to display the carousel. This script displays all photos within the table. If you want to display a limited set, i.e. via a relationship, then you will need to modify this script to suit.

Make sure you modify this script to navigate to your own layout. We’re navigating to a layout called Carousel.

Allow User Abort [Off]

If [ GetAsNumber( Get( ApplicationVersion ) ) >= 16 ]
	# FM16+: show card & go to layout
	New Window [ Style: Card; Using Layout "Carousel" ]
Else
	# FM15 or earlier: show new document window
	New Window [ Style: Document; Using Layout  ]
	Show / Hide Toolbars [Hide]
	Go To Layout [ "Carousel" ]
	Adjust Window [ Resize to Fit ]
End If

# go to middle slider object
Go To Object [ Object Name: 2 ]

# Preload images for smoother animations
If [ not $$Preloaded ]
	Loop
		Go To Record / Request / Page [ Next; Exit After Last: On ]
		Refresh Window [ ]
	End Loop
	Set Variable [ $$Preloaded, 1]
End if

Go To Record / Request / Page [ First ]

First, the script either shows the carousel in a Card window for FileMaker 16 or later, or displays the carousel in a document window for older versions of FileMaker.

The script then displays the middle slide (i.e. slide number 2). We rest on the middle slide, waiting for the user to navigate left or right. Later, when the user navigates either left or right, the first or last slide will be shown with an animation. The animations are then turned off, and the user goes back to the middle slide awaiting their next navigation input. This gives the appearance that we are scrolling through the images.

The script then preloads the images into cache. This is achieved simply by looping through all the images and refreshing the window. Without this, you see the images load as you navigate from slide to slide. Caching the images provides smoother navigation. The script only caches the images the first time the carousel is loaded.

 

Script: Prev

This script slides the carousel to the left.

Allow User Abort [Off]
If [ Get ( RecordNumber ) <> 1 ]
	Go to Record / Request / Page [ Previous; Exit after last: Off ]
	Set Layout Object Animation [ On ]
	Go to Object [ Object Name: 1 ]
	Set Layout Object Animation [ Off ]
	Go to Object [ Object Name: 3 ]
	Set Layout Object Animation [ On ]
	Go to Object [ Object Name: 2 ]
End if

Script: Next

This script slides the carousel to the right.

Allow User Abort [Off]
If [ Get(RecordNumber) <> Get(FoundCount) ]
	Go to Record / Request / Page [ Next; Exit after last: Off ]
	Set Layout Object Animation [ On ]
	Go to Object [ Object Name: 3 ]
	Set Layout Object Animation [ Off ]
	Go to Object [ Object Name: 1 ]
	Set Layout Object Animation [ On ]
	Go to Object [ Object Name: 2 ]
End if

Script: Key Triggers

The following script allows you to use the keyboard to close the carousel via the Escape key or to navigate left or right using the arrow keys.

Allow User Abort [Off]

If [ Get ( WindowStyle ) = 3 ]

	If [ Code ( Get ( TriggerKeystroke ) ) = 27 ]
		# escape - close window
		Close Window [ Current Window ]

	Else If [ Code ( Get ( TriggerKeyStroke ) ) = 28
		# left arrow - prev photo
		Perform Script [ Specified: From list; "Prev"; Parameter : ]

	Else If [ Code ( Get ( TriggerKeyStroke ) ) = 30
		# right arrow - next photo
		Perform Script [ Specified: From list; "Next"; Parameter : ]

	End If

End If

Exit Script [ Text Result: 0 ]

Step 4 – Add objects to layout

You can simply copy all the objects from our demo over to your app. If you do, make sure you use ‘Select All’ objects so you don’t miss anything.

Alternatively, if you wish to create the objects manually you cal follow the steps below:

Create slide control

Create a new slide control with 3 slides leave the navigation dots on for now.

Add cPrev container field onto the first slide

Navigate to the first slide. You can do this via the navigation dots at the bottom of the slide control.

Once on the first slide, you can add the cPrev container field onto the slide. Make sure the field is entirely within the slide control and does not exceed it. If it exceeds the slide control then it wont be embedded inside the slide correctly.

Position and resize the container field to fit the entire slide, but leave leave the bottom a little short not to cover the navigation dots.

Add Photo container field onto the second slide

Just like the step above, navigate to the second slide and add the Photo container field to the slide. Once again reposition and resize the field as above. Both fields should be exactly the same size and in the exact same position.

Add cNext container field onto the third slide

Lastly, navigate to the third slide and add the cNext container field to the slide. Once again, reposition and resize the field to suit. All container fields should be exactly the same size and in the exact same position. When navigating through all three slides, the container fields should all be in the exact same position.

Add a slide counter

At the top of the slide control, we’ve added a counter that shows which image is currently being viewed. i.e. Photo 1 of 10.

You can set this up as a calculation field if you prefer, however in the demo we have set this up as a Bar Button with no script. We chose a bar button because we can set the button to calculate a formula via the layout, without the need for a calculation field.

Create a Bar Button with only one button.

Specify the button name as a calculation: “Photo ” & Get(RecordNumber) & ” of ” & Get(FoundCount)

Then you can dress up the button font and colour to suit your theme.

Add navigation buttons

Add buttons to the sides of the slide control, one for navigating to the left and one for navigating to the right. Set the left button to call the ‘Prev’ script, and the right button to call the ‘Next’ script.

Script triggers

Add script trigger

Finalising the layout

Finally, dress up the layout to suit your app / theme.

Set the slide control to not show the navigation dots. Set the slide control and the three container fields to not show any borders.

Download

Visit the page GetDistance – Calculate Distance and Travel Time using Google Maps API in FileMaker to download the demo file.