|
|
Line 5: |
Line 5: |
| <meta http-equiv="X-UA-Compatible" content="chrome=1" /> | | <meta http-equiv="X-UA-Compatible" content="chrome=1" /> |
| <meta name="description" content="Codaslider : JQuery Slider Plugin" /> | | <meta name="description" content="Codaslider : JQuery Slider Plugin" /> |
- | | + | <link rel="stylesheet" type="text/css" media="screen" href="http://www.hcs.harvard.edu/~stahr/javascript/jquery.galleryview-3.0.min.js"> |
| <style>h1{margin:100px;} | | <style>h1{margin:100px;} |
| /*nulling the wiki preferences*/ | | /*nulling the wiki preferences*/ |
Line 32: |
Line 32: |
| /*(end)nulling the wiki preferences*/ | | /*(end)nulling the wiki preferences*/ |
| </style> | | </style> |
- | <style>
| |
- | /***********************************************************************
| |
- | jQuery Coda-Slider v3.0 - kevinbatdorf.github.com/codaslider
| |
- | Copyright (c) 2012 Kevin Batdorf
| |
- | This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
| |
- | ************************************************************************/
| |
- | /********************************************
| |
- | SASS stylesheet.
| |
| | | |
- | No idea what CSS preprocessing is all about? No problem... just use the style.css file instead.
| |
- | If you want to learn more, check out this article by Chris Coyier
| |
- |
| |
- | css-tricks.com/musings-on-preprocessing/
| |
- |
| |
- | ********************************************/
| |
- |
| |
- | .coda-slider-wrapper {
| |
- | /* Eric Meyer's reset http://meyerweb.com/eric/tools/css/ */
| |
- | /*******************************************************
| |
- | *
| |
- | * Most common stuff you'll need to change
| |
- | * will be below this line.
| |
- | *
| |
- | ********************************************************/
| |
- | /******************************************************
| |
- | *
| |
- | * Main wrapper padding
| |
- | *
| |
- | *******************************************************/
| |
- | padding: 20px 0;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper div, .coda-slider-wrapper span, .coda-slider-wrapper applet, .coda-slider-wrapper object, .coda-slider-wrapper iframe, .coda-slider-wrapper h1, .coda-slider-wrapper h2, .coda-slider-wrapper h3, .coda-slider-wrapper h4, .coda-slider-wrapper h5, .coda-slider-wrapper h6, .coda-slider-wrapper p, .coda-slider-wrapper blockquote, .coda-slider-wrapper pre, .coda-slider-wrapper a, .coda-slider-wrapper abbr, .coda-slider-wrapper acronym, .coda-slider-wrapper address, .coda-slider-wrapper big, .coda-slider-wrapper cite, .coda-slider-wrapper code, .coda-slider-wrapper del, .coda-slider-wrapper dfn, .coda-slider-wrapper em, .coda-slider-wrapper font, .coda-slider-wrapper img, .coda-slider-wrapper ins, .coda-slider-wrapper kbd, .coda-slider-wrapper q, .coda-slider-wrapper s, .coda-slider-wrapper samp, .coda-slider-wrapper small, .coda-slider-wrapper strike, .coda-slider-wrapper strong, .coda-slider-wrapper sub, .coda-slider-wrapper sup, .coda-slider-wrapper tt, .coda-slider-wrapper var, .coda-slider-wrapper b, .coda-slider-wrapper u, .coda-slider-wrapper i, .coda-slider-wrapper center, .coda-slider-wrapper dl, .coda-slider-wrapper dt, .coda-slider-wrapper dd, .coda-slider-wrapper ol, .coda-slider-wrapper ul, .coda-slider-wrapper li, .coda-slider-wrapper fieldset, .coda-slider-wrapper form, .coda-slider-wrapper label, .coda-slider-wrapper legend, .coda-slider-wrapper table, .coda-slider-wrapper caption, .coda-slider-wrapper tbody, .coda-slider-wrapper tfoot, .coda-slider-wrapper thead, .coda-slider-wrapper tr, .coda-slider-wrapper th, .coda-slider-wrapper td {
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | border: 0;
| |
- | box-shadow: none;
| |
- | outline: 0;
| |
- | font-size: 100%;
| |
- | vertical-align: baseline;
| |
- | background: transparent;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper body {
| |
- | line-height: 1;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper ol, .coda-slider-wrapper ul {
| |
- | list-style: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper blockquote, .coda-slider-wrapper q {
| |
- | quotes: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper blockquote:before, .coda-slider-wrapper blockquote:after, .coda-slider-wrapper q:before, .coda-slider-wrapper q:after {
| |
- | content: '';
| |
- | content: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider {
| |
- | /******************************************************
| |
- | *
| |
- | * Inner wrapper styles
| |
- | *
| |
- | *******************************************************/
| |
- | background: #f2f2f2;
| |
- | /******************************************************
| |
- | *
| |
- | * Width of the container. Typically you will want to
| |
- | * match this with the width of the panel as well.
| |
- | *
| |
- | *******************************************************/
| |
- | width: 700px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider .panel {
| |
- | /******************************************************
| |
- | *
| |
- | * Width of each individual panel.
| |
- | * Typically you will want to match this with the width
| |
- | * of the container as well.
| |
- | *
| |
- | *******************************************************/
| |
- | width: 700px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider .panel .panel-wrapper {
| |
- | /******************************************************
| |
- | *
| |
- | * Panel wrapper styles
| |
- | *
| |
- | *******************************************************/
| |
- | padding: 20px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav {
| |
- | /******************************************************
| |
- | *
| |
- | * Tab styles
| |
- | *
| |
- | *******************************************************/
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav .current {
| |
- | /******************************************************
| |
- | *
| |
- | * Current tab styles
| |
- | *
| |
- | *******************************************************/
| |
- | background: #0090FF;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav a {
| |
- | /******************************************************
| |
- | *
| |
- | * Tab styles
| |
- | *
| |
- | *******************************************************/
| |
- | background: #000;
| |
- | color: #fff;
| |
- | margin-right: 1px;
| |
- | padding: 3px 6px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav a:hover {
| |
- | /******************************************************
| |
- | *
| |
- | * Tab styles
| |
- | *
| |
- | *******************************************************/
| |
- | background: #000;
| |
- | color: #fff;
| |
- | text-shadow: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
| |
- | /******************************************************
| |
- | *
| |
- | * Arrow Styles
| |
- | *
| |
- | *******************************************************/
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
| |
- | /******************************************************
| |
- | *
| |
- | * Arrow Styles
| |
- | *
| |
- | *******************************************************/
| |
- | background: #000;
| |
- | color: #fff;
| |
- | padding: 5px;
| |
- | width: 100px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow {
| |
- | /******************************************************
| |
- | *
| |
- | * Graphical arrow styles
| |
- | *
| |
- | *******************************************************/
| |
- | width: 25px;
| |
- | height: 25px;
| |
- | background: url(../img/arrow.png) no-repeat top left;
| |
- | margin-top:50px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow a {
| |
- | /******************************************************
| |
- | *
| |
- | * Graphical arrow styles
| |
- | *
| |
- | *******************************************************/
| |
- | width: 0;
| |
- | height: 0;
| |
- | border:none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow:hover {
| |
- | /************************************************
| |
- | *
| |
- | * Graphical arrows hover left
| |
- | *
| |
- | *************************************************/
| |
- | background: url(../img/arrow.png) no-repeat bottom left;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-right-arrow {
| |
- | /******************************************************
| |
- | *
| |
- | * Graphical arrow styles
| |
- | *
| |
- | *******************************************************/
| |
- | width: 25px;
| |
- | height: 25px;
| |
- | background: url(../img/arrow.png) no-repeat top right;
| |
- | margin-top:50px;
| |
- | }
| |
- | .coda-slider-wrapper .coda-nav-right-arrow a {
| |
- | /******************************************************
| |
- | *
| |
- | * Graphical arrow styles
| |
- | *
| |
- | *******************************************************/
| |
- | width: 0;
| |
- | height: 0;
| |
- | background: none;
| |
- | margin-top:0;
| |
- | border:none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-right-arrow:hover {
| |
- | /************************************************
| |
- | *
| |
- | * Graphical arrows hover right
| |
- | *
| |
- | *************************************************/
| |
- | background: url(../img/arrow.png) no-repeat bottom right;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow:active, .coda-slider-wrapper .coda-nav-right-arrow:active {
| |
- | /************************************************
| |
- | *
| |
- | * Graphical arrows active
| |
- | *
| |
- | *************************************************/
| |
- | margin-top: 55px;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .loading {
| |
- | /******************************************************
| |
- | *
| |
- | * Style for preloader
| |
- | *
| |
- | *******************************************************/
| |
- | height: 100%;
| |
- | padding: 20px;
| |
- | text-align: center;
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | .arrows .coda-slider {
| |
- | /******************************************************
| |
- | *
| |
- | * Margin between slider and arrows
| |
- | *
| |
- | *******************************************************/
| |
- | margin: 0 10px;
| |
- | }
| |
- |
| |
- | /**********************************************************************
| |
- | *
| |
- | * Don't change anything below here unless you know what you're doing
| |
- | *
| |
- | ***********************************************************************/
| |
- |
| |
- | .coda-slider-wrapper {
| |
- | /************************************************
| |
- | *
| |
- | * Wrapper styles
| |
- | *
| |
- | *************************************************/
| |
- | clear: both;
| |
- | overflow: auto;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider {
| |
- | /************************************************
| |
- | *
| |
- | * slider styles
| |
- | *
| |
- | *************************************************/
| |
- | float: left;
| |
- | overflow: hidden;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider .panel-container {
| |
- | /************************************************
| |
- | *
| |
- | * Panel container styles
| |
- | *
| |
- | *************************************************/
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-slider .panel-container .panel {
| |
- | /************************************************
| |
- | *
| |
- | * Panel styles
| |
- | *
| |
- | *************************************************/
| |
- | display: block;
| |
- | float: left;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav {
| |
- | /************************************************
| |
- | *
| |
- | * Navigation tabs
| |
- | *
| |
- | *************************************************/
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav ul {
| |
- | /************************************************
| |
- | *
| |
- | * Navigation tabs
| |
- | *
| |
- | *************************************************/
| |
- | clear: both;
| |
- | display: block;
| |
- | margin: auto;
| |
- | overflow: hidden;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav ul li {
| |
- | /************************************************
| |
- | *
| |
- | * Navigation tabs
| |
- | *
| |
- | *************************************************/
| |
- | display: inline;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav ul li a {
| |
- | /************************************************
| |
- | *
| |
- | * Navigation tabs
| |
- | *
| |
- | *************************************************/
| |
- | display: block;
| |
- | float: left;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow, .coda-slider-wrapper .coda-nav-right-arrow {
| |
- | /************************************************
| |
- | *
| |
- | * Graphical arrows
| |
- | *
| |
- | *************************************************/
| |
- | cursor: pointer;
| |
- | float: left;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left-arrow a, .coda-slider-wrapper .coda-nav-right-arrow a {
| |
- | /************************************************
| |
- | *
| |
- | * Graphical arrows
| |
- | *
| |
- | *************************************************/
| |
- | display: block;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
| |
- | /************************************************
| |
- | *
| |
- | * Html arrows
| |
- | *
| |
- | *************************************************/
| |
- | float: left;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
| |
- | /************************************************
| |
- | *
| |
- | * Html arrow styles
| |
- | *
| |
- | *************************************************/
| |
- | display: block;
| |
- | text-align: center;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-left-arrow {
| |
- | /************************************************
| |
- | *
| |
- | * Html and graphical arrow styles
| |
- | *
| |
- | *************************************************/
| |
- | clear: both;
| |
- | }
| |
- |
| |
- |
| |
- | </style>
| |
| | | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |