Zoom-In Slideshow

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

Demo Demo Project

Image selection

Images for the slideshow should be the same width and height. The slideshow will work with images of varing dimensions, but the best visual effect is when the dimensions are the same.

Use the following steps to add the Zoom-In 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-slideshow"
Identifying your group object.

The time used by a single image to zoom in and remain visible is set to a default value of 3 seconds. Fifty percent of this time is used to zoom in the image and the remainder is the time the image remains visible before the next image transition. To alter the time value, add a parameter to the Code field called "data-time" and the number of desired seconds. The value must be more than 3 and decimal units are allowed. For example "3.5" is a valid value meaning 3.5 seconds. Keep in mind that 50% of the time is used for zooming. See the following figure.

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-slideshow { background-size: cover; }')
stylesheet.insertRule('.begin { display:block; width:0px; height:0px; }')
stylesheet.insertRule('@keyframes zoom-in { 0% { opacity: 0; transform: scale(0); } ' +
      ' 50% { opacity: 1; transform: scale(1.0); }')
function zoomIn() {
  // Get the images contained in the SSP group object.
  const imgGroups = document.querySelectorAll('.zoom-in-slideshow')
  imgGroups.forEach(grp => {
    let imgIndex = 0
    // Handle user added data attributes
    let duration = Math.abs(grp.dataset.time)
    if (duration == null || duration == 'undefined' || isNan(duration)) duration = 3
    if (duration < 3) duration = 3
    stylesheet.insertRule(`#${grp.id} .zoom { display:block; animation: ${duration}s zoom-in;`)
    // Create slideshow
    const slides = grp.querySelectorAll('div')
    slides.forEach(div => div.id = '')  // remove SS generated div ids
    // Set default CSS for the group object and images.
    const images = grp.querySelectorAll('img')
    images.forEach(img => {
        img.classList.add('begin')
        img.addEventListener('animationend', (event) => {
          // Make the current image a background on the group object
          // before animating the next image.
          grp.style.width = img.naturalWidth + 'px'
          grp.style.height = img.naturalHeight + 'px'
          grp.style.backgroundImage = `url(${img.src})`
          // Animate the next image.
          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.
      images[imgIndex].classList.remove('begin')
      images[imgIndex].classList.add('zoom')
    })
  }
  window.onload = zoo
</script>