# \[Pro\] Can Freeway do this?

**URL:** <https://discourse.softpress.com/t/pro-can-freeway-do-this/6279>\
**Category:** Freeway\
**Created:** [November 20, 2009, 5:06pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279 "2009-11-20T17:06:40Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![LauraB](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/l/0ea827/32.png) [@LauraB](https://discourse.softpress.com/u/LauraB)\
**Post date:** [November 20, 2009, 5:06pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/1 "2009-11-20T17:06:40Z")

</div>

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/](http://www.bluecreststudios.com/gmail-studio/screen-shots/)

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 20, 2009, 11:18pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/2 "2009-11-20T23:18:46Z")

</div>

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:

```auto
$$('.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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [November 21, 2009, 12:33am UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/3 "2009-11-21T00:33:19Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [November 21, 2009, 12:44am UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/4 "2009-11-21T00:44:19Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 21, 2009, 12:49am UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/5 "2009-11-21T00:49:07Z")

</div>

Sorry, what emails?

Walter

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [November 21, 2009, 12:57am UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/6 "2009-11-21T00:57:10Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![LauraB](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/l/0ea827/32.png) [@LauraB](https://discourse.softpress.com/u/LauraB)\
**Post date:** [November 21, 2009, 5:27pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/7 "2009-11-21T17:27:48Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 21, 2009, 7:21pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/8 "2009-11-21T19:21:58Z")

</div>

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](http://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](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![LauraB](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/l/0ea827/32.png) [@LauraB](https://discourse.softpress.com/u/LauraB)\
**Post date:** [November 21, 2009, 7:45pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/9 "2009-11-21T19:45:11Z")

</div>

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](http://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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![sampolfonz1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/96bed5/32.png) [@sampolfonz1](https://discourse.softpress.com/u/sampolfonz1)\
**Post date:** [November 21, 2009, 9:03pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/10 "2009-11-21T21:03:10Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 21, 2009, 9:43pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/11 "2009-11-21T21:43:00Z")

</div>

Can you post a link?

Walter

* * *

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

---

<div class="post-metadata">

**Author:** ![sampolfonz1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/96bed5/32.png) [@sampolfonz1](https://discourse.softpress.com/u/sampolfonz1)\
**Post date:** [November 22, 2009, 3:37am UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/12 "2009-11-22T03:37:58Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 22, 2009, 5:56pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/13 "2009-11-22T17:56:43Z")

</div>

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.

```auto
$$('.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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![sampolfonz1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/96bed5/32.png) [@sampolfonz1](https://discourse.softpress.com/u/sampolfonz1)\
**Post date:** [December 7, 2009, 12:59pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/14 "2009-12-07T12:59:16Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 7, 2009, 1:08pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/15 "2009-12-07T13:08:52Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Colin\_Alcock](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/c/57b2e6/32.png) [@Colin\_Alcock](https://discourse.softpress.com/u/Colin_Alcock)\
**Post date:** [December 7, 2009, 1:51pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/16 "2009-12-07T13:51:04Z")

</div>

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](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 7, 2009, 2:06pm UTC](https://discourse.softpress.com/t/pro-can-freeway-do-this/6279/17 "2009-12-07T14:06:21Z")

</div>

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](http://freewaytalk.net/person/options)