All geek questions in one place

Fancybox Full Width

I am new to coding, and I try to make every fancybox ONLY on my home page full width and responsive ( for example, ), but not these parameters completed the task (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, }); }); });
+6
source share
2 answers

Try adding autoSize false by removing 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 }); }); });
+6
source

For everyone looking in future searches, I had the same problem when I needed an image (popup) for full width, even if the image has an overflow height, so I wanted it to be scrollable. In any case, 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>
+1
source

Source: https://habr.com/ru/post/981365/

More articles:


All Articles