I’m about to create a carousel with waltd’s (great) carousel action… so far, it works well. However, I have a requirement where I’m not sure about how this can be done.
Each carousel pane (DIV boxes containing some text and images) should behave like a link - regardless where the user clicks within the DIV box, it must call a given URL.
Sure, I could simply convert the DIV boxes into images. But I’m trying to avoid this, if possible.
unfortunately this method does not really work well.
Each DIV box should get such an individual link added. But when applying these JavaScript instructions to the first DIV box (the one that contains the “carousel” action), it remembers the link for all other boxes (the carousel panes) as well.
So regardless which URL I set on the other DIVs, these are simply ignored. The only solution I found so far is to keep the first DIV box “unlinked”, but that would require to alter my intended layout.
Try this. Put a single link somewhere within each pane. Make sure it goes to where you want that entire pane to go. Now apply Protaculous to the page, and click on the top Function Body button. Inside that popup, paste the following:
$$('div.section).each(function(elm){
if(elm.down('a')){
elm.setStyle('cursor:pointer');
elm.observe('click', function(evt){
var link = this.down('a');
if(!! link && !! link.href){
evt.stop();
window.location.href = link.href;
}
});
}
});
What this function does is look into the pane (either the first one or any of the others) and find the first link it sees. Then it uses that link to redirect the page in response to a click. If it doesn’t find a link inside the DIV, it ignores it for the purposes of this behavior.
Walter
On Feb 11, 2012, at 6:07 PM, tobiaseichner wrote:
Hallo Thomas,
unfortunately this method does not really work well.
Each DIV box should get such an individual link added. But when applying these JavaScript instructions to the first DIV box (the one that contains the “carousel” action), it remembers the link for all other boxes (the carousel panes) as well.
So regardless which URL I set on the other DIVs, these are simply ignored. The only solution I found so far is to keep the first DIV box “unlinked”, but that would require to alter my intended layout.
I’ll give it a try… but the page also contains a second carousel made of DIV boxes having links. I guess that also this will be effected by the script, won’t ?
Yes. But if you prefix the selector with the ID of your carousel, you will restrict the action to just the children of that one carousel. Click once on the item on your page that has the Carousel Action applied to it, and note the name in the Title field of the Inspector. (Imagine it’s named item42) Then change your script to read:
This will scope the behavior to only the children of that Carousel, not any others on the same page.
Walter
On Feb 12, 2012, at 3:31 PM, tobiaseichner wrote:
Hello Walter,
thank you for writing this script for me
I’ll give it a try… but the page also contains a second carousel made of DIV boxes having links. I guess that also this will be effected by the script, won’t ?
For the Fader, you would need to make the selector $$(‘.SFmain’) to target all of them, and $$(‘#item42_fader’) to target a single one (adjusted to your actual item ID, naturally).
Walter
On Feb 13, 2012, at 5:36 AM, tobiaseichner wrote:
Ah, this is great
Guess your script is also working well with the scripty fader action ?
