Full Screen Background Slideshow [V5]

So someone asked on the forums how to implement this tut on Squarespace - here’s a guide!:


1) Install jQuery!

2) Paste this code into Post-canvas HTML:
(Omit this if you don’t want the info box to appear in the bottom right)

<div id="image_description"><span id="image_artist"></span><br/><a onclick="this.target='new';" id="image_url"></a></div><img id="bg" style="display:none" /><div id="bg_grid"></div>

3) Paste this into Custom CSS:

#canvas{position:relative;z-index:2;background-color:white}img#bg{position:fixed;top:0;left:0;height:100%;width:100%;z-index:0}#bg_grid{position:fixed;top:0;left:0;height:100%;width:100%;background:url(/storage/grid.png) repeat;z-index:1}#image_description{position:fixed;right:-150px;bottom:60px;width:140px;height:38px;background-color:#ddd;filter:alpha(opacity=80);-moz-opacity:.8;-khtml-opacity:.8;opacity:.8;z-index:2;padding:5px;font-size:10px;line-height:12px;color:#333}

4) Paste this into your Extra Header Code in Code Injection (After the jQuery statement!):

<script type="text/javascript">

var aImages = new Array();
var aURL = new Array();
var aArtists = new Array();
var iPrev = -1;
var iRnd = -1;

aImages[0] = "http://canvasinabox.com/preview/7/47/47-7-preview_large.jpg";
aImages[1] = "http://canvasinabox.com/preview/7/48/48-7-preview_large.jpg";
aImages[2] = "http://canvasinabox.com/preview/7/46/46-7-preview_large.jpg";
aImages[3] = "http://canvasinabox.com/preview/18/133/133-18-preview_large.jpg";
aImages[4] = "http://canvasinabox.com/preview/27/174/174-27-preview_large.jpg";
aImages[5] = "http://canvasinabox.com/preview/27/173/173-27-preview_large.jpg";
aImages[6] = "http://canvasinabox.com/preview/5/25/25-5-preview_large.jpg";

aURL[0] = "http://kunst.canvasinabox.com/?_globalsearch=47-7";
aURL[1] = "http://kunst.canvasinabox.com/?_globalsearch=48-7";
aURL[2] = "http://kunst.canvasinabox.com/?_globalsearch=46-7";
aURL[3] = "http://kunst.canvasinabox.com/?_globalsearch=133-18";
aURL[4] = "http://kunst.canvasinabox.com/?_globalsearch=174-27";
aURL[5] = "http://kunst.canvasinabox.com/?_globalsearch=173-27";
aURL[6] = "http://kunst.canvasinabox.com/?_globalsearch=25-5";

aArtists[0] = "Marcel Verkaart";
aArtists[1] = "Marcel Verkaart";
aArtists[2] = "Marcel Verkaart";
aArtists[3] = "Marco Schippers";
aArtists[4] = "Sylvia Hennequin";
aArtists[5] = "Sylvia Hennequin";
aArtists[6] = "Jonathan Vos";

$(document).ready(function() {

/* Define the function that triggers to fade in the background */
/* Fade in during 3 seconds */

/* Animate the picture description during 1 second */
$("#image_description").animate({right: '+=150'}, 1000)
}, 1000);

/* Set the timeout to fade out after 10 seconds*/
$("#image_description").animate({right: '-=150'}, 1000);

/* Load the next image after 4 seconds */

/* Start the slideshow one second after the page is ready */


function LoadImage(iNr)

/* Assign the new image to the background */
$("img#bg").attr("src", aImages[iNr]);

/* Assign the artist name to the description */

/* Assign the image url to the description */
$("a#image_url").attr("href", aURL[iNr]);


function LoadImages()

/* Select a new random image number */
while(iPrev == iRnd)
iRnd = Math.floor(Math.random()*aImages.length);

/* Show the selected image */

iPrev = iRnd;


5) If you want the grid effect to appear over the background, download this image (right-click - save as): clicky. Upload it to the root of your file storage.

6) Now, in the script in step 4, you need to change the arrays to point to the correct images. Change the values in the aImages array to change the images, the URLS in the aURL array for the links in the description and the names in the aArtists array to change the artist name.

  • Delete/Add lines of the array as required.
  • The image link in aImages[0] corresponds to the URL in aURL[0] and the name in aArtists[0].
  • Leave the respective field in aArtist or aURL blank if you don’t want a name or link.
  • This might be helpful if you have the images on your Squarespace site.

Good Luck!