Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Lee leemark

View GitHub Profile
View gist:83571d9f8f0e3ad853a8
<div class="slideshow-class-goes-here">
<figure>
<img src="path/to/img" width="100%" />
<figcaption>Caption goes here</figcaption>
</figure>
<!-- more figures here as needed -->
</div>
View gist:19bafdb1abf8f6b4e147
<div class="bss-slides num1" tabindex="1" autofocus="autofocus">
<figure>
<img src="demo/img/medium.jpg" width="100%" /><figcaption>"Medium" by <a href="https://www.flickr.com/photos/thomashawk/14586158819/">Thomas Hawk</a>.</figcaption>
</figure>
<figure>
<img src="demo/img/colorado.jpg" width="100%" /><figcaption>"Colorado" by <a href="https://www.flickr.com/photos/stuckincustoms/88370744">Trey Ratcliff</a>.</figcaption>
</figure>
<figure>
<img src="demo/img/monte-vista.jpg" width="100%" /><figcaption>"Early Morning at the Monte Vista Wildlife Refuge, Colorado" by <a href="https://www.flickr.com/photos/davesoldano/8572429635">Dave Soldano</a>.</figcaption>
</figure>
View gist:479d4ecc4df38fba500c
<script>
makeBSS('.slideshow-class-goes-here');
</script>
View gist:a09d2726b5bfc92ea68c
<script src="demo/js/hammer.min.js"></script><!-- for swipe support on touch interfaces -->
<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
auto : {
speed : 3500,
pauseOnHover : true
},
fullScreen : false,
swipe : true
View gist:de90c78cb73673650a5a
<div class="bss-slides num2" tabindex="2">
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption>
</figure>
View gist:046103061c89cdf07e4a
<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
auto : false,
fullScreen : true,
swipe : false
};
makeBSS('.num2', opts);
</script>
View gist:c6e0f5c47acb7bf9be16
var opts = {
//auto-advancing slides? accepts boolean (true/false) or object
auto : {
// speed to advance slides at. accepts number of milliseconds
speed : 2500,
// pause advancing on mouseover? accepts boolean
pauseOnHover : true
},
// show fullscreen toggle? accepts boolean
fullScreen : true,
@leemark
leemark / form.html
Last active Dec 15, 2015
Some example form code - html5 input types, validation, etc.
View form.html
<form>
<!-- email input type, required - the form won't submit if empty -->
<input type="email" id="youremail" placeholder="you@example.com" required />
<label for="youremail">your email</label>
<!-- url input type, optional - form will submit if empty, but if you do enter a value it needs to conform to URL type validation -->
<input type="url" id="yourwebsite" placeholder="http://example.com" />
<label for="yourwebsite">your website</label>
@leemark
leemark / linktarget.html
Last active Dec 15, 2015
Style in-page link targets using :target. http://codepen.io/leemark/pen/ncLFr
View linktarget.html
<div class="container" id="main">
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="#lorem">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#invenitatis">In venenatis auctor eros sed rhoncus.</a></li>
<li><a href="#utinorci">Ut in orci enim.</a></li>
<li><a href="#donecdiam">Donec diam dolor.</a></li>
<li><a href="#donectortor">Donec tortor mi.</a></li>
</ul>