jquery cycle automatically fit to window width on resize

If I resize the window and then refresh the slider and the images within will resize to match the browser width, however I need this to happen automatically on window resize.... 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>

This is how I managed to do it....

$(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 looking to solve this issue (I haven't fully tested it yet, and when I put in the pager button it seems to play up, similarly when using an fx such as scrollHorz it seems to mess it up..)

Actually (as stated in docs), the only thing you have to do is to specify fit option:

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

Note that you may need to use width and height options as well - for me that wasn't necessary.
They work only when fit: 1 is set and specify width and height that slideshow should be set to have.

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 have done this JSFiddle https://jsfiddle.net/0x24u41f/25/ so you can test the above solution.

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

Your html code can be like this:

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

ManMohan Vyas

similar post can be found here JavaScript window resize event

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

   });

}

check if that helps

来源：https://stackoverflow.com/questions/11467656/jquery-cycle-automatically-fit-to-window-width-on-resize

标签

jquery

cycle