|
|
| 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>
| |
"
