Fancybox full width

joemimmo picture joemimmo · Jan 21, 2015 · Viewed 21.1k times · Source

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,
        });
    });
});

Answer

Dimas Pante picture Dimas Pante · Jan 21, 2015

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
        });
    });
});