jentanbernardus
12/4/2012 - 4:51 AM

@malsup's jQuery Cycle in a Responsive Layout

@malsup's jQuery Cycle in a Responsive Layout

responsive_jquery_cycle.html
content_copyfile_download
<!doctype html>
<html lang="en">

  <head>
  
    <meta charset="utf-8"/>
    
    <title>Responsive Cycle</title>
    
    <style>
    #cycle
    {
      background: #eee;
      margin: 0 auto;
      max-width: 800px;
      width: 100%;
      padding: 1em;
    }
    
    #cycle,
    #cycle div
    {
      height: 250px;
    }
    
    #cycle img
    {
      width: 100%;
    }
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle.lite.js"></script>
    
    <script>
    $(document).ready(function(){
      // Cycle.
      $('#cycle').cycle({ fx: 'fade', timeout: 400, slideResize: true });

      // Once we pass a certain viewport width, re-set the height of the slideshow on viewport resize.      
      $(window).bind('load', build_gallery).bind('resize', build_gallery);
      
      function build_gallery() {
        if ($(window).width() < 800)
        {
          $('#cycle').height($('#cycle div img').first().height());
          $('#cycle div').height($('#cycle div img').first().height());
        }
      };
    });
    </script>
    
  </head>

  <body>

    <div id="cycle">
      <div>
        <img src="http://placekitten.com/950/250">
      </div>
      <div>
        <img src="http://placekitten.com/900/250">
      </div>
      <div>
        <img src="http://placekitten.com/925/250">
      </div>
    </div>
    
    <p>Curabitur imperdiet interdum lacus sit amet fringilla. Aliquam ullamcorper porta tempus.</p>
        
  </body>

</html>