Seen In Slideshow
by omni5cience
HTML
<div id="container">
<ul class="rslides">
<li>
<img src="https://dl.dropboxusercontent.com/u/6519882/InTownAndAround/SeenIn-1.jpg" alt="" />
<p class="caption">Amanda Faison, Frankie Faison, Jane Mandell, honoree, and Rachel Faison (daughters and husband of Jane Mandel)</p>
</li>
<li>
<img src="https://dl.dropboxusercontent.com/u/6519882/InTownAndAround/SeenIn-2.jpg" alt="">
<p class="caption">Richard Bryant, Executive Director of Valley Arts of Orange and Chris Daggett, President and CEO of Dodge Foundation</p>
</li>
<li>
<img src="https://dl.dropboxusercontent.com/u/6519882/InTownAndAround/SeenIn-3.jpg" alt="">
<p class="caption">Dr. Jonathan Cobb, Luna Board President, Suzzanne Douglas, Emcee and Jim Gordon, donor of French Cottage auction item </p>
</li>
</ul>
</div>
CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#container {
position: relative;
}
.rslides1_tabs {
margin-top: 10px;
text-align: center;
}
.rslides1_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides1_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ddd;
/*background: rgba(0,0,0, .2);*/
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .7);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .7);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .7);
width: 9px;
height: 9px;
}
.rslides_here a {
background: #444;
background: rgba(0, 0, 0, .8);
}
body {
overflow: hidden;
background-color: white;
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
text-align: center;
background: #000;
...
JavaScript
/*! http://responsiveslides.com v1.54 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs...