ScriptyLightbox3

Phil Moreton 18 Feb 2013, 19:37

Is there anyway to be able to make the border size smaller? Or to not have any border at all?

Great action aside from that.

Phil Moreton 18 Feb 2013, 22:01

When I mean smaller, I actually mean thinner. :-)

Walter Davis 18 Feb 2013, 22:10

Create a CSS style in your page like this:

.overlay { padding: 4px; }

You can add this in a style block in the head of your page, or create the style using the Tag-only styles technique.

Walter Davis 18 Feb 2013, 22:11

Obviously, that could be any amount of padding you like. Note that at certain small dimensions, the video or photo will likely "poke" out of the rounded corners, and so you will need to reduce the radius of the corners (in the Actions palette) to match.

Phil Moreton 20 Feb 2013, 16:31

Hi Walter,

Unfortunately that has gone way over my head. Do I need to go into the source code of the webpage that I want "ScriptyLightbox3" to open?

If so, what if the webpage I want the action to open is not owned by me?

Walter Davis 20 Feb 2013, 16:49

No, it goes on the page where you are using the ScriptyLightbox3 Action. Open the Styles palette, click on the gear icon and choose New Style. In the dialog that opens, enter .overlay in the Tag field, tab into the Name field and delete whatever is there, then tab out again to force it to stay blank. Finally, click on the Extended button, then New, then enter padding in the Name field and your desired border width in the Value field (be sure to include the px unit, like 4px in that value). Okay out of the stack of dialogs. You will not need to add this style to anything. The fact that it only has a Title and no Name means that it will be written into the page without any further effort on your part.

Phil Moreton 20 Feb 2013, 19:16

Hi Walter,

Again many thanks for your detailed response. I sadly could not get this to work.

• I selected the page that has the "ScriptyLightbox3" actions on it.
• I then went to "windows"–>"styles and colours".
• The Styles window pops up and I then clicked on the "Ay" icon and clicked on the gear icon and then "New Style.."
• In the tag box I entered ".overlay", tab into the name field, deleted what was there and tabbed again and that name field was forced blank.
• Finally clicked on Extended button, new and entered "padding" in the name field.
• In the value field i entered 2px.

• I then okayed everything and didn't add the style to anything at all.

• I noticed that all my pages and a new update spot next to all the page names. I clicked preview in browser and no change.

Here is the link to the page that has the scriptylightbox3 action on: http://www.philmoreton.09productions.com/philmoreton-fict.html

I only have 2 working on the page at the moment. Click on the "Room Service" photo to see the example. This example shows the blue border that I wish to make a lot smaller.

Best,

Phil

Walter Davis 20 Feb 2013, 19:46

The style isn't being published into this page yet. Did you upload after you made the style change?

Phil Moreton 20 Feb 2013, 21:58

No I did not upload after previewing on browser as it was not working. I'll upload it now for you to see.

Phil Moreton 20 Feb 2013, 22:07

It is now uploaded.

Walter Davis 20 Feb 2013, 22:26

Hmm. That's odd. Try going back into that style (right-click on it and choose Edit Style). In the Value field, add a space and !important at the end, so it looks like this:

2px !important

It shouldn't work like this – an external stylesheet is supposed to be overridden by any in the head of the page.

Phil Moreton 21 Feb 2013, 11:42

Thanks Walter! "2px !important" Worked a charm!

Emanuel Stone 18 Sep 2013, 03:06

Please, I need help. I installed the plugin and applied it to a graphic box and pasted in the URL to a video i have on Youtube. When I check it out with a browser the video never plays. The window appears but it hangs in search mode looking for the video. I've tried using web URL's for websites and it works fine but with Youtube it's a no go. Please help. Thanks. [email protected]

Walter Davis 18 Sep 2013, 03:11

You may need to use a special URL, one that expects to be framed in. The server may be sending a special header that means "Don't Frame Me!", and your browser may be respecting that. On YouTube, look for the "Embed" control. Find the option that includes the word iframe in its description. The code they give you will be a complete iframe tag with a src attribute, looking something like this: <iframe src="some/url/here" width="123" height="456"></iframe>. Copy the whole thing, and then paste it into a text editor so you can select and copy only the part inside the quotes after src. Just that URL. None of the other code. Then just paste that into the Action as the URL.

Walter

Cory Fairchild 2 Oct 2013, 15:43

Is it possible (or am I doing something wrong) to create a page in freeway to use as the source and have that as the popup url?

I have a "Choose Your Package" graphic, and I'd like a 500x500 page I created in the same site folder to be the overlay. Right now the script goes to the page instead of loading it in a lightbox as with doing an image.

