Support/Comments for sekFancyBox 0.0 BETA

98 Posts

Halfnium Reply #21, 10 years, 9 months ago

Wow, this snippet is a great way to consolidate and self-document FancyBox calls! The default snippet properties are certainly usable, nearly perfect for my particular use case. Congratulations on a nice piece of work, insomnix.

Of course I wouldn't be writing if I didn't have a problem.

Background: Browser= Firefox 22.0. OS= Windows XP-Pro 64-bit.

I use the snippet in a fluid layout of unpredictable height, a height greater than the monitor's height. So a scroll bar appears on the right side of the page. An unpredictable number of sekFancyBox calls are positioned "beneath the fold" on this page. That is, once the user scrolls down to the links that the snippet calls generate, the page top banner is no longer visible.

Problem: When the pop-up appears, the parent page appears scrolled back to its top. The page top banner is visible, and the FancyBox links are not visible unless the user scrolls back down to them. This is confusing and irritating for the user.

Request: Please explain how I can conserve the parent page's scroll position through a sekFancyBox call, so that the user who has closed the pop-up finds the parent page scroll-positioned as he left it before he clicked the link.

My sekFancyBox calls look like this:

[[sekfancybox?
  &type= `document`
  &linktext= `Read More`
  &link= `[[~[[+id]]]]`
  &modalclass= `summarize_future_events_row`
  &loadjquery= `0`
  &modal= `false`
  &fitToView= `true`
  &autoCenter= `false`
  &topRatio= `0.5`
  &autoSize= `false`
  &autoResize= `true`
  &height= `auto`
  &autoHeight= `true`
  &width= `800`
  &autoWidth= `false`
  &minWidth= `400`
  &scrolling= `auto`
  &closeBtn= `true`
]]

I looked just like that in 1964.

160 Posts

insomnix Reply #22, 10 years, 9 months ago

Do you have the latest version released this week, v1.0.1? It has the most recent fancyBox build and runs off jquery 1.10.1. This build fixes some issues in ie10, and may also fix your problem if you haven't upgraded.

Unfortunately, I'm not an expert with fancyBox, I just found a need for an easy to call script and ported what I could. If updating the version doesn't fix your problem, you might take a look at the js generated by the snippet call and check out the fancyApps support site. They may have some insight that you can translate into the snippet call. Let me know if any of this helps or if you find a solution.

98 Posts

Halfnium Reply #23, 10 years, 8 months ago

Yes, according to Package Manager, I'm running v1.0.1.

Other things are happening that I don't understand. For one thing, though I have passed this property

  &loadjquery= `0`

it does not seem to matter whether or not I explicitly load jquery on the Web page. sekFancyBox works fine either way. How can that be?

I have not been able to change the overlay's 'opacity' in accord with the helper example in the sekFancyBox documentation. However, I have been able to change 'background-color.' Why should one work as expected but not the other?

I don't understand how to use &wrapCSS. (Could use an example in either the sekFancyBox or the fancyBox documentation.)

Nor have I succeeded in using &customcss. I don't find anything related to it in the fancyBox documentation, so I figure it is an extension added in the sekFancyBox implementation. Anyway, I located 'jquery.fancybox.css,' and made a copy in my own CSS directory. I figured that I would point &customcss to this copy, then tinker with the copy in order to custom-style the pop-up. So far I've had no success in getting sekFancyBox to pay attention to my copy of the CSS. I'd certainly benefit from a working example.

So much for my current understanding. Yes, it's time to dig into the fancyBox user forum and into the code itself.

sekFancyBox's default behavior luckily works well enough for my particular case that I can go public with it. [Warning: The site mentioned here involves politics, so don't look if you may be offended.] Visit www.gopgroton.com from time to time to see how I'm doing.

I looked just like that in 1964.

98 Posts

Halfnium Reply #24, 10 years, 8 months ago

I've learned more.

First, it seems that &loadjquery wants 'true' or 'false' rather than '1' or '0' as indicated in the documentation. Verify this by experiment, looking at the page source code as the browser sees it.

Second, I found that in my particular use case, I must call sekFancyBox uncached. If I call it cached, it works as desired upon the first visit to the page. Upon subsequent page visits, a click of the link created by sekFancyBox causes a new (non-pop-up) window to appear that displays the Resource according to its Template. (This is not a bad fall-back strategy.)

