Slideshow in a button.

index.html

<div class="one" id="one">
  
 <div class="stage">  
  <div class="spinner">
  
  <iframe width="100%" height="500" src="https://landsurveyorsunited.com/activation" frameborder="0" allowfullscreen></iframe>
  
  
  
  
</div></div><div id="close" class="spinnerwiggle"><p>X</p></div>  

script.js

// INTERFACE ----------------------------------

// Primary Button

$('#one').click(function(){
  $('#one.one').addClass('active');
  $('.stage').addClass('display');
  $('#close').addClass('showme');
  $('#close').css({'display':'inline-block'});
});

// UI Reset (click on background)

//('body').click(function(){
// if($('body #one.active').length) $('body #one.active').removeClass('active');
//});

// UI Buttons

//$('figcaption').click(function(){
//  $('.description').toggleClass('showme');
//});

$('figcaption').on('click', function(e) {
    e.preventDefault();
    $('figure.show .description').toggleClass('showme');
});

$('#close').on('click', function(e) {
    e.preventDefault();
    $('#one.one').removeClass('active');
    $('.stage').removeClass('display');
    $('#close').removeClass('showme');
    $('#close').css({'display':'none'});
});

$('#button1').click(
    function(){
        $('#myEltId span').css({
            'border-width' : '0',
            'border-style' : 'none',
            'border-color' : 'transparent'
        });
    });

$('#fullscreen').click(function(){
  $('#one').toggleClass('fullscreen');
});

$("li").bind('click', function(){
   // remove the active class if it's there
   if($("li.active").length) $("li.active").removeClass('active');
   // add the active class to the clicked element
   $(this).addClass('active');
}); 

  

// FONT ----------------------------------

// headline fontsize reset (add set on width - use .live()

//$(".spinner h1").css({
//    fontSize: 20
//}); 
//
//$(".spinner h1").animate({'font-size':width.perc+'%'});

// SLIDESHOW ----------------------------------

var counter = 0, // to keep track of current slide
    $items = $('#one .diy-slideshow figure'), // a collection of all of the slides, caching for performance  
    numItems = $items.length; // total number of slides

// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function(){
    var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show  
   
  $items.removeClass('show'); // remove .show from whichever element currently has it
  $items.eq(itemToShow).addClass('show');    
};

// add click events to prev & next buttons 
$('.next').on('click', function(){
    counter++;
    showCurrent(); 
});
$('.prev').on('click', function(){
    counter--;
    showCurrent(); 
});

// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
if('ontouchstart' in window){
  $('.diy-slideshow').swipe({
    swipeLeft:function() {
      counter++;
      showCurrent(); 
    },
    swipeRight:function() {
      counter--;
      showCurrent(); 
    }
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

slideshow-in-a-button.markdown

Slideshow in a button.

Combined some pens (from Harris Carney and Lee Mark) to make.. a slideshow in a button. Uses some heavy css3, some light jQuery and some messy html. It works fine in desktop browsers, though :D

A Pen by JFarrow on CodePen.

License.

style.scss

@import "compass/css3";

// Config ----------------------------------

$spinner-size: 1600px;                 // 200px
$spinner-thickness: 20%;              // 4px
$spinner-speed: 3.2s;                 // 1.2s
$spinner-3d: true;                    // true
$spinner-loops: infinite;             // infinite (be careful, save the batteries!)

// Page ----------------------------------

body {  
  background:  #111;
  background:  hsl(200,30%,6%);
  background: radial-gradient( hsl(200,40%,20%), hsl(200,30%,6%)) ; 
  
  display: flex;
  padding: 50px;
  box-sizing: border-box;
  margin: 0;  background-clip:border-box;
}

html, body { height: 100%;overflow:hidden; }
@import url(https://fonts.googleapis.com/css?family=Supermercado+One);
.spinner h1 {
  margin:auto;font-size:80px; 
  width:100%;height:calc(100%);
  text-align:center; 
  top: 0%;
  left: -100%;
  margin: auto;
  padding-right:5%;  background: rgba(255,255,255,1);
  -webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1)  90% );
      transform-origin: 50% 55%;
      transform: perspective($spinner-size) rotateX(-6deg);  
 transform: perspective($spinner-size) rotateX(-6deg);
animation: spinner-wiggle $spinner-speed $spinner-loops;
     -webkit-transition: width 2s, box-shadow 3s, 
      border 3s, background-color 4s, height 2s, border-radius 2s;
      -moz-transition: width 2s, box-shadow 3s, 
      border 3s, background-color 4s, height 2s, border-radius 2s;
      -o-transition: width 2s, box-shadow 3s, border 3s, 
      background-color 4s, height 2s, border-radius 2s;
      -ms-transition: width 2s, box-shadow 3s, border 3s, 
      background-color 4s, height 2s, border-radius 2s;
      transition: width 2s, box-shadow 3s, border 3s, 
      background-color 4s, height 2s, border-radius 2s;
 }

body:hover .active {
background: rgba(100,100,100,1);
border-color:rgba(100,100,100,0.5);
box-shadow:   
    0 2px 35px 15px rgba(0,0,0,0.3), 
    0 12px 15px 15px rgba(0,0,0,0.4),  
    0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
    inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3), 
    inset 0 0 50px 0px rgba(0,0,0,0.4);  
}
body:hover .active h1 {opacity:1;
  //animation-delay: $spinner-speed * 1.55;
}
body:hover .active:hover h1:hover {opacity:1;}
body:hover .active:hover h1:hover {
  -webkit-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -moz-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -o-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -ms-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  
}

.one, .one:hover, 
.display 
.spinner h1:hover, 
.display .spinner h1 {
  -webkit-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -moz-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -o-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -ms-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  
}
.one {max-width:1600px !important;
  position: absolute;  margin: auto;
  top: 0;  left: 0;  right: 0;  bottom: 0;  width: 50px;  height: 50px;
  background-color: #4A8ACC;  border: 0px solid #4A8ACC;
  border-radius:50%;  cursor: pointer;
  box-shadow:   
    0 4px 30px 10px rgba(0,0,0,0.3), 
    0 12px 40px 10px rgba(0,0,0,0.4),  
    0 -4px 30px 5px rgba(64,128,180,0.9),//#4A8ACC,
    inset 0 24px 10px 10px rgba(0,0,0,0.1), 
    inset 0 0 22px -2px rgba(0,0,0,0.4);
 
  background-clip:border-box;
}
.one.active:hover {
  box-shadow:   
    0 2px 35px 15px rgba(0,0,0,0.3), 
    0 12px 15px 15px rgba(0,0,0,0.4),  
    0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
    inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3), 
    inset 0 0 50px 0px rgba(0,0,0,0.4);
}

