<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="gb2312">
<title>jQuery多功能垂直幻灯片 - 网页模板</title>
<!-- Prevent loading in iframe -->
<script type="text/javascript">
if(self !== top) { top.location = self.location; }
</script>
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/layout.css">
<!-- JS
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- "Seria" JS/CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="css/seria.css">
<!--[if lt IE 9]>
<script src="js/respond.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.seria.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* Seria Example 1
-------------------------------*/
$('#seria_1').seria({
easing: 'easeOutQuint',
fadeSync: true
});
/* Seria Example 2
-------------------------------*/
$('#seria_2').seria({
easing: 'easeOutQuint',
fade: 'none',
photoExpandStyle: 'style2',
pagination: false,
adjacentColor: '#f66',
adjacentOpacity: 0.5
});
/* Seria Example 3
-------------------------------*/
$('#seria_3').seria({
mode: 'normal',
easing: 'easeOutQuint',
fade: 'horizontal',
adjacentVisible: 0,
pagination: true,
height: 350
});
/* Seria Example 4
-------------------------------*/
$('#seria_4').seria({
mode: 'normal',
easing: 'easeOutQuint',
fade: 'vertical',
photoExpand: false,
adjacentVisible: 90
});
});
</script>
</head>
<body>
<div class="container">
<p class="ten columns info">
<a id="examples"></a>
<strong>Example 1</strong> - Plugin with default settings, except fadeSync option that when set to true makes description move along with the photo when it scrolls
</p>
<!-- SEPARATOR --> <div class="separator"></div>
<!-- Seria Plugin - Example 1
================================================== -->
<div id="seria_1" class="seria">
<ul class="seria-list">
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic1.jpg" alt="Picture">
<figcaption>Caption for photo #1</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #1</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic2.jpg" alt="Picture">
<figcaption>Caption for photo #2</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #2</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic3.jpg" alt="Picture">
<figcaption>Caption for photo #3</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #3</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic4.jpg" alt="Picture">
<figcaption>Caption for photo #4</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #4</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic5.jpg" alt="Picture">
<figcaption>Caption for photo #5</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #5</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean massa.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
</ul>
</div> <!-- seria_1 -->
<!-- SEPARATOR --> <div class="separator"></div>
<p class="ten columns info">
<strong>Example 2</strong> - This example uses "style2" of photo expand feature that allows you to scroll photos in larger size. Also since version 1.2 of Seria plugin you can configure transparancy and color for adjacent photo covers using corresponding plugin options
</p>
<!-- SEPARATOR --> <div class="separator"></div>
<!-- Seria Plugin - Example 2
================================================== -->
<div id="seria_2" class="seria">
<ul class="seria-list">
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic1.jpg" alt="Picture">
<figcaption>Caption for photo #1</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #1</h3>
<div class="subheader"><small>13 Jan 2013 by John Doe</small></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.</p>
<a href="http://www.moobnn.com/jiaoben/" title="Visit site">
<strong>VISIT SITE</strong>
</a>
</div>
</li>
<li>
<div class="seria-photo">
<figure>
<img src="pictures/pic2.jpg" alt="Picture">
<figcaption>Caption for photo #2</figcaption>
</figure>
</div>
<div class="seria-about">
<h3>Photo title #2</h3>
<div class="subh