Setting Size for iFrame?

[soupking]

I have two iFrames within one fancybox I'd like to set to different widths:

a data-fancybox="mens" data-options='{"width" : "160x600", "type" : "iframe"}' data-src="_showcase/mens/160x600/index.html" href="javascript:;">160x600</a

a data-fancybox="mens" data-options='{"width" : "300x250", "type" : "iframe"}' data-src="_showcase/mens/300x250/index.html" href="javascript:;">300x250</a

I don't understand how to get the data-options to these two. Do I have to set something below in JS to set up this retrieval? I'm not fully understanding how this API performs.

Any help would would be awesome, I feel like I'm pretty close I just don't quite get how to connect the dots.

[fancyapps]

Hi,

width and height properties are for images only; iframe sizing can be controlled either using CSS (there is a sample in docs - https://fancyapps.com/fancybox/3/docs/#iframe ) or JS using iframe/css option (see 2nd example here - https://codepen.io/fancyapps/pen/qoKGRW?editors=1000 )

[soupking]

Okay, I see. I can reference FancyBox using inline styling. Awesome, thanks so much for the response. Big help.

Best, -m

On Tue, Jun 12, 2018 at 3:32 AM, Jānis Skarnelis notifications@github.com wrote:

Hi,

width and height properties are for images only; iframe sizing can be controlled either using CSS (there is a sample in docs - https://fancyapps.com/fancybox/3/docs/#iframe ) or JS using iframe/css option (see 2nd example here - https://codepen.io/fancyapps/ pen/qoKGRW?editors=1000 )

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1968#issuecomment-396494298, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ8VPjgaR17yzeLRGtS7AvTrnQT0wfFNks5t726agaJpZM4UjkZ6 .

[fancyapps]

btw, this allows greater customization - you can set any CSS property like max-width/min-width

[soupking]

Hi Janis,

Thanks, yeah max-width/max-height makes sense being pretty standard in media queries and such (or what I understand of them).

I'm doing banners so I have full content rollovers. What I can't seem to figure out is a workaround as when you rollout of the content into the black semi-transparent portion the mouseout event doesn't work. So I'm having to create a buffer around the content so it recognizes the rollout. But I then need to make the white background portion around it transparent. If I could make the iFrame background transparent and just left:15px; top: 15px that would do the trick.

I'm not quite sure how to reach the DOM to make the iFrame portion housing the content transparent. Is that relatively easy to source or option?

No worries on responding if you're too busy. I appreciate all the help you've provided. FancyBox is pretty neat, I think my office i going to dig it.

Thanks again, -m

On Tue, Jun 12, 2018 at 12:31 PM, Jānis Skarnelis notifications@github.com wrote:

btw, this allows greater customization - you can set any CSS property like max-width/min-width

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1968#issuecomment-396652996, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ8VPl6Feam8d33YTQ9pFvdnflf1oty5ks5t7-zmgaJpZM4UjkZ6 .

[fancyapps]

Could you create mockup or smth like that? I did not understand your comment at all.

[soupking]

Sure thing, the red button rollout (to go back to white) won't work because there's no iframe to trigger it:

http://axiom-media.com/work/fancybox_demo/

So I can create extra iframe white bg around the unit using padding to trigger a mouseout, but aesthetically I don't want to see it white background space around my presented unit(s). So as a hack if I make the iframe background transparent to create a rollout it will look to flush to size as it should but have some area around the content to trigger the button rollout.

That might not be the only way to hack a rollout, but I hope that makes some sense.

Thanks a bunch! -m

On Wed, Jun 13, 2018 at 3:07 AM, Jānis Skarnelis notifications@github.com wrote:

Could you create mockup or smth like that? I did not understand your comment at all.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1968#issuecomment-396836491, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ8VPpI__r7PSbBh3GN7ZQETfUVJYAOCks5t8LofgaJpZM4UjkZ6 .

[fancyapps]

Sorry, I still have absolutely no idea what are you trying to describe (I do not know what do you mean by "rollout", why would you need to hack that and how is that related to fancybox), please, ask more specific questions.

If you want to change iframe background, then you can do that using CSS:

.fancybox-slide--iframe .fancybox-content {
    background: transparent;
}

If you want to adjust spacing around iframes, then this can be done using CSS, too (check .fancybox-slide--iframe and .fancybox-slide--iframe .fancybox-content rules)

[soupking]

Basically the rollout for this portfolio doesn't work because there's no iframe outside it:

http://axiom-media.com/work/fancybox_demo/

Like, the red button turns white upon rollover, but when you rollout it stays white and doesn't go back to red. So I need to fake some sort of iframe space around it then hide it (make transparent) so it looks normal.

Hope that makes sense.

Thanks Janis, -m

On Thu, Jun 14, 2018 at 1:38 AM, Jānis Skarnelis notifications@github.com wrote:

Sorry, I still have absolutely no idea what are you trying to describe (I do not know what do you mean by "rollout", why would you need to hack that and how is that related to fancybox), please, ask more specific questions.

If you want to change iframe background, then you can do that using CSS:

.fancybox-slide--iframe .fancybox-content { background: transparent; }

If you want to adjust spacing around iframes, then this can be done using CSS, too (check .fancybox-slide--iframe and .fancybox-slide--iframe .fancybox-content rules)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1968#issuecomment-397187605, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ8VPoDUA3kxjWnfOKAe94IMqe_CSSQHks5t8gTugaJpZM4UjkZ6 .

[fancyapps]

I'm sorry, but that does not explain what is "rollover"!?! Is that some kind of advertisers jargon?

"red button turns white upon rollover" <- upon what?

"when you rollout it stays white" - I do what? What stays white?

"so it looks normal" - what does not look normal for you?

Like I said, I have zero idea what are you trying to describe ¯_(ツ)_/¯

[soupking]

Yes, rollover/rollout is I guess you could say ad jargon commonly used for CTA (call-to-action - "Buy Now") button events.

No worries, man. I'll see what I can figure out. Thanks so much for your dedication to Fancybox and all of us who are using it. It's a really cool API.

If I figure out a workaround or something I'll send you an A/B comparison so you can see what I mean.

Thanks again! -m

On Thu, Jun 14, 2018 at 10:41 AM, Jānis Skarnelis notifications@github.com wrote:

I'm sorry, but that does not explain what is "rollover"!?! Is that some kind of advertisers jargon?

"red button turns white upon rollover" <- upon what?

"when you rollout it stays white" - I do what? What stays white?

"so it looks normal" - what does not look normal for you?

Like I said, I have zero idea what are you trying to describe ¯(ツ)/¯

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1968#issuecomment-397341245, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ8VPpurLUBR6Voo50xt_yn32cdnaGvOks5t8oQNgaJpZM4UjkZ6 .