Zoom-In-Out Slideshow

The Zoom-In-Out slideshow is a script written specifically for SiteSpinner. As the name implies, images zoom into view and then zomm out of view. An image is displayed at least 4 seconds (the default) before the next image appears. The time setting for the image to transition can be changed via a data setting. The slideshow script uses images from a SiteSpinner permanent group object. Only a single slideshow can be used on a web page.

Demo Demo Project

Use the following steps to add the Zoom-In-Out slideshow to your SiteSpinner project

Use the tool button to bring images into your web project. Then select all the images and put them into a permanent group object using the tool button. Use the alignment tool buttons to center the images both horizontally () and vertically ().
Select the group object and open the Object Editor. If you have not added the Object Editor tool button to your toolbar, you can access it via the Quick Edit window, or using the main menu Object→Object option, or by pressing the Alt+O keyboard shortcut. Go to the Options tab in the Object Editor window and in the "Class" text field, enter:
class="zoom-in-out-slideshow"
Identifying your group object.

The time used by a single image to zoom in, remain visible, and then zoom out is set to a default value of 4 seconds. The first 20% of the time is used to zoom in, the next 60% is used to display the image, and the final 20% is when the image zooms out before the next image transition. To alter the total time used per image, add a parameter to the Code field called "data-time" and the number of desired seconds. The value must be more than 4 and decimal units are allowed. For example "5.5" is a valid value meaning 5.5 seconds.

Setting the display time.

Open a new Code object, set the code placement to "Above End Body Tag" and insert the following JavaScript code.

<script>
// **************************************
//   Do not alter code.
// **************************************
// Set CSS for animation.
const stylesheet = document.styleSheets[0]
stylesheet.insertRule('.zoom-in-out-slideshow { display: none; }')
stylesheet.insertRule('.begin { display:none; width:0px; height:0px; }')
stylesheet.insertRule('@keyframes zoom-in-out { 0% { opacity: 0; transform: scale(0); } ' +
  '   20% { opacity: 1; transform: scale(1.0); }' +
  '   80% { opacity: 1; transform: scale(1.0); }' +
  '  100% { opacity: 0; transform: scale(0); }')
function zoomInOut() {
  let imgIndex = 0
  // Get the images contained in the SSP group object.
  const imgGroup = document.querySelector('.zoom-in-out-slideshow')
  const images = imgGroup.querySelectorAll('img')
  // Handle user added data attributes
  let duration = Math.abs(imgGroup.dataset.time)
  if (duration == null || duration == 'undefined' || isNaN(duration)) duration = 4
  if (duration < 4) duration = 4
  stylesheet.insertRule(`.zoom { display:block; animation: ${duration}s zoom-in-out; }`)
  // Set default CSS for the group object and images.
  images.forEach(img => {
    img.classList.add('begin')
    img.addEventListener('animationend', (event) => {
      img.classList.remove('zoom')
      img.classList.add('begin')
      imgIndex = (imgIndex+1 >= images.length) ? imgIndex = 0 : imgIndex + 1
      images[imgIndex].classList.remove('begin')
      images[imgIndex].classList.add('zoom')
    })
  })
  // Begin animation on the first image.
  imgGroup.style.display = 'block'
  images[imgIndex].classList.remove('begin')
  images[imgIndex].classList.add('zoom')
}
window.onload = zoomInOut()
</script>