[Pro] FancyZoom 1.1 and Rollover action

I can use the Rollover action (using the attributes method) with no problems. However, once I add the FancyZoom script to my page, the RollOver action no longer works. FancyZoom works fine however.

If I remove FanzyZoom (onload) tag from the RollOver works again.

In Freeay, I use the “extended” option to add to the tag. The finished line reads:

So there should be no problem, but the Rollover script doesn’t like sharing the tag I guess.

If anyone can help, I’d really appreciate it.

You can see the page in question here:

http://www.theayurvedictongue.com/test/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Where should we be looking for the rollovers? I don’t see anything that looks likely on your page. As you say, the fancy zoom works fine. The rollovers on your menu bar are working fine as well. Where else would I want to see rollovers that I would not?

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter- The 5 images (below the text “click to zoom”) should change upon a rollover. I can have them work fine until I activate the FancyZoom script using the “onload” parameter in the tag.

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is the same page without the zoom activated. You’ll notice you get the rollover images:

http://www.theayurvedictongue.com/test/test.html

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try this. Remove the onload fancyzoom from the Page/Extended dialog.
Open the Page / HTML Markup dialog, and switch to the Before /BODY
segment of that dialog. Paste in this:

<script type="text/javascript">
setupZoom();
</script>

This will have the same effect, but it will get the fancy zoom script
to fire after Freeway’s preloader. I believe it’s the order of
operations that’s at fault here.

Walter

On Jul 4, 2009, at 12:28 AM, Bryan Los wrote:

Here is the same page without the zoom activated. You’ll notice
you get the rollover images:

http://www.theayurvedictongue.com/test/test.html

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter- I tried putting that code everywhere within the HTML Markup dialog, but it seems that FanzyZoom only works when in the as onload=smartZoom().

I had it within the , within , etc. and the rollover works fine, but the zoom just links to a new page, and not the JavaScript zoom.

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try this out. This is only for a test, because it’s a huge hack and will render your page un-editable until you back it out.

Apply Tim Plumb’s Source Code Snooper Action to the page. Get it at http://freewayactions.com if you don’t have it already.

Once you apply the Action to the page, publish the page so that the Action’s code buffer will be filled. Then press the Edit button in the Action interface (in the Actions palette, if you don’t have that open all the time like I do).

Look for the <body tag and change the order of the calls, so fwPreload(); comes before smartZoom();

Publish again, and test it. If this works, then we know the answer, and the real solution will come with a simple Action to force this change without requiring a huge amount of hacking.

If it doesn’t, then I would suspect that there is some error happening here, but that it’s being eaten before Firebug can see it. I didn’t see anything wrong from that angle when I looked the first time. If that’s the case, then you’ll just have to change the way you get this rollover effect to happen.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the quick replies. I actually took your advise about changing the order of the calls, but I just used Transmit to change the source on the FTP.

It now reads

But… the RollOver still doesn’t work. It appears that something is not compatible on the Freeway side with the rollover action.

Here is the page I made the change:

http://www.theayurvedictongue.com/test/

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is a response I got from Freeway support:

The Rollover Action uses JavaScript - as does FancyZoom - so with the combination of both, there may well be a conflict.

We stringently test Freeway Actions to make sure they don’t conflict with all other core Actions, but we can’t guarantee that the Actions will work with third-party code.

If you want to use FancyZoom you’ll need to use it on a graphic which doesn’t have the Rollover Action applied as well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The rollover effect you are creating is pretty simple – turning a gray outline “on” and “off”. You might consider doing this with CSS styles instead of the Rollover Action.

Remove the Rollover effect from each image, and use the Extended button in the Hyperlink dialog to add a new classname to each link. After you click on the Extended button, you’ll see a new dialog. In that dialog, click on the New button to add a new property to the link. This sub-sub-dialog will have two fields: Name and Value. In the Name field, enter ‘class’ (without the quotes). In the Value field, enter a single word, like ‘border’ (again, without the quotes).

Okay out of the stack of dialogs, and repeat for each linked image that you want to have the border effect on mouseover.

Now in your Styles palette, click on the gear menu and select New Style. In the Tag field, enter ‘.border:hover’ (leading dot is critical here). Tab into the Name field, delete whatever is there, and tab back out.

Click on the Extended button in the Edit Style dialog, and then on New. Enter ‘border’ and ‘4px solid #ccc’ in the dialog, and okay it. Press New again and enter ‘margin’ and ‘-4px 0 0 -4px’ in the dialog and okay it. Okay out of the Extended dialog and the Edit Style dialog.

What you’ve done here is make a new style that will magically appear on the page without needing to be applied to anything on that page. Any link that has a class of ‘border’ will automatically show a 4px border around it whenever you mouse over it.

Try it out, and let me know how it works for you.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter- I tried what you suggested, and it gave me a border only on the bottom. I’ve included a link below. Only did the first image box on top/left.

http://www.theayurvedictongue.com/test/test.html

At least it’s a start. When it hovers, I see it movies the other items. If I can get this to hover within the edges of the image, so it won’t move any other items, that would be great.

Bryan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options