jquery cycle automatically fit to window width on resize

Question

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>

score 3 · Accepted Answer · answered Jul 13 '12 at 09:58

3

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..)

answered Jul 13 '12 at 09:58

Cult Digital

411
1
8
20

In fact does any have any idea as to why this pager is playing up ? Prev should slide back and next should slide forwards but they are both going forwards ?? Possibly a silly syntax error or something I'd guess ?? ( Still amazed the resize seems to work, there seems to be alarge number of very complex solutions.. ) – Cult Digital Jul 13 '12 at 10:04
This does work, however I ran into a problem because one page that I was working on has no other content than what is generated by jQuery cycle. So the text under the images ended up into the footer. So I solved this by setting a min-height to the containing element. – JGallardo Jun 07 '13 at 18:33

score 2 · Answer 2 · answered Dec 05 '13 at 03:35

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.

score 2 · Answer 3 · answered May 20 '15 at 05:22

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>

score 0 · Answer 4 · edited May 23 '17 at 11:52

0

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

edited May 23 '17 at 11:52

Community

1
1

answered Jul 13 '12 at 09:28

ManMohan Vyas

3,746
3
25
37

Hi thanks, but what would I need to put within the onresize funtion to get this behaving properly ? – Cult Digital Jul 13 '12 at 09:39
you probably want to throttle that, (DIY with settimeout, etc. or using undescore's _.throttle for instance) – Geert-Jan Jul 13 '12 at 09:45

jquery cycle automatically fit to window width on resize

4 Answers4

Linked