I’d be inclined to try NewsCycle for this. It’s very lightweight and format-agnostic, so the fact that you are cycling between images should not matter to it one bit. It’s also based on Scriptaculous, so it won’t conflict with the SmoothScroll Action. Pair both of these Actions with the Protaculous Update Action to get the very latest versions of these libraries – Prototype in particular has been updated recently for IE 11 and 10, and that’s a good thing!
If you haven’t used NewsCycle before, it’s a cross-fade animation between elements defined in a separate element. To wit: you draw an HTML box where you want the effect to appear, and put a single element inside that box as a placeholder. Then elsewhere on the same page, you make another box and populate that with a list of – anything. Any sort of element that you can put into a box, be it a stack of inline DIVs (what we will use here) or an HTML list of text (news items, hence the name), or images, or just a bunch of paragraphs, whatever the multiple content is in this source box, the Action will use as the items to iterate over. You apply the Action to the element that is placed in your layout where you want the effect to appear, and you use the Action interface to select the source element, which must be a layer elsewhere on the page.
As far as making a responsive image goes, the easiest* way I can imagine to do this would be as follows:
- Draw your NewsCycle “source” element off-screen somewhere, and double-click inside it to get a text cursor.
- From the main menu, choose Insert / HTML Item. Click once on the inline 100px square box to get its handles showing.
- Set its width to Fixed % (100%), and its height to some junk value (leave it at 100px, maybe).
- Apply your first photo as a background to that element, using the Inspector. Set the options to center/center no-repeat.
- While the inline element is still selected, choose Item / Extended from the main menu. Make sure the
tab is selected. Add the following properties (whatever is left of the colon goes in Name, whatever is right of the colon goes in Value, the colon itself is here only to show you that split):
- background-size: cover
- height: 0
- padding-top: 33%
A special note about that 33% above – it’s almost certainly not what you need here. You need to calculate the ratio between the width and the height of your photo, and use that instead. It also means that your images all need to be roughly the same proportions (but background-size: cover will make up for any variation). What this trick does is make a proportionally-scaling image that will always fill its container from left to right, and always maintain the same aspect ratio as it scales.
Now, because you have followed these steps, and thus have built up something that you can re-use, simply copy the inline box (make sure its handles are still showing when you do this) and then double-click in the parent (NewsCycle source box) so you get the text cursor again, and paste as many times as you have additional photos. After you’ve done this, you can click on each one in turn and change the background image source using the Inspector. So it takes you minutes to set up the first one, and seconds for each of the others.
Finally, in your layout, make sure that the element that you apply NewsCycle to is itself set up for all the responsive goodness that you need. You do not need to worry about the source element again (it’s off-screen and will be removed from the visible layout when you view it in a browser) and you don’t need to worry about your individual images – they will always scale correctly to fit their container. Your slideshow element needs to have the responsive breakpoints defined, and all you should need to do is change its width at each spot, and leave its height as flexible.
I don’t have Freeway in front of me at the moment, but off the top of my head, this should just work.
Walter
*Yes, I know: for certain definitions of “easy”.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
