305 lines
13 KiB
HTML
Executable File
305 lines
13 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Meta, title, CSS, favicons, etc. -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<title>Slider</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="dist/css/bootstrap.css" rel="stylesheet">
|
|
|
|
<!-- Documentation extras -->
|
|
<link href="docs-assets/css/docs.css" rel="stylesheet">
|
|
<link href="tm/css/prettify.css" rel="stylesheet">
|
|
<link href="tm/css/tm_docs.css" rel="stylesheet">
|
|
<link href="tm/css/camera.css" rel="stylesheet">
|
|
|
|
<!--[if lt IE 9]><script src="docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="docs-assets/ico/apple-touch-icon-144-precomposed.png">
|
|
<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
|
|
|
|
|
|
<!-- Place anything custom after this. -->
|
|
</head>
|
|
<body>
|
|
<a class="sr-only" href="#content">Skip navigation</a>
|
|
|
|
<!-- Docs master nav -->
|
|
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
|
|
<ul class="nav navbar-nav">
|
|
<li class="home"><a href="../index.html" class="glyphicon glyphicon-home"></a></li><li class="divider-vertical"></li>
|
|
<li>
|
|
<a href="getting-started.html">Getting started</a>
|
|
</li>
|
|
<li>
|
|
<a href="css.html">CSS</a>
|
|
</li>
|
|
<li>
|
|
<a href="components.html">Components</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript.html">JavaScript</a>
|
|
</li><li class="divider-vertical"></li>
|
|
<li class="active dropdown -tm-dropdown">
|
|
<a data-toggle="dropdown" href="#">TM add-ons<span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="../404.html">Pages</a>
|
|
<ul class="pages">
|
|
<li><a href="../404.html" role="menuitem" tabindex="-1">404 page</a></li>
|
|
<li><a href="under-construction.html" role="menuitem" tabindex="-1">Under Construction</a></li>
|
|
</ul>
|
|
</li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="portfolio.html">Porfolio</a></li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="slider.html" class="active">Slider</a></li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="social_media.html" >Social and media</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- Docs page layout -->
|
|
<div class="bs-header" id="content">
|
|
<div class="container">
|
|
<h1>Slider</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container bs-docs-container">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="bs-sidebar hidden-print" role="complementary">
|
|
<ul class="nav bs-sidenav">
|
|
<li><a href="#b-slider"><i class="icon-chevron-right"></i> Basic Slider</a></li>
|
|
<li><a href="#th-slider"><i class="icon-chevron-right"></i> Slider with thumbnails</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9" role="main">
|
|
<!-- Getting started
|
|
================================================== -->
|
|
<!-- Slider
|
|
================================================== -->
|
|
<section>
|
|
<div class="page-header">
|
|
<h1 id="b-slider">Basic Slider <small>Pagination circles with the height relative to the width</small></h1>
|
|
</div>
|
|
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
|
|
<div data-thumb="tm/img/camera/slides/thumbs/bridge.jpg" data-src="tm/img/camera/slides/bridge.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/leaf.jpg" data-src="tm/img/camera/slides/leaf.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/road.jpg" data-src="tm/img/camera/slides/road.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
<em>It's completely free</em> (even if a donation is appreciated)
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/sea.jpg" data-src="tm/img/camera/slides/sea.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Camera slideshow provides many options <em>to customize your project</em> as more as possible
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/shelter.jpg" data-src="tm/img/camera/slides/shelter.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/tree.jpg" data-src="tm/img/camera/slides/tree.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Different color skins and layouts available, <em>fullscreen ready too</em>
|
|
</div>
|
|
</div>
|
|
</div><!-- #camera_wrap_1 -->
|
|
<h3>Basic HTML</h3>
|
|
<p>This is the basic html structure:</p>
|
|
<pre class="prettyprint">
|
|
<div class="camera_wrap">
|
|
<div data-src="images/image_1.jpg"></div>
|
|
<div data-src="images/image_1.jpg"></div>
|
|
<div data-src="images/image_2.jpg"></div>
|
|
</div>
|
|
</pre>
|
|
<h3>Initialization</h3>
|
|
<p>This is the main function to start your slideshow:</p>
|
|
<pre class="prettyprint">
|
|
jQuery('your_object').camera();
|
|
</pre>
|
|
<h3>Essential CSS</h3>
|
|
<p>You have to call "camera.css" file.</p>
|
|
<p>By editing this CSS file you can create your own personal skin.</p>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<div class="page-header">
|
|
<h1 id="th-slider">Slider with thumbnails <small>Thumbnails with fixed height</small></h1>
|
|
</div>
|
|
<div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
|
|
<div data-thumb="tm/img/camera/slides/thumbs/bridge.jpg" data-src="tm/img/camera/slides/bridge.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/leaf.jpg" data-src="tm/img/camera/slides/leaf.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/road.jpg" data-src="tm/img/camera/slides/road.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
<em>It's completely free</em> (even if a donation is appreciated)
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/sea.jpg" data-src="tm/img/camera/slides/sea.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Camera slideshow provides many options <em>to customize your project</em> as more as possible
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/shelter.jpg" data-src="tm/img/camera/slides/shelter.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
|
|
</div>
|
|
</div>
|
|
<div data-thumb="tm/img/camera/slides/thumbs/tree.jpg" data-src="tm/img/camera/slides/tree.jpg">
|
|
<div class="camera_caption fadeFromBottom">
|
|
Different color skins and layouts available, <em>fullscreen ready too</em>
|
|
</div>
|
|
</div>
|
|
</div><!-- #camera_wrap_2 -->
|
|
<div style="clear:both;"></div>
|
|
<div class="tm_pad">
|
|
<h3>Basic HTML</h3>
|
|
<p>This is the html structure:</p>
|
|
<pre class="prettyprint">
|
|
<div class="camera_wrap">
|
|
<div data-thumb="images/thumb_1.jpg" data-src="images/image_1.jpg"></div>
|
|
<div data-thumb="images/thumb_2.jpg" data-src="images/image_1.jpg"></div>
|
|
<div data-thumb="images/thumb_3.jpg" data-src="images/image_2.jpg"></div>
|
|
</div>
|
|
</pre>
|
|
<h3>Initialization</h3>
|
|
<p>Add some options to the main function.</p>
|
|
<pre class="prettyprint">
|
|
jQuery('your_object').camera({ //the height and the presence of the thumbnails
|
|
height: '41%',
|
|
pagination: false,
|
|
thumbnails: true
|
|
});
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer
|
|
================================================== -->
|
|
<footer class="bs-footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="bs-social">
|
|
<ul class="bs-social-buttons">
|
|
<li>
|
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
|
|
</li>
|
|
<li>
|
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
|
|
</li>
|
|
<li class="follow-btn">
|
|
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
|
|
</li>
|
|
<li class="tweet-btn">
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
|
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
|
<ul class="footer-links">
|
|
<li>Currently v3.0.3</li>
|
|
<li class="muted">·</li>
|
|
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
|
<li class="muted">·</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
|
<li class="muted">·</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<script src="docs-assets/js/jquery.js"></script>
|
|
<script src="tm/js/jquery-migrate-1.2.1.min.js"></script>
|
|
<script src="dist/js/bootstrap.js"></script>
|
|
|
|
<script src="http://platform.twitter.com/widgets.js"></script>
|
|
<script src="docs-assets/js/holder.js"></script>
|
|
|
|
<script src="tm/js/prettify.js"></script>
|
|
<script src="docs-assets/js/application.js"></script>
|
|
|
|
|
|
<script src='tm/js/jquery.easing.1.3.js'></script>
|
|
<script src='tm/js/camera.min.js'></script>
|
|
<script>
|
|
jQuery(function(){
|
|
|
|
jQuery('#camera_wrap_1').camera({
|
|
thumbnails: true
|
|
});
|
|
|
|
jQuery('#camera_wrap_2').camera({
|
|
height: '400px',
|
|
loader: 'bar',
|
|
pagination: false,
|
|
thumbnails: true
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
window.twttr = (function (d,s,id) {
|
|
var t, js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
|
|
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
|
|
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
|
|
}(document, "script", "twitter-wjs"));
|
|
</script>
|
|
<script>
|
|
$(function(){
|
|
window.prettyPrint && prettyPrint()
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |