Use display: flex as the 'opened' state instead of display: block with fancy-box 2

Question

I want to use display: flex as the 'opened' state instead of display: block with fancy-box 2.

Currently the element gets display: block; inline.

I'm trying to track down where to change it, but maybe I just need to nest a div in the pop-up. Has anyone done this before?

markup

<div class='thing-that-triggers'>

  <span>thing</span>

  <div class='pop-up'>
    <div class='text'>
      text
    </div>
    <div class='image'>
      image
    </div>
  </div>

</div>

<div class='thing-that-triggers'>...</div>

<div class='thing-that-triggers'>...</div>

styles

.pop-up
    display: flex // setup
    flex-direction: column
    display: none // hide it for fancybox
    .text
        width: 100%
    .image
        display: none // hide on small screen
    @media $break-point-2
        flex-direction: row
        align-items: center
        .block
            split-in(2)
        .text
            flex-center-child()
            .recipe
                // centered
        .image
            display: block // show second panel

jQuery

$('.thing-that-triggers').fancybox({...});

You could add display:flex!important to override the default property. — Isabel Inc, Jul 14 '16 at 18:05
Well most of the inline style comes from the fancy box js. So you could just do a search for display or block to see where it's setting the style attribute. — Isabel Inc, Jul 14 '16 at 18:07
That was my first approach, but there is actually no "block" in jquery.fancybox.js — sheriffderek, Jul 14 '16 at 18:27
@michael_B - does it really help to put "css3" ? With the way things are rolling out, it's all just CSS now - isn't it? If people use that tag, then great! I guess I just don't ever. Maybe I should! — sheriffderek, Jul 14 '16 at 18:30
Could you post some code or a fiddle. It's kinda hard to figure out whats happening. I did find a position:fixed element inside the code though. — Isabel Inc, Jul 14 '16 at 18:35
I figured HTML5 and CSS3 were just to trick clients into thinking that you are _bleeding edge_ in 2011, but I'll try tagging CSS3 specify stuff form now on. Thanks! — sheriffderek, Jul 14 '16 at 18:36
this question perfectly demonstrates why separating view from control logic is important, and why inline styling causes headaches. the developers of fancybox should have created a `fancybox.css` file and simply applied and removed CSS classes from that file based on events. — Woodrow Barlow, Jul 14 '16 at 20:19

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

You have 3 choices if fancybox doesn't give you any options to change it.

Change it directly in the source code (not the best approach).
Nest another div so that the added display doesn't affect yours (as you mentioned).

Override it yourself in the beforeShow callback. You'll need to use jQuery each to get a reference to the current .pop-up and a closure to keep the reference and use it later:

function handleDisplay($popup) {
    var closure = function() { $popup.css('display', 'flex'); };
    return closure;
}

$('.thing-that-triggers').each(function() {
    var displayHandler = handleDisplay($(this).children('.pop-up'));
    $(this).fancybox({
        beforeShow: displayHandler
    }
});

See the documentation for other available callbacks.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 14 '16 at 18:24

Simon

774
4
21

This is pretty close Simon. I like your hustle! The $('...') probably needs to be a 'this' kinda thing, otherwise - it shows all of the other pop-ups too. I'm surprised there isn't a setting. Maybe I'll have to implement one. – sheriffderek Jul 14 '16 at 18:57
Still getting all the pop-ups, but I branched out to save the state incase you come up with the magic solution. : ) – sheriffderek Jul 14 '16 at 19:21
@sheriffderek is `.pop-up` a unique class? Do you mean that the flex popup is always opening when you open the others? – Simon Jul 14 '16 at 19:25
There is a list of 'thumbnail' like things... and they each have their own 'pop-up', so - there could be 1, or 345. Depends on what the server returns. That's why your angle would need to only affect the one clicked / at a time. – Jul 14 '16 at 19:54
@sheriffderek found a way, check the edit see if it works now :) – Simon Jul 15 '16 at 00:50

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Just add an inner div and set the flex stuff on it - and leave the outer div for fancybox.

This IS an answer, but I'd much prefer not to change my markup + I think this question is going to get asked a lot in the near future. So, a JS solution is what'll I'll mark as the best answer.

markup

<div class='thing-that-triggers'>

  <span>thing</span>

  <div class='pop-up'>
    <div class='inner'>
      <div class='text'>
        text
      </div>
      <div class='image'>
        image
      </div>
    </div>
  </div>

</div>

styles

.pop-up
    display: none
    .inner
        display: flex // setup
        flex-direction: column
    .text
        width: 100%
    .image
        display: none // hide on small screen
    @media $break-point-2
        .inner
            flex-direction: row
            align-items: center
        .block
            split-in(2)
        .text
            flex-center-child()
            .recipe
                // centered
        .image
            display: block // show second panel

Use display: flex as the 'opened' state instead of display: block with fancy-box 2

markup

styles

jQuery

2 Answers2

markup

styles