I’m new to freeway and noticed the great coda-like tab swapping on the softpress homepage. I took a look at the source code and it’s called tab-swapping.js. How do I implement this into freeway pro?
HI,
this is not the essay I thought it was going to be last night. For the Softpres site, we are using Expression Engine, AND working using pretty much 100% inline content. Both of these can complicate the matter. I am guessing that you are using Freeway in a kore traditional way.
To get the carousel effect you see, I used Walter’s Protaculous Carousel Actions to set up the carousel. You may find that his Actions alone are all you need - after all, you get an Action that makes tabs with those. He has also supplied instructions for setting up the mechanism too. It’s all fairly painless, and as you can see, the results are excellent.
You will need Freeway Pro, as this requires layered items.
The JavaScript file is to solve a number of unique problems which surfaced as a result of us using Expression engine and needing to have as much of the scrolling/tabs area as editable as possible from within the Expression Engine editing back end. You can quite easily use images for the tabs, and change the text locally in Freeway. However, I seem to remember that the Tabs Action in the Carousel suite doesn’t play too well with the Rollover Action (to be honest, I’ve not checked this recently, so I could be wrong). If this is the case, give a shout and I’ll explain the CSS method I use. This is where the JavaScript comes into play.
If you need more about this, let me know and I’ll add more. I think that if I were to swamp FWTalk with a slab of text about what I did, some may run to the hills screaming (it involves a mix of JavaScript, CSS and stunt work which can be offputting), so see how you get on with the Actions from Walter as they stand first.
However, I seem to remember that the Tabs Action in the Carousel suite doesn’t play too well with the Rollover Action (to be honest, I’ve not checked this recently, so I could be wrong).
This was fixed quite a while ago. You can apply both Actions to a graphic and use it to drive the Carousel effect.
I’ve been using the Carousel action on my site for a while, but I know nothing about using CSS so have no idea how to get rollovers on the tabs. Any info you can send on how to set them up would be greatly appreciated! Maybe in future updates of the Carousel actions, some options for rollovers on tabs could be added - fingers crossed!