FADE SLIDESHOW TUTORIAL - adding text...

User 2823310 Photo


Registered User
312 posts

If you are using the STEP by STEP fade slideshow here:
http://gordw.com/rsd/fade-slideshow.html
This is a way to make it slide containers not just images.
So what you can then do for example is add text or other elements with pictures...
or make anything for that matter into a slideshow.

This temporary test page goes over how you do that is here:
http://gordw.com/rsd/test/
If anyone is interested in doing this kind of thing let me know and I'll write up another one covering how to do it, most of you should be follow this to test it out. You could for example use the effects to move text elements around have images zoom etc and build up unique slideshows inside RSD with it.

I just did this quickly this morning so I didn't make changes for the breakpoints and stuff like you would on a real site. You might need to refresh/reload that page if it's in your browser history
User 2823310 Photo


Registered User
312 posts

I added some basic CSS animation so you can see what you could do with the super simple dimple FADE slideshow when using containers instead of pictures.

Here is the updated test page: http://gordw.com/rsd/test/

All done in RSD with no add on stuff to deal with too, and since orbit won't fade it's an option.
User 2823310 Photo


Registered User
312 posts

Finally got back to this and added media queries for the text animation sizes, not that any of you would probably want to do animations but you can view the source code to see those. Here is the updated test page: http://gordw.com/rsd/test/

Some day I'll write this step by step up... There was one position thing or something I had to add when adding text to the original slideshow but I forgot what it was now :rolleyes:

Anyway I use it on the mantel & carpentry site (signature link) I just did if you want to see it in the real world. Didn't use animation coding there just styled it with RSD.
User 244626 Photo


Registered User
658 posts

Have you tried removing the two picture scripts in the head to see if it effects the responsiveness of the slideshow. I was doing some preliminary testing on some of mine because of a theory it may be conflicting with the way modern browsers handle it without the polyfill. I also am wondering if this could be why my orbit does not "fill" on loading of the page sometimes and I have to use some overides which I think you may be aware of.

Its really a simple question of why are we still using it ? Both Bootstrap and Foundation do not support IE 9 and modern browsers seem to handle images fine without this "addon" to cover old methods.

Its also just a theory that this all started in RSD 1.5 when jquery was not being used and this allowed a easy way to add multiple srcset(s) on a image to be used without having to add jquery. Also at that time custom HTML5 attributes on a element were non-existent.

User 2823310 Photo


Registered User
312 posts

As far as this slideshow goes it's only a couple of lines of Jquery, that's why I like it you don't need a bunch of scripts added just a few lines poof done. It's not using anything from foundation or bootstrap it's just an old script I used to use in another program I worked on that I adapted for RSD. So polyfill doesn't effect the way it works... as far as I've seen.

The responsive queries was for the css animations I wrote just to show you can do just about anything with it. It'll slide your grandma if she was on the page. :D

But on the polyfill I believe I suggested that we didn't need it when we asked for the images to be put back in for seo? I think, it was a while ago...
User 244626 Photo


Registered User
658 posts

Alter Eagle wrote:
As far as this slideshow goes it's only a couple of lines of Jquery, that's why I like it you don't need a bunch of scripts added just a few lines poof done. It's not using anything from foundation or bootstrap it's just an old script I used to use in another program I worked on that I adapted for RSD. So polyfill doesn't effect the way it works... as far as I've seen.

The responsive queries was for the css animations I wrote just to show you can do just about anything with it. It'll slide your grandma if she was on the page. :D

But on the polyfill I believe I suggested that we didn't need it when we asked for the images to be put back in for seo? I think, it was a while ago...


Yes, that makes sense and your slideshow is a great tool to have. Each container sliding with the element animation inside is a very nice addition also.....Thanks for sharing !

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.