Anyone know if there is a ‘carousel’ action coming up that takes advantage of mootools javascript library functions.
Something like iCarousel (http://zend.lojcomm.com.br/icarousel/) but as an action for Freeway? I know Weaver (bless his little boots - love the action suite!) has already brought out an action suite based on the mootools library but there is no carousel function.
Would be ‘awesome’ (as our American friends like to say)
I am currently working with a script from jonsdesign right now as a replacement to the original Fading Slideshow: http://smoothgallery.jondesign.net/
Your noted idea would be a logical next addition. I will add this to my list. But, I am not working on this feature presently, nor do I know of any other development.
That sounds great. I keep looking at the Coda site (Coda is now Nova) and salivating at their carousel menu system…
I had a quick look at their code, and the comments say that it is closed-source, not for redistribution. But there is a tantalizing comment in one of the files that says “Coming soon!” Hopefully they will take a tiny break from Coda-ing and release it to the world!
I managed to mock up a page using this library directly in Freeway, but it required using a couple of my Actions as well as Tim Plumb’s essential Source Code Snooper, so this is nowhere near ready for prime-time.
The method is simple, but to warp it into the Freeway dimension, you would need to do the following:
Create all of your sliding layers as a stack of DIVs.
Group them.
Apply an Action to the group, which would need to:
Remove all of the layer styling from each child of the group, and replace it with a single class="section"
Create a #content wrapper around the children of the group
Add the class="scroller" to the group, and note the ID of the group for insertion into the JavaScript constructor call.
In addition, the ID of each child layer would need to go into an array, used to create a list of possible link targets for the navigation (if you want to have named links scroll to particular sliding DIVs).
The Action would need an item instance to apply the forward/backward controls to an object on the page (and maybe an action-item instance if you wanted to have text controls for this purpose).
The Action would also need a similar method to build any direct navigation (see #3). This could be quite fiddly for the user to apply, particularly in case of text links.
There’s a lot more work needed to make this user-friendly. Anyone have a spare moment to lend?
Here’s how to use it (at least how it works today):
Draw your slider “panes” as a bunch of HTML boxes. Make them all exactly the same size. If you want there to be a border or background or anything, apply it equally to all of the boxes.
Align the boxes directly on top of each other, so only the top one shows, and group the stack.
Apply the Carousel Action to the stack. There are no options.
Draw your controls for “paging” through the stack.
Apply the Carousel Button Action to each control, and set it for either forward or backward.
That’s all there is to it.
Coming later, there will be an easy way to create direct navigation, so that when you click on a named control, the carousel spins to show that named item. For the meantime, if you make note of the name of each element of your stack, you can create a manual anchor link, and that will work. So if your third layer is named item3c in the Inspector, just make a manual HREF to #item3c from your control, and when you click it, the carousel will spin to show item3c.
Well, I just spotted something rather major here. If you create your panes out of more than one DIV, or even if you use inline DIVs within your panes, then the Action will dutifully apply the behavior to every single div, individually. This whole stack and group thing will have to be re-thought. Or something…
It was easier to fix than I thought. You can now make a nested layout in any of your panes, and everything just works. The download has been updated, and I would welcome some feedback from anyone who wants to give this a try.
Hmmm. Which action were you applying, and what were you applying it to? The line of code you quoted is in the Carousel Button Action, but I just tried applying it to a whole range of things without error. What version of Freeway and what HTML level was your page?
Just tried again with the same error. Could you go through (step by step) your instructions again, to add this action, maybe I missed something.
Freeway 4.3.3, HTML 4.01 Transitional, applying the scroll buttons to graphic items.
David
On 7 Nov 2007, at 12:19, waltd wrote:
Hmmm. Which action were you applying, and what were you applying it to? The line of code you quoted is in the Carousel Button Action, but I just tried applying it to a whole range of things without error. What version of Freeway and what HTML level was your page?
You were doing things correctly. I found a mistake in my action code, which would only be exposed if you had not added a link to your control graphic. I have revved the Carousel Button action to fix this, and also to limit the types of things you can apply it to. Please download the latest version.
Yep it works now, Its, very good. Do you need to put in anything in for the auto-glide interval? And what about two new page actions Smooth scroll and protaculous, are they applied automatically?
David
On 7 Nov 2007, at 13:13, waltd wrote:
You were doing things correctly. I found a mistake in my action code, which would only be exposed if you had not added a link to your control graphic. I have revved the Carousel Button action to fix this, and also to limit the types of things you can apply it to. Please download the latest version.
SmoothScroll is a work in progress. It has a single bug in Mac browsers, and doesn’t work all the time in IE Windows. So give it a miss for now.
Protaculous is a toolbox Action, it allows you to apply Prototype or Prototype + Scriptaculous to the page, and then add unobtrusive scripts through a page load listener. It’s a developer-friendly Action right now, and will take a lot more work to become more friendly.
These actions are bundled together because they use the same libraries. When you apply the Carousel action to page elements, parts of Protaculous are used to attach Prototype.js, Effects.js, and Glider.js to the page, and to write the unobtrusive listener to the page which wires everything up.
As to the Auto-Glide Interval, if you want the carousel area to start automatically gliding from one thing to the next when the page loads, just add the number of seconds you would like to spend on each pane in that field. If you leave it blank, then the effect will be entirely user-driven.
I need to add a way to cancel the auto-glide behavior if the user clicks on any of the manual controls. Right now, if you try to take over, it moves where you want it to, but then carries on with the automatic scrolling business.
Just tried on a more real word example with some pictures within divs (rather than just coloured divs in my first test), and on publishing, an error says the ‘carousel action was not applied correctly’. But all seem to work correctly
I’m not able to repeat that. Could you try again with a new document, and maybe quit Freeway in between? That error must be coming from Freeway – I don’t set it in my Action.
Also, try downloading the very latest version of the Action. I forgot to rev the version number and Freeway might not have caught that there are changes.
Still getting the error, although everything works. (I’ve sent the file direct to you to look at)
On 7 Nov 2007, at 14:18, waltd wrote:
I’m not able to repeat that. Could you try again with a new document, and maybe quit Freeway in between? That error must be coming from Freeway – I don’t set it in my Action.
