jentanbernardus/responsive_jquery_cycle.html

## responsive_jquery_cycle.html
<!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>
	<!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>