michaelwhyte

var fullscreenAvailable = false;
var btn01 = document.getElementById('btn-01');

// Test to see if
// full-screen is available
if(
  document.fullscreenEnabled || 
  document.webkitFullscreenEnabled || 
  document.mozFullScreenEnabled ||
  document.msFullscreenEnabled

michaelwhyte

var btn02 = document.getElementById('btn-02');

// Exit full-screen mode when btn02
// is clicked
btn02.addEventListener('click', function(){
	
    exitFullscreen();	
	
}, false);

michaelwhyte

element.requestFullscreen();

michaelwhyte

:-ms-fullscreen {
    width: auto;
    height: auto;
    margin: auto;
}

michaelwhyte

<div class="img-02">
    <img src="birds-on-jericho-beach.jpg" width="320" height="320" alt=""  />
</div>

michaelwhyte

var img02 = document.querySelector('.img-02');

img01.addEventListener('click', function(){
	
    if(fullscreenAvailable){
        launchFullscreen(img01);	
    }else{
        alert('Sorry, fullscreen not available...');	  
    }	

michaelwhyte

.img-02:-webkit-full-screen img {
    display: block;
    margin: 0; /* overide pre-existing margin styles */	
}

.img-02:-moz-full-screen img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

michaelwhyte

# OS generated files #
######################

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

michaelwhyte

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);

michaelwhyte

// If you have experience with animation in other media, CSS
// animation’s percentage-based keyframe syntax can feel pretty
// alien, especially if you want to be very precise about timing.
// This Sass function lets you forget about percentages and
// express keyframes in terms of actual frames:

@function f($frame) {
	@return percentage( $frame / $totalframes )
}