leemark

a-frame clock
-------------
A simple example of how to build a reusable component in A-frame.

A [Pen](http://codepen.io/leemark/pen/KmKoPy) by [Mark Lee](http://codepen.io/leemark) on [CodePen](http://codepen.io/).

[License](http://codepen.io/leemark/pen/KmKoPy/license).

leemark

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

leemark

{
	"origin": ["#positives# :)"],
	"positives" : ["You are the hero of your own story. If you don't like your story, change it! ",
	"Life is not about the end result, it's about the journey. Build. Create. Enjoy.",
	"The worst-case scenario is never as bad, or as likely, as you think.",
	"Struggle, turmoil, and failure all dissolve as soon as they are in the past. They're gone.",
	"Challenges are the universe's way of indicating that your goals are worth pursuing.",
	"Your time is limited, so don't waste it living someone else's life, pursuing someone else's dream.",
	"Don't let other people's noise drown out your own voice.",
	"Fear is just a feeling, embrace the feeling, experience it, accept it, then push through it. ",

leemark

Location and path of the ISS

International Space Station: http://www.nasa.gov/mission_pages/station/main/

A Pen by Mark Lee on CodePen.

License.

leemark

<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
    auto : false,
    fullScreen : true,
    swipe : false
};
makeBSS('.num2', opts);
</script>

leemark

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

leemark

<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

leemark

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

leemark

<script>
  makeBSS('.slideshow-class-goes-here');
</script>

leemark

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