[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
Anonymous says
Well done !!! Out standing ! It's perfect !
noncoastal says
First I would like to say thank you. Very simple to implement. I've been able to get this working inside of a html widget on my squarespace site, but when i use it on an html page, the slideshow won't loop. Any idea what I'm doing wrong?
Any guidance would be appreciated.
Thank you again.
http://www.noncoastalinc.com/
Anonymous says
Perfect, perfect, perfect!!!! Thank you!!!!
Anonymous says
wow. I was looking for such thing so desperately. I'm not a coder but I still managed thanks to your description. You made my day 🙂 Thank you!!
Lollypopstar says
Glad to be of help!
Arun says
dude – I spent the last 4 hours trying to get this working! Your instructions are the best out there!
many many thanks!
Arun.
Anonymous says
This may be a dumb question… I can manage to get the code in the right places, but how do I get my pics into the slideshow? .
Lollypopstar says
Hi there,
Upload your photos into the image library Squarespace first, make a note of the urls for each of the images.
Then in the code you add to the page in the RAW HTML editor (2nd box above) you replace the src="" bits inside the <img> tags to be the urls of your uploaded images.
Hope that clarifies it?
Laura
Matt says
Thank you so much! I'm a total coding newbie, and have been spending hours trying to get a non-flash slideshow onto my Squarespace page. Your code and explanation really did the trick!!
Quick question: There seems to be a 1px black border around my images — is there a way to remove that?
Best,
Matt
Austin, TX
Lollypopstar says
Hi Matt,
It might be something added by the theme you're using perhaps? Try adding the following in the Custom CSS panel:
#slideshow span.slideshowImg img {
border:0px;
}
Hope it helps?
Shawn4523 says
This is a great post as the code was very easy to implement. I do have a question as a non-coder…. Is the size set by the size of the pictures used or is there some where in the code that I need to change? The pics on your example site are the perfect size yet the pics on the site I am working on come up much smaller. Thanks for the help and thanks for posting this for all us newbs.
Lollypopstar says
Hi Shawn,
Yes the size of the images itself that controls the slideshow size. The CSS I've used above simply sets a fixed height (448px)for teh slideshow – and I made sure that I cropped all my images to be the same size with that height, and then uploaded them.
Does that help?
Anonymous says
Thanks a bunch. Been struggling with another tutorial and your info just got me up and running. So great when things finally work!
Josh
Ed says
Another complete newbie here. Thanks for posting the slideshow, it looks fab! Just one question, is there an adjustment I can try to make it absolutely central? thanks, Ed.
Shawn4523 says
Thanks Lollypopstar,
That helps much…
Again thanks for the great work!
Kevin Oatsvall says
Thanks so much for this! Definitely what I was looking for on my home page. I'm hoping Squarespace will introduce more media options especially with regarding photos in the near future. This helps in the meantime. 😉
Anonymous says
How do you add more then 5 images?
Melissa says
I can't figure out where to paste the items in box number two. If I want my slideshow to go on the main page, where do I insert the code? Someone PLEASE help.
Anonymous says
For some reason when I add this slideshow, it doesnt repeat in Internet Explorer. But in Firefox and Chrome, it loops to the first image when done wit hthe gallery. Does anyone have the same problems in IE?
Paige says
beautiful explanation.. can't thank you enough!
Brady says
probably an idiotic question – where am i storing the slide show in SQ/SP to use? or are the pictures simply ones that I choose – use the name in the brackets and insert the code?
Deniz says
Im trying to place this slideshow into the pre-canvas code but I cant figure out how to make it centered (placed in the page horisontal center, not left-side)
Anyone?
– Norway
Carpe Diem says
Hi I love this slider and it works great on my squarespace site. I was wondering if there was any code to add controls such as back/forward arrows or stop/play button. I am not to good with code but I was just wondering if this code was available?
Anyone? Thanks in advance!
Dan Cross says
You are a life saver! I love the simplicity of your approach and I now have a functioning slideshow on the home page of our company website….thank you very much for posting this!
Thanks,
Dan
James says
Thanks for the code. The reason I signed up for SquareSpace was to help create a website for our church. Your instructions were awesome. The one issue I seem to be having is that the text I place after the slideshow is placed down the page as if all the images have a place holder. Is there something I need to modify?
Thanks again.
Virginia says
Lollypopstar – I can't thank you enough for this simple explanation! I agree with Dan – you ARE a life saver!
Not sure if it's an "Austin, TX-thing," but I'm having the same issue as Matt. I followed your recommendation, but alas, no luck. Any other suggestions?
vgolden_etc says
How did you center the slide show on the page? Mine keeps going to the upper left corner…please and thank you.
Susan says
hey i think you're missing a /span tag in your raw html code, for slideshow4… ????
Lollypopstar says
Well spotted Susan! Thanks for that – I've amended the code above 🙂
Susan says
i love your slideshow, thanks so much for all your tutuorials. i'm a newbie and this has helped a lot…
ps, i'm having trouble getting rid of the border too… i also tried border-style:hidden, and that's not working either. any ideas?
Anonymous says
Thank you so much for posting this, I've been looking for one all day long!
Purpleganesh says
Thank You! I've only been waiting for this for the last two years. Your instructions certainly made my day!
Anonymous says
Honestly, SQ Space should pay you for this.
Thanks a ton,
Zach
RF says
This is awesome! is there a way to make each photo a link as well?
Jose Huitron says
Fantastic post! Thank you!
Anonymous says
Does anyone else's flicker when it first loads?
Sara Hathcoat says
This is wonderful, thanks so much for sharing, worked like a charm!
Wondering if there is any way to add manual controls underneath the
slide show so that user can stop and start, scroll left and right?
Thank again,
Sara
Sara Hathcoat says
Oh, this is the site I am trying to add the controls to the slideshow to for reference if you like. The slideshow is under portfolio, currently just scrolling between to images for placement. Thanks ever so . .
holbrookcampbelllawson.com
Anonymous says
Thanks for sharing, very helpful.
Any idea how to make this responsive so it scales and moves with browser in SS6?
Dannyboy says
Hello, I feel as If i am the only one here who is doing something wrong. When I try to paste the last code into the CSS appearance editor it says M is undefined. Anyone else has this problem?
Miriam says
Hey – I’m confused about step 2, how do I get to Raw HTML on current page – someone please help?!?