Skip to content

Instantly share code, notes, and snippets.

@jentanbernardus

jentanbernardus/responsive_jquery_cycle.html

Created December 4, 2012 04:51
Show Gist options
  • Save jentanbernardus/4200668 to your computer and use it in GitHub Desktop.
Save jentanbernardus/4200668 to your computer and use it in GitHub Desktop.
Download ZIP
@malsup's jQuery Cycle in a Responsive Layout
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment