0byt3m1n1
Path:
/
data
/
17
/
1
/
18
/
11
/
1670011
/
user
/
1801231
/
htdocs
/
wholebodylightpod_dot_com
/
assets
/
[
Home
]
File: slider.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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.min.css" rel="stylesheet"> <!-- Optional Bootstrap Theme --> <link href="data:text/css;charset=utf-8," data-href="dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> <!-- Documentation extras --> <link href="assets/css/src/docs.css" rel="stylesheet"> <link href="assets/css/src/pygments-manni.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="assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="assets/js/ie10-viewport-bug-workaround.js"></script> <script src="assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png"> <link rel="shortcut icon" href="favicon.ico"> <!-- Place anything custom after this. --> </head> <body> <a class="sr-only" href="#content">Skip navigation</a> <!-- Docs master nav --> <header class="navbar navbar-static-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> <ul class="nav navbar-nav navbar-right"> <li><a href="http://expo.getbootstrap.com" >Expo</a></li> <li><a href="http://blog.getbootstrap.com" >Blog</a></li> </ul> </nav> </div> </header> <!-- Docs page layout --> <div class="bs-docs-header" id="content"> <div class="container"> <h1>Slider</h1> </div> </div> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-9" role="main"> <!-- Getting started ================================================== --> <!-- Slider ================================================== --> <section class="bs-docs-section"> <h1 id="b-slider" class="page-header">Basic Slider <small>Pagination circles with the height relative to the width</small></h1> <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 class="bs-docs-section"> <h1 id="th-slider" class="page-header">Slider with thumbnails <small>Thumbnails with fixed height</small></h1> <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 class="col-md-3"> <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary"> <ul class="nav bs-docs-sidenav"> <li><a href="#b-slider">Basic Slider</a></li> <li><a href="#th-slider">Slider with thumbnails</a></li> </ul> </div> </div> </div> </div> <!-- Footer ================================================== --> <footer class="bs-docs-footer" role="contentinfo"> <div class="container"> <div class="bs-docs-social"> <ul class="bs-docs-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 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>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="bs-docs-footer-links muted"> <li>Currently v3.2.0</li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li>·</li> <li><a href="../getting-started/#examples">Examples</a></li> <li>·</li> <li><a href="../2.3.2/">v2.3.2 docs</a></li> <li>·</li> <li><a href="../about/">About</a></li> <li>·</li> <li><a href="http://expo.getbootstrap.com">Expo</a></li> <li>·</li> <li><a href="http://blog.getbootstrap.com">Blog</a></li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li> </ul> </div> </footer> <script src="tm/js/jquery.js"></script> <script src="tm/js/jquery-migrate-1.2.1.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> <script src="assets/js/docs.min.js"></script> <script src="tm/js/prettify.js"></script> <script src="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>