albell · March 4, 2013 23:44
diff --git a/progressive kitties 2 b/progressive kitties 2
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset='utf-8' />
 	<meta name="viewport" content="width=device-width">
 	<meta name='description' content='' />
 	<title></title> 

 <style>
 .cycle-slideshow {
 	outline: 2px dashed red;
 	width: 800px;
 	max-width: 100%;
 }
 .cycle-slideshow > div {width: 100%}

 img {
 	display: block;
 	height: auto !important;
 	max-width: 100%;
 }

 #prev, #next {
    float: left;
    margin: 20px;
    outline: 1px dashed blue;
    width: 100px;
 }

 #kittycounter {float: left}

 .disabled {opacity: .2}
 </style>
 </head>
 <body>

 <div class="cycle-slideshow"
 	data-cycle-allow-wrap="false"
 	data-slides=">div"
 	data-cycle-fx="scrollHorz"
 	data-paused="true"
    data-cycle-auto-height="calc"
 	data-cycle-prev="#prev"
 	data-cycle-next="#next"
 	data-cycle-caption="#kittycounter"
 	data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
 	data-cycle-loader=true
    data-cycle-progressive="#moreimages"
 	>
 	<div>
 	   	<img src="http://placekitten.com/g/800/800" />
 	   	<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat elit nec libero fermentum pellentesque. Donec suscipit ultricies porta. In mattis faucibus nulla, in hendrerit tortor dictum ut.</p>
 	</div>
 	<div>
 		<img src='http://placekitten.com/g/700/700' />
 		<p>Slide 2.Nullam cursus massa eu turpis tristique adipiscing.</p>
 	</div>
 </div>
 	
 <div class="slideshow-controls">
 	<a href=# id="prev">Previous</a>
 	<p id="kittycounter"></p>
 	<a href=# id="next">Next</a>
 </div>

 <script id="moreimages" type="text/cycle">
 [
    "<div><img src='http://placekitten.com/g/750/750' /><p>Slide 3. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p></div>",
    "<div><img src='http://placekitten.com/g/850/700' /><p>Slide 4. Sed pulvinar ornare viverra..</p></div>"
 ]
 </script>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
 <script src="http://malsup.github.com/jquery.cycle2.js"></script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width">
	<meta name='description' content='' />
	<title></title>

	<style>
	.cycle-slideshow {
	outline: 2px dashed red;
	width: 800px;
	max-width: 100%;
	}
	.cycle-slideshow > div {width: 100%}

	img {
	display: block;
	height: auto !important;
	max-width: 100%;
	}

	#prev, #next {
	float: left;
	margin: 20px;
	outline: 1px dashed blue;
	width: 100px;
	}

	#kittycounter {float: left}

	.disabled {opacity: .2}
	</style>
	</head>
	<body>

	<div class="cycle-slideshow"
	data-cycle-allow-wrap="false"
	data-slides=">div"
	data-cycle-fx="scrollHorz"
	data-paused="true"
	data-cycle-auto-height="calc"
	data-cycle-prev="#prev"
	data-cycle-next="#next"
	data-cycle-caption="#kittycounter"
	data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
	data-cycle-loader=true
	data-cycle-progressive="#moreimages"
	>
	<div>
	<img src="http://placekitten.com/g/800/800" />
	<p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat elit nec libero fermentum pellentesque. Donec suscipit ultricies porta. In mattis faucibus nulla, in hendrerit tortor dictum ut.</p>
	</div>
	<div>
	<img src='http://placekitten.com/g/700/700' />
	<p>Slide 2.Nullam cursus massa eu turpis tristique adipiscing.</p>
	</div>
	</div>

	<div class="slideshow-controls">
	<a href=# id="prev">Previous</a>
	<p id="kittycounter"></p>
	<a href=# id="next">Next</a>
	</div>

	<script id="moreimages" type="text/cycle">
	[
	"<div><img src='http://placekitten.com/g/750/750' /><p>Slide 3. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p></div>",
	"<div><img src='http://placekitten.com/g/850/700' /><p>Slide 4. Sed pulvinar ornare viverra..</p></div>"
	]
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="http://malsup.github.com/jquery.cycle2.js"></script>
	</body>
	</html>