Walter Davis 2 Oct 2013, 15:52

Did you check "use page/URL as target" in the Actions palette? I just tried that here and it absolutely works.

Cory Fairchild 2 Oct 2013, 16:58

Found it, I'd used the Lightbox2 action further down the page because it allows a caption with the image and that caused a conflict. Removing it resolves this, though it leaves me without captions.

Is there a better way to add captions with ScriptyLightbox3 other than making another custom page with just the image and desired caption?

Walter Davis 2 Oct 2013, 17:02

I'm not sure what you mean by a caption. The only place where a text value may be entered in SL2 is in the text link form of the Action.

Cory Fairchild 2 Oct 2013, 17:06

Different action called "Lightbox2" that has the caption option.

http://gymnasticbodies.com/media/lightbox2.png is what it produces.

Walter Davis 2 Oct 2013, 17:15

I didn't write that one at all.

Cory Fairchild 2 Oct 2013, 17:16

My apologies for being unclear, I was simply asking if there was a way with SL3 to do something similar.

Walter Davis 2 Oct 2013, 17:36

Only by building a page that includes the caption, and linking to that.

Cory Fairchild 2 Oct 2013, 21:42

That worked very well still.

Is it possible in the generated code to control the lightbox placement? It renders perfectly in everything except mobile Safari, where lightboxes render halfway down the total page height and thus out of view of the user.

Walter Davis 2 Oct 2013, 21:47

What version of iOS are you using there?

Walter Davis 2 Oct 2013, 21:48

Also, have you set the mobile size settings in Freeway's Page Inspector? It should be set to width: auto and height:none.

Cory Fairchild 2 Oct 2013, 22:02

iOS 7. Turning the height setting to none worked when in conjunction with turning off page scaling. Thanks for all the help, we've managed a great new site completely built in Freeway.

Neil Rolnick 10 Dec 2013, 02:59

I've just downloaded and installed latest version.
My problem is that my scriptylighbox3 pages don't seem to work in Firefox, though they work great in Chrome and Safari. Is there some setting I've got wrong? Here's a link to a couple (click on mp3 links) http://www.neilrolnick.com/CDs/gardeningcd.html

Walter Davis 10 Dec 2013, 03:14

MP3 files cannot be played back in Firefox directly. You need to wrap them in a player that can translate the format. The alternative is to use WAV files, which will work in all platforms, or Ogg files, which only work in Firefox.

Neil Rolnick 10 Dec 2013, 03:25

Thanks. I've got a lot of mp3 files, so making the WAV would take a lot of room. How would I wrap them in a player that can translate the format? Is there something which would work with my ScriptyLightbox3 files? If not, then I'll have a lot of re-programming to do ….

Walter Davis 10 Dec 2013, 03:35

Ogg has similar compression characteristics with MP3. The way that you deal with this multi-format business is to put both formats inside the same Audio tag wrapper. Freeway makes that easy, just select the MP3 and look in the Output tab (third from left) for the Source 2 and 3 pickers. You can add Ogg there, and it should just work on both browsers.

Neil Rolnick 10 Dec 2013, 03:53

OK. I converted one of the mp3 files to .ogg, and selected that file "02 Anosmia.ogg" in Source 2. But I still don't see the player in the pop up window in Firefox. Any more hints? If I can make this work, I'll be in business…

Walter Davis 10 Dec 2013, 03:56

Plays fine (and sounds cool) in Firefox here. (Bottom of the two, which has the Ogg.)

Neil Rolnick 10 Dec 2013, 04:08

OK. I must be close. You can hear it … but it also seems like you've got two choices. When I pull it up in Firefox from http://www.neilrolnick.com/CDs/gardeningcd.html then I still get the lightbox without the control bar. However, when I just go to the pop-up window page in Freeway and go to File>PreviewInBrowser>Firefox it does work (which it didn't before). So … what's going on? Any more ideas?

Neil Rolnick 10 Dec 2013, 04:09

Oh. Just realized that "bottom of the two" means the mp3 links. So that does make sense. But I can't seem to bring that up in my Firefox.

Walter Davis 10 Dec 2013, 04:11

Cache issue, most likely. Firefox/Preferences, Advanced tab, Network segment, Cached Web Content, Clear.

Neil Rolnick 10 Dec 2013, 04:13

That's it!! Thanks. It'll take me a while to get everything ogg'd, but this is clearly do-able. Thanks again!

Roman Zvarych 27 Dec 2013, 12:23