My use of this snippet happens to be inside a Tpl chunk used by a getResources call. If you (reader of this post) are encountering odd behavior as described, try calling sekFancyBox uncached (that is, with an exclamation point included in front of the snippet's name).

Third, I found that the Resources used by the sekFancyBox call must have these set:

Hide From Menus = Not Set
Published = Set

These settings appear as check boxes in the Resource's Document tab within the Revo Manager.

If you have been using non-Published Resources in your site (as I had been doing), you may find (as I did) that sekFancyBox provides the desired result as long as you are logged into the Manager, but returns a pop-up with the message "The requested content cannot be loaded. Please try again later." when you are not logged in.

Setting the relevant Resources to Published fixes the problem. If you have a lot of Resources, you may find Batcher useful. Find it among the MODX Extras.

I looked just like that in 1964.

160 Posts

insomnix Reply #25, 10 years, 8 months ago

Sorry for the delayed response, I've been distracted.

I've just finished making another update to the addon, v1.0.2. This will fix the loadjquery and helper boolean options to accept text or numerical values. So now true, false, 1, or 0 will work as expected.

&customcss is the relative path to your css file. The default css is:
"/assets/components/sekfancybox/source/jquery.fancybox.css?v=2.1.5"
If you want to move the css file to a custom css folder, then you could call something like:
"&customcss=`/assets/css/jquery.fancybox.css?v=2.1.5`"

I don't really know much about wrapCSS, it's a fancy box option that I pass from the snippet variable to the javascript, I've never used. It is one of several options that I've not fully tested as there are so many combinations of settings that I just don't have the time to research them all.

You are correct about the snippet call. For this addon to work, the snippet must be called uncached. This is not a problem that is exclusive to sekfancybox. I have found that any snippet that loads javascript or css in the head or foot of the page will only load the first time and subsequent visits the css and js will not be loaded. I don't know why this is.

You are also correct that, if your calling another page to display in the modal window, it must be published. Modx will not allow a page to render unless it is published. However, the hide from menus option does not affect sekfancybox's ability to render the page, so it can be set to true or false.

98 Posts

Halfnium Reply #26, 10 years, 8 months ago

First: Just FYI, not really a FancyBox issue: I tried (as of the date of this post) to update sekFancyBox to version 1.0.2 via the Revo Package Manager, but it reported I was up to date at version 1.0.1. However, browsing in the MODX Extras (http://modx.com/extras/package/sekfancybox) shows that version 1.0.2 is indeed available. Going back to Package Manager and browsing manually, I found version 1.0.2. I was able to download it, and Package Manager said that the installation was successful. However, I also saw these messages:

Attempting to preserve files at /home/xyzzy/public_html/assets/components/sekfancybox into archive /home/xyzzy/public_html/core/packages/sekfancybox-1.0.2-pl/modCategory/c7774c5474d86dc1436dad4ee2c8b276.0.preserved.zip
Attempting to preserve files at /home/xyzzy/public_html/core/components/sekfancybox into archive /home/xyzzy/public_html/core/packages/sekfancybox-1.0.2-pl/modCategory/c7774c5474d86dc1436dad4ee2c8b276.1.preserved.zip
Skipping vehicle object of class modSystemSetting (data object exists and cannot be upgraded); criteria: Array ( [key] => sekfancybox.load_jquery )
Skipping vehicle object of class modSystemSetting (data object exists and cannot be upgraded); criteria: Array ( [key] => sekfancybox.load_jquery_head )
Skipping vehicle object of class modSystemSetting (data object exists and cannot be upgraded); criteria: Array ( [key] => sekfancybox.custom_css )
Skipping vehicle object of class modSystemSetting (data object exists and cannot be upgraded); criteria: Array ( [key] => sekfancybox.custom_buttons_css )
Skipping vehicle object of class modSystemSetting (data object exists and cannot be upgraded); criteria: Array ( [key] => sekfancybox.custom_thumbs_css )

These seem OK, but why does the installer mention them?

Second: If I do not use "&customcss," I see the stylesheet reference in the page source as expected:

<link rel="stylesheet" href="/assets/components/sekfancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" />

However, suppose I try to point to the default stylesheet using this:

&customcss= `/assets/components/sekfancybox/source/jquery.fancybox.css?v=2.1.5`

In that case, the page source shows an empty stylesheet reference:

<link rel="stylesheet" href="" type="text/css" />

And of course the snippet's result is not as desired.

By the way, what is the purpose of passing the stylesheet's version in the URL?

I looked just like that in 1964.

160 Posts

insomnix Reply #27, 10 years, 8 months ago

I don't know how long it takes for an update to become available, but I've had to load several updates manually myself. As for the warnings that load when installing, I see this sort of thing on many addons, including red text showing that updates were not made to existing tables (probably because these updates had already been handled on a previous update).

Thanks for pointing the customcss problem. I thought I had fixed this but I guess I undid the fix somehow. I will release another update in the next few days to resolve this problem.

The version number in the url comes directly from the fancybox demos and documentation. I don't know that it actually has a purpose other than conveying the version when looking at the code. I opted to follow the demo examples and maintain the version parameters in the url.

98 Posts

Halfnium Reply #28, 10 years, 8 months ago

I posed a problem earlier in this thread:

Problem: When the pop-up appears, the parent page appears scrolled back to its top. The page top banner is visible, and the FancyBox links are not visible unless the user scrolls back down to them. This is confusing and irritating for the user.

I found some discussion. See:

http://stackoverflow.com/questions/13547007/fancybox2-fancy-box-causes-page-to-to-jump-to-the-top

and

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

The problem gets relatively large attention on StackOverflow, thus suggesting that users find it objectionable. May I suggest, @insomnix, that you either mention this problem and possible solutions in the sekFancyBox documentation or implement one of the solutions yourself? (If in your shoes, I would mention but not implement.)

I looked just like that in 1964.

160 Posts

insomnix Reply #29, 10 years, 8 months ago

I've not run into this problem myself and I'm not sure how to duplicate the problem so I can troubleshoot it. With that said, the addon that I have created is a port from fancybox and I'm not a strong js developer and I'm not comfortable changing the code that I download from their site. The current sekfancybox uses fancybox version 2.1.5, which is the latest release at this time. You might try to upgrade and see if this fixes your problem.

98 Posts

Halfnium Reply #30, 10 years, 8 months ago

Thanks, @insomnix. I don't mean to be a pest, just letting you know what I'm experiencing on MODX and what I've found on StackOverflow.

I'm seeing the problem at version 2.15.

There's a suggestion on the KISS site (http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/) that unsavory interaction may happen among CSS files in some use cases. If the fancybox developer remains intent on perfecting his creation, I expect that he already knows about the problem, and perhaps he'll deal with it in a future release.

I looked just like that in 1964.