.one:hover {
  width: 200px; height:200px;
  border: 0px solid #FF9147;
  background-color:#FF9147;
  box-shadow:    
   0 20px 30px 15px rgba(128,64,40,0.1), 
   0 60px 30px 0px rgba(0,0,0,0.3),    
   0 0px 30px 10px rgba(150,74,60,0.9), 
   inset 0 24px 18px -10px rgba(128,64,40,0.5), 
   inset 0 0 22px -2px rgba(0,0,0,0.4);
   border-radius:50%;
}

body .active {
  width: 90%; height:90%;
  border: 0px solid #4A8ACC;
  background-color: #4A8ACC;
   border-radius:50px;
   -webkit-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s;
  -moz-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -o-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
  -ms-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s;
  transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s;
}

body:hover .active:hover {
  width: 90%; height:90%;
  border: 0px solid #4A8ACC;
  background-color: #4A8ACC;
  border-radius:50px;
   box-shadow:   
    0 2px 35px 15px rgba(0,0,0,0.3), 
    0 12px 15px 15px rgba(0,0,0,0.4),  
    0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
    inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3), 
    inset 0 0 50px 0px rgba(0,0,0,0.4);
}
.one .stage{ 
  width: 100%; height:100%;
  border:0px solid #4A8ACC;// #FF9147;
  background-color:transparent;opacity:0;
  border-radius:inherit;display:none;
}

.stage.display{
  width: 100%; height:100%;
  border:0px solid #4A8ACC;
  background-color:transparent;opacity:1;
  border-radius:inherit;display:inline-block;

}


// Spinner ----------------------------------
.one .spinner {max-width:1600px !important;
  opacity:0.5;
  -webkit-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -moz-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -o-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -ms-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;}

.stage.display .spinner:hover {opacity:1;}
.stage.display .spinner {max-width:1600px !important;
  opacity:0.5;
  -webkit-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -moz-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -o-transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  -ms-transition: width 2s, box-shadow 3s, border 3s,
    background-color 4s, height 2s, border-radius 2s opacity 2s;
  transition: width 2s, box-shadow 3s, border 3s, 
    background-color 4s, height 2s, border-radius 2s opacity 2s;}

