ScriptyLightbox2

David, I’ve spent the last half hour fiddling with your suggestion. Target Show/Hide Layer can’t hold a candle to Walter’s action in terms of my productivity, sanity, filesizes, and practicality. It’s a real pain in the donkey, let me tell you!

I therefore think it would still be useful to have a means of preventing auto-scale from occurring on graphics used with Walter’s action.

–James Wages


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

Hi,

I need to load LightBox directly opening my page (without links, onLoad). Is it possible?

Sorry for my bad english, thanks,
Roberto


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

Sorry for the delay, I’ve had a look at this problem and there doesn’t seem to be any way to make it fire at page load without rewriting the function to observe another method besides click. And there doesn’t seem to be any way to fire the click event on a link from JavaScript. (That’s probably a good thing, security-wise.)

If you don’t mind hand-coding a bit, you could apply the Action, let it publish the code it’s programmed to create, then copy the entire function out of the published HTML and make a few changes, then remove the Action and build the effect back up using the Page / HTML Markup dialog and the Hyperlink / Extended sub-dialog.

Here’s what it would look like as a “open once on page load” function rather than a click here to load function:

You would have to fill in the file path and the geometry and filename extension in order for this to work, and you would use the Protaculous Action to add this code (and the requisite JavaScript libraries) to your page.

Walter


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

Dear Walter Davis,

I apologize for the delay of my answer, of my thanks.

I have thought and worked a lot on your proposals, but I am only a graphic designer so I’m not able to code.
Effectively, why to change the light box? I think that a modal window is perfect for my needs. The difficult (for me, of course!) is to change its aesthetic aspect by CSS.

Waiting for a new modal dialog FW action (why not? It’s a marketing idea!), many thanks again,

Roberto


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

I finally found a reasonable solution for what I wanted to do, so I wish to share that with all of you now.

If you scroll back up and read our previous posts on this issue, you will see that I have been wanting to prevent the automatic shrinking feature in Walter’s action, which shrinks the size of the popup graphic if you make your browser window too small. The problem is that if you have a graphic with text in it, that text can become unreadable.

When I originally asked if Walter could remove that auto resizing feature, Walter replied as follows:

“If you remove this feature, there won’t be much of anything left to the Action… Plus, it would be a usability nightmare on the iPad.”

I honestly didn’t care much about Walter’s “there wouldn’t be much left” reason, but I did give thought to his iPad comment.

After being frustrated with this for so many weeks, I put my thinking cap on today to see if I couldn’t single-handedly solve my own problem. I was able to. My solution is basically a hack of Walter’s Action but it works. Here’s what I did:

  1. I right-clicked on Walter’s “ScriptyLightbox2” action to make it “Show Contents.”

  2. I then dug down into the folders until I found “ScriptyLightbox2.fwaction,” and I then opened that file in TextWranger.

  3. Within TextWrangler, I scrolled through the file and didn’t make much sense of it all (since I’m by no means “a coder”) but I did take note of the section entitled “Element.addMethods.” In there I could see Walter was using math to resize something, and I logically deduced this to be the “Auto Resize” code.

  4. I then noted the following two lines in that section of the code:

