Fancybox full width

Question

I'm new to coding and I'm trying to have every fancybox ONLY in my homepage full width and responsive (eg) but non of these options have done the job (fitToView, autoSize or aspectRatio).

jQuery

jQuery(document).ready(function() {
jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
$(".fancybox").fancybox({
    helpers : {
        media: true 
        },
        width: 1600,
        height: 870,
        aspectRatio: true,
        scrolling: no,
        });
    });
});

Thielen

Have you checked fancyapps.com/fancybox/#useful No. 13? – Surprising

@Surprising Yes, I've looked also into the guide looking for a solution. Also #13 still not workin=( – Thielen

@Surprising Digging in stackover I found this (#28080291). Tried to add this code into function.php and took off css/jquery fancybox but still no changes. – Thielen

@Surprising What if I want the fancybox open in full screen? fitToView isn't working.. – Thielen

Answer 1

Try adding an autoSize false, removing the aspectRatio and changing the width to "100%":

jQuery(document).ready(function() {
    jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
    $(".fancybox").fancybox({
        helpers : {
            media: true 
        },
        width: "100%",
        height: 870,
        autoSize: false,
        scrolling: false
        });
    });
});

Yeoman

Digging in stackover I found this (#28080291). Tried to add this code into function.php and took off css/jquery fancybox but still no changes. – Thielen

Strange. Let's start from the beggining, you need to use fancybox only? – Yeoman

Actually nope, I want for each slide the video to pop up full width & responsive (or something like 1300x731), like in the [eg]. (anonymouscontent.com). Since I didn't install fancybox plugin, the fancybox must be inside this theme, that's why I used it. I'm open to any option if there's another way to achieve the eg. – Thielen

Hmm got it. And what if you try to change your css, in .fancybox-wrap, .fancybox-wrap .fancybox-skin{width: 100% !important; height: 100% !important; margin: 0px; text-align: center}? – Yeoman

Matter of the fact this was My first solution but as you can see now the skin is way too big (my lap is 1680 x 1050) and the video is small. Then I've tried to add also .fancybox-wrap, .fancybox-inner{width: 100% !important; height: 100% !important; margin: 0px; text-align: center} and the video is like the wrap, kinda outta space=) – Thielen

And if you set the fitToView to true? – Yeoman

Comments are not for extended discussion; this conversation has been moved to chat. – Demetra

Nothing changed. I've also tried to apply that code only on home page, in order to avoid bugs on director's page .home .fancybox-wrap, .fancybox-wrap .fancybox-skin {width: 100% !important; height: 100% !important; margin: 0px; text-align: center;} – Thielen

@bluefeet Thank you bluefeet, I was not able to do it due to my low rep points=) – Thielen

@Thielen You should be able to now because I moved your conversation. – Demetra

So, have you come to a solution? I have the same problem. Fancybox on my web site only uses about 70% of the screen width... I use viewport definition which allows zooming. – Watering

Answer 2

For anyone else looking in future searches I had the same problem where I needed the image (pop up) to be full width, even if the image has overflow height so I wanted it to be scrollable. Anyways I hope this helps someone in the future.

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".fancybox").fancybox({
        autoSize : true,
        scrolling : 'auto',
        fitToView : false,
        width : 'auto',
        maxWidth : '100%',
    });
});
</script>

Aimo

As Rev slider had a huge update I have no chance to test it, anyone else succeeded? wdirectors.com – Thielen

Answer 3

In my side nothing solution worked. so i posted my solution that working my side. this code should be place on that page where your pop blade code written.

.fancybox-content {
        width: 100% !important;
    }

Soccer