.spinner {
  background: rgba(255,255,255,0.9);
  position: absolute;left:5%;top:0%;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: calc(90%);
  height: calc(95%);
  border-radius: $spinner-thickness/1.9;
  //border: $spinner-thickness*20 solid hsla(0,100%,100%,.5);

  @if ($spinner-3d) {
    -webkit-mask: linear-gradient(rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0.1) 101%) ;
    transform-origin: 50% 50%;
    transform: perspective($spinner-size/1.1) rotateX(6deg);
    animation: spinner-wiggle $spinner-speed $spinner-loops;
    }
   -webkit-transition: width 2s, box-shadow 3s, border 3s,
           background-color 4s, height 2s, border-radius 2s;
   -moz-transition: width 2s, box-shadow 3s, border 3s, 
           background-color 4s, height 2s, border-radius 2s;
    -o-transition: width 2s, box-shadow 3s, border 3s, 
           background-color 4s, height 2s, border-radius 2s;
   -ms-transition: width 2s, box-shadow 3s, border 3s,
           background-color 4s, height 2s, border-radius 2s;
        transition: width 2s, box-shadow 3s, border 3s, 
           background-color 4s, height 2s, border-radius 2s;
}

.display .spinner h1  {float:left;margin-top:0%;border-radius:50px;
}
.display .spinner h1:hover {
  background: rgba(255,255,255,1);

}




// keyframes ----------------------------------

@keyframes spinner-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinner-fade {
  0% { opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes fadeout {

  100% { opacity: 0; }
}
@keyframes fadein {

  100% { opacity: 1; }
}

@keyframes spinner-wiggle {
  30% { transform: perspective($spinner-size) rotateX(10deg); }
  40% { transform: perspective($spinner-size) rotateX(7deg); }
  50% { transform: perspective($spinner-size) rotateX(10deg); }
  60% { transform: perspective($spinner-size) rotateX(8deg); }
}


// JUNK EFFECTS FOR LATER!  ----------------------------------

  //box-sizing: border-box;
  //background-clip:padding-box;
  //border-radius: 75% $spinner-thickness/1.2%;
  //border: $spinner-thickness*20 solid hsla(0,0%,100%,.5);

// for the h1:hover --
  //position: absolute;
  //margin: auto;
  //box-sizing: border-box;
  //background-clip: padding-box;
  //width: $spinner-size*1;
  //height: $spinner-size*1;
  //border-radius: 100px; //$spinner-thickness/2.2;
  //border: $spinner-thickness/0.5 solid hsla(0,0%,100%,.1);
  //@if ($spinner-3d) {
  // mask smoothens out the anti-aliasing artifacts in the back. 
  // -webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1)  90% );
  // transform-origin: 50% 50%;
  //  transform: perspective($spinner-size) rotateX(66deg);
  // }
  //  animation: spinner-spin $spinner-speed cubic-bezier(.6,.2,0,.8) $spinner-loops,
  //             spinner-fade $spinner-speed linear $spinner-loops,
  //             spinner-wiggle $spinner-speed $spinner-loops;

.diy-slideshow{
  position: relative;
  display: block;
  overflow: hidden;z-index:1000;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;height:100%;
}
figcaption{
  position: relative;
  font-family: sans-serif;
  font-size: .8em;
  top: -5em;
  bottom: 2em;
  padding: .5em; margin-right:2em;
  color: #fff;
  background: rgba(0,0,0, .75);
  border-radius: 8px;
  text-align:right;
  width:Auto;
  float:right;
  opacity:0.5;
  z-index:1001;
}
figcaption a{
  color: #fff;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;z-index:1000;
}
.next:hover, .prev:hover, figcaption:hover, #close:hover {
  cursor: pointer;
  opacity: 1 !important;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;z-index:1000;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;z-index:1000;
}
p, h2{
  margin: 10px 20px;
  color: #fff;   
  text-shadow:  0 5px 6px rgba(0,0,0,0.3),
    					  0 2px  3px  rgba(0,0,0,.9);
}
.description h2 { // mart additions
  color:white;
  margin-top:5%;
  padding: .5em; 
  margin-right:2em;
  padding-left:0em;
  font-size:4em;
  font-family:'Supermercado One';
  text-shadow:   0 1px 0 #ccc,
	               0 2px 0 #bbb,
	               0 3px 0 #aaa,
	               0 4px 0 #999,
	               0 5px 0 #888,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);

}
a{color:#eef;}

.description {
  position:absolute;
  top:-10%;left:0;right:0;bottom:0;
  padding-left:2em;padding-right:2em;
  display:none;
  opacity:0 !important;overflow:visible; height:100%;
}
.showme {display:block;opacity:1 !important;}
#close.showme {display:block;opacity:0.5 !important;}
#close.showme:hover {opacity:1 !important;}
#close, .close{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  top: 5px;
  left:0em;
  right:0em;
  bottom: 0em;
  padding: .1em; margin-left:5px;margin-top:5px;
  color: #fff;
  background: rgba(0,0,0, .75);
  border-radius: 50%;
  text-align:right;
  width:32px;height:32px;
 
  opacity:0;z-index:2001;
  -webkit-mask: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,1)  90% );
}

#close p, .close p {margin-left:1em;margin-top:0.6em;}