srobbin

<a href="#modal" class="second">Link text</a>
<div id="modal" style="display:none">
    <h2>Modal</h2>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
    $(".second").pageslide({ direction: "left", modal: true });
</script>

srobbin

<a href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>

srobbin

<!--
  Notice that the size and color of the text above changes
  as your cursor approaches it.
-->

<!-- Beginning styles -->
<style>
  a#demo-link {
    font-size: 24px;
    color: #FFFFCC;

srobbin

<!--
  In this demo, there are a series of circular images.
  Their opacity changes as you approach each individual one.
-->

<!-- Beginning styles -->
<style>
  img.circle {
    float: left;
    height: 80px;

srobbin

<style media="print">
   #backstretch { display: none; }
</style>

srobbin

@font-face {
  font-family: "Shifticons";
  src: url("../fonts/shifticons.eot"); /* IE9 Compat Modes */
  src: url("../fonts/shifticons.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/shifticons.woff") format("woff"), /* Modern Browsers */
       url("../fonts/shifticons.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../fonts/shifticons.svg#Shifticons") format("svg"); /* Legacy iOS */
}

srobbin

<div id="book1" class="book">
  <img src="book.jpg" />
</div>

srobbin

<!-- Note: You'll have to use Modernizr to detect 3d transform support -->

<!--- HTML --->
<div class="books">
  <div id="book1" class="book">
    <img src="book4.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="book2.jpg" />
  </div>

srobbin

<script>
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-csstransforms3d-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(

srobbin

/*
 * If you'd like, you can attach Backstretch to any block-level element. 
 * For example, this demo.
 */

  $("#demo").backstretch("images/garfield-interior.jpg");