[Pro] Can Freeway do this?

I ran across a page that has an interesting twist to how photos can be made larger when a mouse rolls over them. I can see the value of this technique in a variety of capacities, and wondered how it was done and whether Freeway (or an action) can do it.

Here’s the URL: http://www.bluecreststudios.com/gmail-studio/screen-shots/


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

Dead easy with Protaculous. Apply the Action to your page, and set it to use scriptaculous-packed as the library.

Draw an HTML box, double-click inside it, and choose Insert / Graphic Item from the main menu. Resize that image to 300 x 200px and import an image.

Scale the image to fit, and while the graphic box is still selected, choose Item / Extended, press New, and type ‘class’ in the Name field and ‘zoom’ in the Value field (both without quotes).

Now copy the image to the clipboard (make sure it’s still selected, with the 8 handles showing around the edges). Double-click next to it in the HTML box to get your text cursor, type Return, paste, Return, paste, as many times as needed. You should have a bunch of photos with spaces between them.

Click on the page somewhere so nothing is selected, then click on the top Function Body button in the Actions palette. Paste in the following:

$$('.zoom').invoke('setStyle',{width:'150px',height:'100px'});
$$('.zoom').invoke('observe','mouseover',function(evt){
    new Effect.Morph(evt.element(),{style:{width:'300px',height:'200px'},duration:0.4,queue:'end'});
});
$$('.zoom').invoke('observe','mouseout',function(evt){
    new Effect.Morph(evt.element(),{style:{width:'150px',height:'100px'},duration:0.4,queue:'end'});
});

It took me longer to type this than to set up, and I type pretty fast.

Walter


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

Hi Walter

Just tried this and not working - does/has the web forum altered the code at all?

David


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

Ignore that

I forgot to change to Scriptaculous Packed

BTW - have you not been getting my emails?

David


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

Sorry, what emails?

Walter


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

About my Database problems

Several since last Friday

Not like you not to answer!

David:-)


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

Walter, thanks for that great explanation. But it looks like before I implement it I’m going to have to move from Freeway 4 Pro to Freeway 5 Pro. Every time I’m about ready to do that, some client wants something done and I kind of freeze at the idea that what I’m doing – or did – will require wholesale changes to every site I’ve created.

But this is a keeper post, and that I shall. Thank you for sharing your expertise.

Laura


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

This will work in 4 as easily as 5, there’s no difference in the
generated code at the level that matters here. Protaculous is a third-
party* Action, you get it at ActionsForge.com and install it and it
Just Works™.

Walter

*Which I wrote…

On Nov 21, 2009, at 12:27 PM, LauraB wrote:

Walter, thanks for that great explanation. But it looks like before
I implement it I’m going to have to move from Freeway 4 Pro to
Freeway 5 Pro. Every time I’m about ready to do that, some client
wants something done and I kind of freeze at the idea that what I’m
doing – or did – will require wholesale changes to every site I’ve
created.

But this is a keeper post, and that I shall. Thank you for sharing
your expertise.

Laura


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

Rock and roll, then! I’ll have to give this a whirl. I still want to upgrade to F5, but until I do it appears I have more options than I assumed.

Again, thank you, Walter.

Laura

On 21 Nov 2009, 6:22 pm, waltd wrote:

This will work in 4 as easily as 5, there’s no difference in the
generated code at the level that matters here. Protaculous is a third-
party* Action, you get it at ActionsForge.com and install it and it
Just Works™.

Walter

*Which I wrote…

On Nov 21, 2009, at 12:27 PM, LauraB wrote:

Walter, thanks for that great explanation. But it looks like before
I implement it I’m going to have to move from Freeway 4 Pro to
Freeway 5 Pro. Every time I’m about ready to do that, some client
wants something done and I kind of freeze at the idea that what I’m
doing – or did – will require wholesale changes to every site I’ve
created.

But this is a keeper post, and that I shall. Thank you for sharing
your expertise.

Laura


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

Walter,

Been trying this action. It does zoom the pictures, but it zooms uncontrollably.

I scroll over a photo, it zooms up, down, then zooms the photo underneath it.

Then they all start zooming, one after the other; I take my hand off the mouse and they all still zoom.

Any ideas why it is irratic?

Thanks,

Sam


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

Can you post a link?

Walter


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

Walter,

Here is the link:

www.webandsound3.info

On the first couple of mouse-overs, everything appears to be fine. But if I roll the mouse down or it happens to be between the pictures, that is when the irratic behavior starts.

Thanks for the help,

Sam


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

Yes, I see that too, it looks like the events are getting stacked up.
As one element zooms out, it moves out from under the cursor and
triggers the mouseout event. Try this variant, which gives each image
its own queue named for that image’s ID. If the image doesn’t have an
ID (depending on the Freeway version and HTML level) the Prototype
library gives it one.

$$('.zoom').each(function(elm){
	var elm = $(elm);
	elm.setStyle({width:'150px',height:'100px'});
	var elmId = elm.identify();
	elm.observe('mouseover',function(evt){
		new Effect.Morph(elm,{style:{width:'300px',height:'200px'},duration: 
0.4,queue:elmId});
	});
	elm.observe('mouseout',function(evt){
		new Effect.Morph(elm,{style:{width:'150px',height:'100px'},duration: 
0.4,queue:elmId});
	});
});	

This way, each effect can happen on each image separately, rather than
stacking up in a queue the way it did previously. You may still see
some collisions, but the overall effect should be better.

This version should be a little faster, too, since it collapses
everything into one loop through the elements, rather than three
separate loops to shrink, observe mouseover, and observe mouseout.

I see a little bit of flickering going on in here when I really stress
the page by moving the mouse really quickly, but overall it seems to
avoid that problem you saw.

Walter

On Nov 21, 2009, at 10:37 PM, sampolfonz wrote:

Walter,

Here is the link:

www.webandsound3.info

On the first couple of mouse-overs, everything appears to be fine.
But if I roll the mouse down or it happens to be between the
pictures, that is when the irratic behavior starts.

Thanks for the help,

Sam


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

Walter,

Thank you for your updated code. I applied the code and re-uploaded the site to

www.webandsound3.info

Now, the pictures scrollover/grow works correctly, but on certain places on the rollover, there is a very quick FLASH of a larger image, and then it is normal. Any ideas why the larger image flashes and then disappears?

Thanks for your help.

Sam


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

I see it, but I don’t know why it’s there either. If I had to guess, I
would say it appears as though Scriptaculous is fluffing a calculation
for one frame, and the browser is ignoring that value, thus the image
is reverting to its natural size for a very short period of time until
the next set of dimensions are passed along.

Walter

On Dec 7, 2009, at 7:59 AM, sampolfonz wrote:

Now, the pictures scrollover/grow works correctly, but on certain
places on the rollover, there is a very quick FLASH of a larger
image, and then it is normal. Any ideas why the larger image
flashes and then disappears?


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

Just a comment, as a non coder/non-techie, the ‘flashing’ seems to be
speed sensitive as to how you move your mouse. Could it be related to
any delay in the screen refreshing as one area takes over from another?

Colin

On 7 Dec 2009, at 13:08, Walter Lee Davis wrote:

I see it, but I don’t know why it’s there either. If I had to guess,
I would say it appears as though Scriptaculous is fluffing a
calculation for one frame, and the browser is ignoring that value,
thus the image is reverting to its natural size for a very short
period of time until the next set of dimensions are passed along.

Walter

On Dec 7, 2009, at 7:59 AM, sampolfonz wrote:

Now, the pictures scrollover/grow works correctly, but on certain
places on the rollover, there is a very quick FLASH of a larger
image, and then it is normal. Any ideas why the larger image
flashes and then disappears?


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

Each element on the screen is autonomous, and has its own effect
running in parallel with all the others. That said, JavaScript is
single-threaded, so it could just be that there’s not enough
processing power in that thread to handle three of these elements
animating at once, and if you mouse quickly, you can engage more than
two at a time. Maybe if the difference between large and small was
less, so fewer frames were needed to get from one size to the other,
then it wouldn’t be a problem.

Walter

On Dec 7, 2009, at 8:51 AM, Colin Alcock wrote:

Just a comment, as a non coder/non-techie, the ‘flashing’ seems to
be speed sensitive as to how you move your mouse. Could it be
related to any delay in the screen refreshing as one area takes
over from another?


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