Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancybox full width

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,
        });
    });
});
like image 355
joemimmo Avatar asked Jan 21 '15 19:01

joemimmo


2 Answers

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
        });
    });
});
like image 157
Dimas Pante Avatar answered Oct 01 '22 16:10

Dimas Pante


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>
like image 43
Derek Avatar answered Oct 01 '22 16:10

Derek