Geek Answers Handbook

Jquery loop automatically matches window width when resized

If I resized the window and then updated the slider and the images inside resized to fit the width of the browser, however, I need this to happen automatically when the window is resized ... how can this be done?

http://subzerostudio.com/Clients/perkinreveller/test.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ timeout: 400, fx: 'scrollHorz', next: '#next', prev: '#prev', }); }); </script> </head> <body> <style> body { margin:0; padding:0; height:100%; width:100%; position:absolute; } #slideshow-wrapper { width:100%; min-width:600px; } .slideshow { width:100%; } .slideshow div, .slideshow div img { width:100% !important; min-width:100%; height:auto; } </style> <div class="slideshow"> <div> <img src="images/img1.jpg" alt="" /> </div> <div> <img src="images/img1.jpg" alt="" /> </div> <div> <img src="images/img1.jpg" alt="" /> </div> </div> </body> </html>
+4
source share
4 answers

Here is how I managed to do this.

 $(document).ready(function() { $('#slideshow').cycle({ slideResize: true, containerResize: true, width: '100%', height: '100%', fit: 1, fx: 'fade', next: '#next', prev: '#prev', }); });

Hope this helps anyone who wants to solve this problem (I haven't tested it completely yet, and when I inserted the pager button it seems to play up, similarly when using fx like scrollHorz it seems to ruin it ..)

+3
source

Actually (as indicated in the docs ), you only need to specify the fit option:

 $('.slideshow').cycle({ fit: 1 });

Please note that you may have to use the width and height options, but this is not necessary for me.
They only work when fit: 1 installed , and specify the width and height that must be set for the slide show.

+2
source

You can add this code to your javascript

 $(window).resize(function() { var slideDiv = $('.slideshow'); /* ratio = (width / height) is the aspect ratio of the image. You can change this according to dimensions of the image you are using */ var ratio = (640/426); // width and height of your image var w = slideDiv.parent().width(); var h = w / ratio; slideDiv.width(w); slideDiv.height(h); slideDiv.children().each(function() { $(this).width(w); // "this" is the img element inside your slideshow $(this).height(h); // "this" is the img element inside your slideshow }); });

I did this JSFiddle https://jsfiddle.net/0x24u41f/25/ so that you can test the above solution.

There is no need to wrap images with a 'div' tag.

Your html code might look like this:

 <div class="slideshow"> <img src="images/img1.jpg" alt="" /> <img src="images/img2.jpg" alt="" /> <img src="images/img3.jpg" alt="" /> </div>
+2
source

a similar publication can be found here JavaScript window resize event

 window.onresize = function(event) { $('.slideshow').cycle({ timeout: 400, fx: 'scrollHorz', next: '#next', prev: '#prev', }); }

check if this helps

0
source

More articles:


All Articles