Hello Walter! I recently downloaded the Lightbox3 action and employed it on one of the sites that I am now building in FreewayPro (v.6). When I click on the target I get a pop-up window, where the "revolving circle" won't go away, signifying that the browser is still downloading something. But there's nothing more to download. What am I doing wrong? Here's the site: www.ksystems.com.ua. If you click on the logo in the top left-hand corner and you will see what I mean.

Walter Davis 27 Dec 2013, 15:46

Ah, you need to add a solid background to the item you are bringing into the lightbox. That will cover the spinner and make it disappear.

Roman Zvarych 27 Dec 2013, 17:06

OK, I'll try it…

Roman Zvarych 27 Dec 2013, 17:12

Walter! Thanks! Works like a charm!

Christopher Dehmer 27 Dec 2013, 20:27

I am admittedly a newbie to actions but I can't seem to get this to work without text. i've tried to apply the action to the graphic box but the text is always there, if I delete the text, there is no link. Can you lead a new guy away from his frustration?

Walter Davis 27 Dec 2013, 20:38

It's not clear from your description what elements you are trying to show and hide, and what elements you are using as your header. You have to have an alternating selection of types of elements, typically a header like an h3 followed by a paragraph and then another pair of header and paragraph for the next header/disclosure pair.

If you want to use images as the headers, then you have to use something OTHER than an image as the disclosed element. So you could have [image][return]Paragraph of text here that's initially hidden. If you had that, then clicking the image would make the text appear.

If you wanted the images to appear when the header was clicked, then you would use some sort of non-image element as the header, so maybe [h3 header][return][image][return][h3 header][return][image] … etc.

The most important thing here is the construction. Once you get the alternating header/content layer cake built, the rest is automatic.

Christopher Dehmer 27 Dec 2013, 20:43

Ah, sorry. What I was hoping to do is have a thumbnail of a photo that when clicked gives a bigger version. I would like to apply this to all my photos on the website www.darkhorsewoodworks.com

Walter Davis 27 Dec 2013, 20:45

Then you want to try a different Action, perhaps the build-in Target Show/Hide Layer Action, or my Scripty Lightbox 3 Action. The latter of these will be well suited to making a click enlarge a photo, because you apply it to the small image, then configure the Action to upload and display the large image. You won't have to litter your page with a separate "large" layer for each image that you want to display enlarged.

Christopher Dehmer 27 Dec 2013, 20:47

Now I am even more confused, I am using scriptlightbox3

Walter Davis 27 Dec 2013, 20:51

Sorry, this has been a banner day for support requests, and I thought you were the person having difficulties with ScriptyAccordion. Many apologies.

Try these steps:

1. Draw a small box on the page, import your "small" image.
2. Apply the SL3 Action to that box.
3. In the Actions palette, click on the Original File picker, and pull it down to Select… Locate the "large" image in that dialog box, and press Okay. Leave all of the rest of the Actions palette at the default settings.
4. Preview in a browser.

See how that works. That's the basics of how this is supposed to work.

Christopher Dehmer 27 Dec 2013, 21:06

Sorry to have bothered you with this. I was not applying the action correctly. I was using insert>action instead of item>action - All is well now. Again sorry to have bothered you

Walter Davis 27 Dec 2013, 21:18

