Space Gallery

Space Gallery is a slideshow written by Stefan Petre. You can download the zip file with the code for the slideshow from his website.. The demo project also contains a copy of his zip file. You can easily use his slideshow in SiteSpinner. You can use multiple slideshows on the page, but performance may suffer depending on the number and size of the images.

The Zip File

The Space Gallery zip file from Stefan’s site contains a complete working example of the slideshow. If you extract the files from the zip file into a folder and double-click the index.html file, his slideshow example will be displayed in your default browser. This zip file contains more code than you need for use in SiteSpinner. To use the Space Gallery slideshow in SiteSpinner, you need the files shown in the following table. The demo’s zip file contains only the required files you need.

These files are external to your SiteSpinner project, so you must upload them to your site. Do not add the two image files to your project using the “Add a picture” tool button. The CSS and Javascript codes require them and should not be part of the web design page. See Tips→Upload Files for help. Upload the required external files to your site’s /css, /js, and /image folders. The demo project has a second page called “uploads” with Publish File objects to facilitate uploading the external files. SiteSpinner does not use the Publish File object when previewing, so you must copy the required files into your preview folder.

Preparing Your Images

All the images for the slideshow should have identical dimensions for the best viewing experience. This is a crucial step in ensuring your slideshow runs smoothly. If you use the slideshow on mobile devices, ensure the image widths are less than the mobile target resolution; the best width is 360px or less.

Using Space Gallery

Begin by bringing in the desired images using the “Add a picture” () tool. Gather the images into a temporary group, then center them vertically and horizontally (). If the images do not have the exact dimensions, resize them so they do. Images with identical dimensions are essential so your slideshow has a smoother effect. Finally, convert the temporary group into a permanent group ().

With the group object selected, open the Object Editor window to the “Options” tab. In the “Code” text field, enter:

class="spacegallery"

Save and close this Code object. Finally, open a new Code object and set the code placement to “Header,” and in the text field, enter:

<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js">/script>
<script type="text/javascript">
  $(window).load(function() {
    $('.spacegallery').spacegallery({loadingClass: 'loading'})
  })
</script>

Save and close the Code object.