ScriptyLightbox3.fwaction (2019-02-02) (Downloaded 121 times)
Contains:
Compatible: Pro 6 and Pro 7
ScriptyLightbox3.fwaction (2014-07-18) (Downloaded 722 times)
Contains:
Compatible: Pro 5.5 and Pro 6
ScriptyLightbox3.fwaction (2013-02-15) (Downloaded 99 times)
Contains:
Compatible: Pro 4, Pro 5, Pro 5.5, and Pro 6
ScriptyLightbox3.fwaction (2013-02-06) (Downloaded 4 times)
Contains:
Compatible: Pro 4, Pro 5, Pro 5.5, and Pro 6
ScriptyLightbox3.fwaction (2013-01-23) (Downloaded 1 time)
Contains:
Compatible: Pro 4, Pro 5, Pro 5.5, and Pro 6
ScriptyLightbox3.fwaction (2013-01-23) (Downloaded 3 times)
Contains:
Compatible: Pro 4, Pro 5, and Pro 5.5
ScriptyLightbox3.fwaction (2013-01-22) (Downloaded 4 times)
Contains:
Compatible: Pro 5 and Pro 5.5
Author: Walter Davis
developer javascript css effects prototype scriptaculous
New version 0.4.0: Removes Flash; Uses Video tag for MPEG video
The third generation of the ScriptyLightbox series. This Action is similar in application and design to ScriptyLightbox2. Under the hood, it is all new, using the CDN-hosted scripts and resources to make your pages lighter weight and faster to load.
Includes a graphic box (thumbnail) version and an inline (text link) version. Both operate the same way:
Select a graphic box containing a thumbnail image and apply the Action, or place your text cursor where you want the link to appear and insert an instance of the Action.
In the interface, choose the file or page or URL you want to appear in the popup window. Set the dimensions and other options.
The video player is designed for iOS-compatible formats like m4v and mp4, or you may link to a still photo in any Web-friendly format.
Phil Moreton
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
When I mean smaller, I actually mean thinner. :-)
Walter Davis
Create a CSS style in your page like this:
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
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
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
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 thepx
unit, like4px
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
Hi Walter,
Again many thanks for your detailed response. I sadly could not get this to work.
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
The style isn't being published into this page yet. Did you upload after you made the style change?
Phil Moreton
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
It is now uploaded.
Walter Davis
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:
It shouldn't work like this – an external stylesheet is supposed to be overridden by any in the head of the page.
Phil Moreton
Thanks Walter! "2px !important" Worked a charm!
Emanuel Stone
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
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
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
Did you check "use page/URL as target" in the Actions palette? I just tried that here and it absolutely works.
Cory Fairchild
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
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
Different action called "Lightbox2" that has the caption option.
http://gymnasticbodies.com/media/lightbox2.png is what it produces.
Walter Davis
I didn't write that one at all.
Cory Fairchild
My apologies for being unclear, I was simply asking if there was a way with SL3 to do something similar.
Walter Davis
Only by building a page that includes the caption, and linking to that.
Cory Fairchild
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
What version of iOS are you using there?
Walter Davis
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
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
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
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
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
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
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
Plays fine (and sounds cool) in Firefox here. (Bottom of the two, which has the Ogg.)
Neil Rolnick
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
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
Cache issue, most likely. Firefox/Preferences, Advanced tab, Network segment, Cached Web Content, Clear.
Neil Rolnick
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
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
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
OK, I'll try it…
Roman Zvarych
Walter! Thanks! Works like a charm!
Christopher Dehmer
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
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
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
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
Now I am even more confused, I am using scriptlightbox3
Walter Davis
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:
See how that works. That's the basics of how this is supposed to work.
Christopher Dehmer
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
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
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
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
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
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
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
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
Safari won't open the movie file. All other browsers are fine. Is there a fix for this?
mark zborowski
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
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
Thank you, Walter… works great… love it…
Jay Brooks
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
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
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
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
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
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
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
Is there any way to control the amount of shadow from the movie window, its apparently too heavy for modern looks? Thanks.
Michael Honsa
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
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
Sign In or to comment.