[PLEASE NOTE: This post relates to an old version of Squarespace – version 5 and previous. Things have moved around in version 6 so this post will not help v6 users, I’m afraid]
I was asked by a client to add a simple fading slideshow animation to their Squarespace website:
This works best for images that are all the same size that just need to fade into one another. Make sure the images are not too hi res as there is no prelaoding code in here – so users may experience a delay as each picture loads
Take a look at the site so you can see the slideshow in action
http://abbeyfurnitureonline.squarespace.com/
The code works by animating the opacity of the top image in a stck of absolutely positioned images – then changing the z-index once it has finished working with an image.
Here’s how I did it.
Login to Squarespace.
Goto Squaresace Configuration > Website Settings > Code Injection
Add the following code to the Extra header code region:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
function slideSwitch() {
var $active = jQuery('#slideshow span.active');
if ( $active.length == 0 ) $active = jQuery('#slideshow span:last');
var $next = $active.next().length ? $active.next()
: jQuery('#slideshow span:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
setInterval( "slideSwitch()", 4000 );
});
</script>
Note the 4000 is the speed of the transitions – larger number menas slower transitions
Now in the page you want your slideshow to be add the following code (choose RAW HTML editor)
<div id="slideshow"> <span id="slideshow1" class="slideshowImg active"> <img src="/storage/home-page/laura-Cornet.jpg?__SQUARESPACE_CACHEVERSION=1276508434386" alt="" /> </span> <span id="slideshow2" class="slideshowImg"> <img src="/storage/home-page/laura-Stained-Glass.jpg?__SQUARESPACE_CACHEVERSION=1276508416522" alt="" /> </span> <span id="slideshow3" class="slideshowImg"> <img src="/storage/home-page/Laura-Photo-Frame.jpg?__SQUARESPACE_CACHEVERSION=1276508404271" alt="" /> </span> <span id="slideshow4" class="slideshowImg"> <img src="/storage/home-page/Laura-mirror-sign.jpg?__SQUARESPACE_CACHEVERSION=1276508386699" alt="" /> </span> <span id="slideshow5" class="slideshowImg"> <img src="/storage/home-page/Laura-Buddha-on-wall.jpg?__SQUARESPACE_CACHEVERSION=1276508364291" alt="" /> </span> </div>
You will then need the following in your Custom CSS file
Navigate to Appearance Editor > Custom CSS – and somewhere near the bottom (so you can find it again) add the following:
#slideshow {
position:relative;
height:448px; /* modify this to suit the height of your pics */
text-align:center;
}
#slideshow span.slideshowImg {
position:absolute;
top:0;
left:0px;
z-index:8;
}
#slideshow span.slideshowImg img {
display:none;
}
#slideshow span.slideshowImg.active {
z-index:10;
}
#slideshow span.slideshowImg.active img {
display:block;
}
#slideshow span.slideshowImg.last-active {
z-index:9;
You should be able to reuse the slideswitch function on many pages with different images.
Although note that in the current set up they all need to be the same size of images – but this could easily be changed by using inline styles for diffrent slideshow divs.
I hope you enjoy this! Any feedback appreciated