if (width > (screen.width * .8)){

if(element.getHeight() > (screen.height * .8)){

  1. I then Previewed one of my Freeway web pages in the browser to confirm that indeed when I shrank the browser window width to less than 0.8, my popup graphic was getting resized. But rather than eliminate this code altogether, which would be a pain in the booty and cause problems with the iPad, I merely changed those two lines to the following:

if (width > (screen.width * .98)){

if(element.getHeight() > (screen.height * .98)){

  1. I then noticed that the Freeway Action icon vanishes in the Finder, so I used FileBuddy to examine the file. Sure enough, because I had saved the file in Text Wranger, it added File TYPE code. I deleted that out and left the CREATOR code intact, and the icon came back.

  2. I then removed the Action on my Freeway page, reapplied it, then tested in the browser. The end result is perfect for me!

The reason I consider the value of 0.98 better than 0.8 is because if someone browsing my site likes to keep their browser windows very narrow width-wise, they almost always will keep the window just a tad wider than the width of the page (otherwise you wouldn’t be able to see the entire page). But at Walter’s default setting of 0.8, the browser window would have to be quite a bit bigger than the width of the actual page you make in Freeway, and people who like to keep their browser windows narrow probably wouldn’t widen it that big. In other words, for those folks, my graphics would constantly be getting automatically sized smaller, which is not what I want.

So by changing 0.8 to 0.98 in those two places, I can view my page in the browser and decrease the browser window width to just very slightly larger than the page width, and my graphics still won’t get resized.

For those of you whose graphics are much narrower than the width of the Freeway page itself, this really isn’t an issue. But in my case, the graphics were just a tad wider than the page itself, so they were getting resized too often when I narrowed the browser window.

I hope all this makes sense. And again, I am not a coder. This is a change that most any of you can make to the action if you want. It’s not hard if you follow my advice above.


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

Its all Japanese to me!

But seriously James - well done for being persistent.

David


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

I’m glad you worked this out. I try when designing my Actions to find a middle ground where I think that a good chunk of my potential audience is well served. I think that it’s wonderful that Actions are open and can be tailored like this. I would hate it if all Actions had to be encoded, and nobody could learn from anybody else or make these sorts of adjustments to suit their unique needs.

Walter

On Nov 28, 2011, at 8:38 PM, JDW wrote:

After being frustrated with this for so many weeks, I put my thinking cap on today to see if I couldn’t single-handedly solve my own problem. I was able to. My solution is basically a hack of Walter’s Action but it works. Here’s what I did:


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

Walter, I’m back with another ScriptyLightbox2 problem. Well, it’s a “functionality limitation” rather than a bug.

I’ve been using ScriptyLightbox2 to display some graphics as “popups.” It’s far better than SpawnNewWindow because there is no “new window,” yet I can force content to “pop up” above the existing web page. My application is sort of like System 7 Balloon Help on steroids.

Anyway, the problem I’ve run up against is that I cannot add links within my popup. I’ve tried using the older, more feature-rich ScriptyLightbox action, but it is very slow to open content (I think, due to the slide-open special effect you use). Furthermore, the original ScriptyLightbox tries to put the filename of my graphic in the upper left corner, but does it so badly that the name is partially truncated. Also, there is no background shadow, and no rounded corners either. All said, I like your newer ScriptyLightbox2 much better, except for the fact it won’t allow me to use graphic or text links.

So can you improve ScriptyLightbox2 such that it will empower me to add links? (I think for that to work, you would have to allow the user to be able to choose an existing Freeway web page, instead of just selecting a file on your hard drive, as is the case right now.) In another words, it would be like SpawnNewWindow, just without any new “window” appearing. I would be page content that is merely hidden until you click it into view.

Thanks,

James Wages


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

I have several requests for this, and I will hopefully find some time during the holidays to attack this. It’s a little more complex than changing the picker to allow pages or URLs to be the target of the generated link – I also have to create and destroy an iframe at the desired size instead of loading an image or movie.

Walter

On Dec 9, 2011, at 1:50 AM, JDW wrote:

So can you improve ScriptyLightbox2 such that it will empower me to add links? (I think for that to work, you would have to allow the user to be able to choose an existing Freeway web page, instead of just selecting a file on your hard drive, as is the case right now.)


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

I have several requests for this, and I will hopefully find some time during the holidays to attack this. It’s a little more complex than changing the picker to allow pages or URLs to be the target of the generated link – I also have to create and destroy an iframe at the desired size instead of loading an image or movie.

I would point out the the iPad Friendly option in my SNW Action does this already.


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

Thanks for the desire to add such, Walter. I look forward to seeing your handiwork.

Paul, I cannot find “SNW” on ActionsForge. Furthermore, when I do a keyword search for “SNW” on actionsworld.com, a set of completely unrelated items appears in the search results. Therefore I must ask you some questions…

  1. Have you used Walter’s ScriptyLightbox2 action?

  2. If you have used it, are you familiar with the drop shadow, rounded corners, close box, etc. that it puts around content?

  3. Does your action offer those things too?

–James Wages


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

Spawn New Window Spawn New Window

Example http://www.deltadesign.co/fw_examples/linktonew.html

David


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

Thank you for the hand-holding, Dave. That is in fact almost EXACTLY what I have been seeking! I say “almost” only because I don’t see a way to round the corners, as is true of Walter’s action. (Yes, I am the reincarnate Steve Jobs when it comes to demanding rounded corners!!!)

I will give Paul’s action a full set of tests when I get into the office on Monday.

Best,

James Wages


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

You should be able to round the corners with a bit of CSS - but remember anything less than IE9 and it is unlikely to work.

D


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

I should point out that the corners are rounded with CSS3 in ScriptyLightbox2 as well.

Walter

On Dec 10, 2011, at 6:35 PM, DeltaDave wrote:

You should be able to round the corners with a bit of CSS - but remember anything less than IE9 and it is unlikely to work.

D


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


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

Paul already has the CSS3 box-shadow style built into his action but you could try adding this to the Before end Head section of Page>HTML Markup for the parent page.

<style type="text/css">
<!--
#iFrameHolder, #iFrame { -webkit-border-radius: 18px !important;
-moz-border-radius: 18px !important;
border-radius: 18px !important;
}
-->
</style>

I have added it to my example at http://www.deltadesign.co/fw_examples/linktonew.html

But I haven’t looked at it in IE9 - yet!

D


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

Dave and Paul (and Walter, if you wish to chime in),

I have some thoughts to share about the new SpawnNewWindow action that was recommended to me:
http://www.actionsworld.com/Actions/SpawnNewWindow/index.php

First of all, Dave, the CSS for Page Markup you kindly offered me works wonderfully to round the corners of the popup box. Thank you!

The only disadvantage to the rounded corners is that the close box is offset to the top-left a tad too much. With no controls for that in the Action itself, I had to resort to hacking Paul’s action. I found “var closeButtonOffset = 22;” and changed “22” to “11” and then previewed. That pulls in the close box enough for me, but it introduces a new problem. Now the close box is beneath the popup box! I would think that the close box should always be the topmost item/layer, so this result is rather baffling. In any case, how do I bring the close box “to the front”?

Next, I see that ticking the “iPad friendly” setting in the Actions palette achieves the effect I want; namely, that instead of a new “window” popping up, you get popup content over your exiting page. And the best part is, I can use links too. However, I notice that the background “fades to white” when the popup appears. In some cases that is nice, but is there no way to “fade to black” instead?

I look forward to hearing your thoughts.

Many thanks,

James Wages


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

is there no way to “fade to black” instead?

Yes - if you look in the actions resources folder you will see within the Support Files blanking-out.png - which is a transparent white png. If you change this to your own transparent black png you will get what you want (keep the file name the same).

You should probably keep 2 versions of the action - one unmodified.

As to the closebox being behind the window - you should be able to change the z-index of it to a high number (99) to ensure that it stays in front. Try

<style type="text/css">
<!--
#closebox { 
z-index: 99 !important;
}
-->
</style>

D


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

Hi, Have been reading post and can’t get background to fade using ScriptyLightbox2. works with ScriptyLightbox but wanted to use (use page/URL as Target) with ScriptyLightbox2

Can not find blanking-out.png file in action resource folder.

using contact tab to open mail form.
http://www.mattbrooke.co.uk/

Any help much appreciated Matt.


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

ScriptyLightbox 2 does not fade the background. It pops up a shadowed “window” effect over the current page and centers it.

Walter

On Jan 31, 2012, at 12:20 PM, Matt wrote:

Hi, Have been reading post and can’t get background to fade using ScriptyLightbox2. works with ScriptyLightbox but wanted to use (use page/URL as Target) with ScriptyLightbox2

Can not find blanking-out.png file in action resource folder.

using contact tab to open mail form.
http://www.mattbrooke.co.uk/

Any help much appreciated Matt.


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


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