|
|
Line 1: |
Line 1: |
- | <!doctype html>
| |
- | <html>
| |
- | <head>
| |
- | <meta http-equiv="content-type" content="text/html; charset="utf-8">
| |
- | <title>iGem slideshow stuff</title>
| |
- | <meta name="viewport" content="width=device-width">
| |
- |
| |
- | <!-- CSS for slidesjs.com example -->
| |
- | <link rel="stylesheet" href="css/example.css">
| |
- | <link rel="stylesheet" href="css/font-awesome.min.css">
| |
- | <!-- End CSS for slidesjs.com example -->
| |
- | <!-- BEGIN Navigation bar CSS - This is where the magic happens -->
| |
- | <link rel="stylesheet" href=".../navbar.css">
| |
- | <!-- END Navigation bar CSS -->
| |
- |
| |
- | <!-- SlidesJS Required: Link to jQuery -->
| |
- | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
| |
- | <script src="js/jquery.slides.min.js"></script>
| |
- | <!-- End SlidesJS Required -->
| |
- |
| |
- | <!-- BEGIN JavaScript -->
| |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
| |
- | <script type="text/javascript">
| |
- | $(document).ready(function(){
| |
| | | |
- | // Requried: Navigation bar drop-down
| |
- | $("nav ul li").hover(function() {
| |
- | $(this).addClass("active");
| |
- | $(this).find("ul").show().animate({opacity: 1}, 400);
| |
- | },function() {
| |
- | $(this).find("ul").hide().animate({opacity: 0}, 200);
| |
- | $(this).removeClass("active");
| |
- | });
| |
- |
| |
- | // Requried: Addtional styling elements
| |
- | $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
| |
- | $('nav ul li:first-child').addClass('first');
| |
- | $('nav ul li:last-child').addClass('last');
| |
- | $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
| |
- |
| |
- | });
| |
- | </script>
| |
- | <!-- END JavaScript -->
| |
- |
| |
- |
| |
- | <style>
| |
- | body {
| |
- | -webkit-font-smoothing: antialiased;
| |
- | font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
- | color: #232525;
| |
- | padding-top:70px;
| |
- | }
| |
- |
| |
- | #slides {
| |
- | display: none
| |
- | }
| |
- |
| |
- | #slides .slidesjs-navigation {
| |
- | margin-top:5px;
| |
- | }
| |
- |
| |
- | a.slidesjs-next,
| |
- | a.slidesjs-previous,
| |
- | a.slidesjs-play,
| |
- | a.slidesjs-stop {
| |
- | background-image: url(img/btns-next-prev.png);
| |
- | background-repeat: no-repeat;
| |
- | display:block;
| |
- | width:12px;
| |
- | height:18px;
| |
- | overflow: hidden;
| |
- | text-indent: -9999px;
| |
- | float: left;
| |
- | margin-right:5px;
| |
- | }
| |
- |
| |
- | a.slidesjs-next {
| |
- | margin-right:10px;
| |
- | background-position: -12px 0;
| |
- | }
| |
- |
| |
- | a:hover.slidesjs-next {
| |
- | background-position: -12px -18px;
| |
- | }
| |
- |
| |
- | a.slidesjs-previous {
| |
- | background-position: 0 0;
| |
- | }
| |
- |
| |
- | a:hover.slidesjs-previous {
| |
- | background-position: 0 -18px;
| |
- | }
| |
- |
| |
- | a.slidesjs-play {
| |
- | width:15px;
| |
- | background-position: -25px 0;
| |
- | }
| |
- |
| |
- | a:hover.slidesjs-play {
| |
- | background-position: -25px -18px;
| |
- | }
| |
- |
| |
- | a.slidesjs-stop {
| |
- | width:18px;
| |
- | background-position: -41px 0;
| |
- | }
| |
- |
| |
- | a:hover.slidesjs-stop {
| |
- | background-position: -41px -18px;
| |
- | }
| |
- |
| |
- | .slidesjs-pagination {
| |
- | margin: 7px 0 0;
| |
- | float: right;
| |
- | list-style: none;
| |
- | }
| |
- |
| |
- | .slidesjs-pagination li {
| |
- | float: left;
| |
- | margin: 0 1px;
| |
- | }
| |
- |
| |
- | .slidesjs-pagination li a {
| |
- | display: block;
| |
- | width: 13px;
| |
- | height: 0;
| |
- | padding-top: 13px;
| |
- | background-image: url(img/pagination.png);
| |
- | background-position: 0 0;
| |
- | float: left;
| |
- | overflow: hidden;
| |
- | }
| |
- |
| |
- | .slidesjs-pagination li a.active,
| |
- | .slidesjs-pagination li a:hover.active {
| |
- | background-position: 0 -13px
| |
- | }
| |
- |
| |
- | .slidesjs-pagination li a:hover {
| |
- | background-position: 0 -26px
| |
- | }
| |
- |
| |
- | #slides a:link,
| |
- | #slides a:visited {
| |
- | color: #333
| |
- | }
| |
- |
| |
- | #slides a:hover,
| |
- | #slides a:active {
| |
- | color: #9e2020
| |
- | }
| |
- |
| |
- | .navbar {
| |
- | overflow: hidden
| |
- | }
| |
- | </style>
| |
- | <!-- End SlidesJS Optional-->
| |
- |
| |
- | <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
| |
- | <style>
| |
- | #slides {
| |
- | display: none
| |
- | }
| |
- |
| |
- | .container {
| |
- | margin: 0 auto
| |
- | }
| |
- |
| |
- | /* For tablets & smart phones */
| |
- | @media (max-width: 767px) {
| |
- | body {
| |
- | padding-left: 20px;
| |
- | padding-right: 20px;
| |
- | }
| |
- | .container {
| |
- | width: auto
| |
- | }
| |
- | }
| |
- |
| |
- | /* For smartphones */
| |
- | @media (max-width: 480px) {
| |
- | .container {
| |
- | width: auto
| |
- | }
| |
- | }
| |
- |
| |
- | /* For smaller displays like laptops */
| |
- | @media (min-width: 768px) and (max-width: 979px) {
| |
- | .container {
| |
- | width: 724px
| |
- | }
| |
- | }
| |
- |
| |
- | /* For larger displays */
| |
- | @media (min-width: 1200px) {
| |
- | .container {
| |
- | width: 1170px
| |
- | }
| |
- | }
| |
- | </style>
| |
- | <!-- SlidesJS Required: -->
| |
- | </head>
| |
- | <body>
| |
- | <div class="wrapper">
| |
- |
| |
- | <!-- BEGIN Dark navigation bar -->
| |
- | <nav class="dark">
| |
- | <ul class="clear">
| |
- | <li><a href="#">Home</a></li>
| |
- | <li><a href="#">About</a></li>
| |
- | <li><a href="#">Services</a>
| |
- | <ul>
| |
- | <li><a href="#">Branding</a></li>
| |
- | <li><a href="#">Print</a></li>
| |
- | <li><a href="#">Web</a></li>
| |
- | <li><a href="#">Marketing</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Portfolio</a></li>
| |
- | <li><a href="#">Clients</a></li>
| |
- | <li><a href="#">Our blog</a></li>
| |
- | <li><a href="#">Downloads</a></li>
| |
- | <li><a href="#">Contact us</a></li>
| |
- | </ul>
| |
- | </nav>
| |
- | <!-- END Dark navigation bar -->
| |
- |
| |
- | </div>
| |
- | <!-- SlidesJS : Start Slideshow -->
| |
- | <div class="container">
| |
- | <div id="slides">
| |
- | <a href="#"><img src="img/example-slide-1.jpg"></a>
| |
- | <a href="#"><img src="img/example-slide-2.jpg"></a>
| |
- | <a href="#"><img src="img/example-slide-3.jpg"></a>
| |
- | <a href="#"><img src="img/example-slide-4.jpg"></a>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- |
| |
- | <script>
| |
- | $(function() {
| |
- | $('#slides').slidesjs({
| |
- | width: 940,
| |
- | height: 528,
| |
- | play: {
| |
- | active: true,
| |
- | auto: true,
| |
- | interval: 4000,
| |
- | swap: true
| |
- | }
| |
- | });
| |
- | });
| |
- | </script>
| |
- | <!-- End SlidesJS Slideshow -->
| |
- | </body>
| |
- | </html>
| |