Ah yes, you found the Text form of the Action, which is meant for use inline within a run of text (maybe to show a picture of a thing that's being discussed in prose).

Kristin Meuser 12 Jan 2014, 00:48

Hello, I've just created a thumbnail on a page and applied the ScriptyLightbox 3 action to it. I'm using a .mov video (I've tried an .mp4 also, and the same thing happens that I'll describe). No matter what measurements I give or what size I make the video, the player always is offset in the same way. I cannot get the player to fit inside the lightbox window. Here is the url: http://www.arielmarx.com/test/test.html Thank you!

Walter Davis 12 Jan 2014, 03:30

Wow, that is deeply beautiful. I don't see where the dimensions have been added to the movie. One thing you could try is to rename the movie file to not have any spaces in it. I don't think that's specifically your problem here, but it is something you should do anyway. Then, in the dimensions fields in the Action, enter just the numbers: 897 wide, 595 tall.

Walter

Kristin Meuser 12 Jan 2014, 05:53

Thanks. My daughter's score. OK, I changed the movie and removed the spaces. The size is now 640x480 and I input those dimensions in the height and width, but the same thing is happening. No matter what numbers I put in I get the same offset.

Kristin Meuser 12 Jan 2014, 06:18

So I got a tip from a guy in Glasgow Scotland. Apparently there is a problem with with some webkit box settings. He said to add this html markup:

<style type="text/css"> #_player.overlay { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } </style>

Walter Davis 12 Jan 2014, 15:06

Did you add that style to the page? If so, it's working fine now. The movie is properly centered in the player box. Can you try changing the pixel dimensions of the player (in the Action) to precisely the dimensions of the video itself? That's what you're supposed to do. Then the Action can figure out what size to make the box when it scales it to fit the screen.

Kristin Meuser 22 Jan 2014, 23:47

Oops, sorry I didn't check back in. Yes, I added that script. Yes, I had originally followed your directions to make the dimensions the same for the player as for the video, and it didn't change the weird offset thing. The script above is the only thing that altered it.

Kristin Meuser 2 Feb 2014, 18:46

Safari won't open the movie file. All other browsers are fine. Is there a fix for this?

mark zborowski 30 Mar 2014, 19:23

Good afternoon — I am using this great action and having one issue… I set the link colors to my standard and get the correct response on FP preview and all browsers except for Safari… It comes up a purple color that I do not think I have set anywhere… Any prior dialog on this subject… I do not have an active site to show an example unfortunately… Thanks

James Wages 30 Jul 2014, 06:16

There are no Release Notes or new remarks in the description to tell us the difference between version 0.3.1 and 0.2.9. Such is true for most other actions as well. But since "newer is not always better," it would be nice to know what has changed when Actions are updated.

Furthermore…

Since modern browsers seem to play raw MP3 files well (without me needing to add a separate player), I am thinking about using SLB3 to link to an MP3 on my server and display that as a small overlay on my web pages. I've tested it in Mac browsers, and it works fine except that in FireFox I see the silly spinning spiked wheel placeholder. Can a new checkbox be added to the Actions palette such that I can disable that spiked wheel?

Donna Whitlow 22 Aug 2014, 15:44

Thank you, Walter… works great… love it…

Jay Brooks 20 Nov 2014, 13:50

Recently, I've started having scroll bars show up on the popup window. It doesn't seem to matter what is in the window (video, text, nothing), there is always a scroll bar. I've tried making the window longer, although the content is not longer, but there are still vertical scroll bars. I added the code described above and it removed the horizontal scroll bars, but the vertical one is still there. Is there some code I can add to the page to keep a scroll bar from appearing? Thanks!

You can see what I am referring to here: http://lacksenterprises.com/wheels.html Click on the video icon to see the ScriptyLightbox3 popup window

Walter Davis 20 Nov 2014, 14:32

Does this happen in all browsers, or only some? Also, have you done anything CSS relates to this page, like set a line-height or leading property on the body tag?

Jay Brooks 20 Nov 2014, 17:10

As far as I can tell it is all browsers. This has happened to several of my websites, so I don't think any settings have changed. There isn't any text on the pages I am dealing with — just video. I can make the page height as tall as I want and the bar is still there. It barely scrolls, so it's not like anything is really there, but the scroll bar is always present. I've even tried creating an empty page referenced in the popup window and the scroll bar is still there.

Laura Hardy 7 Jan 2015, 17:23

I am using SL3 for a photo gallery - images only, no video. I must being doing something wrong because it opens in a new page, instead of opening up over the same page in that groovy little window. "Use Page/URL as Target" is not checked. I have used this successfully for video, but cannot get to work with the photos. What could I be doing wrong?

Walter Davis 7 Jan 2015, 17:35

From the error you describe, it sounds like a JavaScript error. Have you added jQuery to this page, by any chance? If so, you should try it without. ScriptyLightbox uses Prototype.js, which has a fundamental conflict with jQuery. It is possible (with some extra plumbing) to use them together, but it's not advisable.

Laura Hardy 7 Jan 2015, 17:46

No jQuery. Only page action is .favicon. In Resources I see prototype1700packer.js and scriptaculous190packer.js but not prototype.js Thanks - still trying…

Laura Hardy 7 Jan 2015, 18:36

Apparently there was something else going on with that page. I started over new with a new page and tested it out and it worked great. I appreciate the help and sorry for the bother - I love the action and glad I sorted it out.

Taro Yamamoto 24 Apr 2015, 02:49

Is there any way to control the amount of shadow from the movie window, its apparently too heavy for modern looks? Thanks.

Michael Honsa 10 Jul 2015, 13:30

Hello Walter,

is there any way to get a responsive lightbox with SL3? I´m working on FW 7.1 with Backdraft.

Cheers from Germany, Michael

Brian Whiteley 5 Dec 2015, 16:21

I am also working with FW 7.1 but cannot get it to work on a responsive site. Any body tried this yet and had success ?

Brian UK