Photo animation on your page

Last updated on July 13, 2023

If you have a Ziber website with a Photo app, you can place a photo animation on a website page. This video explains how to do that and what you can set up.

Place photo animation on your page

1. In the main menu of Ziber Team click on Pages
   
2. Click on the name of the page where you want to place the photo animation
3. Click on the insert content icon and choose Photo animation
   
4. Choose the photo group you want to show
5. Set all options (a taggie will be placed in the page)
6. Save the changes
7. View the result on your website page

Photo animation settings in taggie

When you place a photo animation in your page, you will see the 'tag' below in the text editor. Here we explain what each option in this tag means so you can customize it to your liking!

[content|NL|PHOTO;html_1;###;breedtexhoogte;weergave;aantal;sortering;klikactie;autoplay]

Fixed data in this tag;

content: Means this tag adds a piece of content to your page
EN: You are using a Dutch website
PHOTO: The tag is about a photo animation
html_1: It's about the HTML5 photo animation
###: Is a number that refers to a group of photos in your photo app

Optionally set in the tag;

width x height; Here you can specify the width and height in pixels. If you want to use an automatic width or height (based on a photo ratio of 4:3) you can enter the value "-1". So for example: 200x300 or -1x-1

display: Here you can enter 2 values

• 
  0, Then the photos will be shown filling . The photo animation is filled with the photo and cropped if necessary.
• 
  1 , Then the photos will be shown appropriately . The whole photo is shown and not cropped.

number : Here you can indicate how many photos may be used in the animation

• 
  -1 , all photos in the photo group are used
• 
  fixed number , The maximum number of photos to be displayed. For example, if you have 30 photos in a group and you set the number to 10, the 10 photos will be displayed based on the chosen order.

sorting ; Here you can indicate how the photos are sorted.

• 
  0 , sorting based on photo numbering
• 
  1 , sort by photo name (a > z)
• 
  2 , sorting by photo date
• 
  3 , random sorting (each time the animation starts with a different photo)

click action; what do you want to happen when one of the photos is clicked?

• 
  -1 , the photo cannot be clicked
• 
  0 , an enlargement of the photo, where the visitor can also click through to the next photos
• 
  1 , click through to the photo group (photo app) within the website
• 
  ext~url , when a visitor clicks on a photo the website with ' url ' opens in a new window. Then put the www-address instead of the url (eg: ext~www.ziber.nl )
• i nt~url, when a visitor clicks on a photo the website opens with ' url ' in the current window. Then put the www-address instead of the url (eg: int~www.ziber.nl )

auto play; Here you can set whether the animation plays automatically. You can use these options:

• 
  0 , no automatic play (the visitor can manually click further)
• 
  1 , the animation will play automatically.
• 
  1~seconds , the animation will play automatically and you can set in the place of the ' seconds ' how many seconds there are between each next photo

Tags: animation, photo, photos, photos, slideshow, slideshow, animation