Baz slideshow concept

gistfile1.js

(function() {
  if ( ! $(document.body).is('.biz-details') ) {
    return false;
  }
  
  var current_set = 0;
  var num_sets;
  var photos = [];
  var photo_sets = [];
  var timeout_id;
  var add_photos_url = $('#photo-details-header-actions a').attr('href');
  var url_re = /biz_user_photos\/([\w\-]+)\/upload/;
  var biz_id = $('.biz-page-actions .ybtn-group a:first-child').attr('href').match(url_re)[1];
  var SET_TYPE_NATURAL = 'natural';
  var SET_TYPE_WEIRD = 'weird';
  var confirm_message = 'Press OK to change 3 photos at a time, or cancel to change 1 at a time.';
  var set_type = window.confirm(confirm_message) ? SET_TYPE_NATURAL : SET_TYPE_WEIRD;
  var $showcase = $('.showcase');
 
  // convert a photo URI to a different size
  function convertPhotoURI(photo_uri, to_size) {
   var re = /\/(o|l|m|s|xs|ls|ms|ss|xss|30s|60s|120).jpg/
   return photo_uri.replace(re, '/' + to_size + '.jpg')
  }
  
  $showcase.append('<div class="loading-slideshow">Loading slideshow…</div>');
 
  // Get photos from prod endpoint
  $.get(
    '/biz_photos/' + biz_id + '/slice/0/90', 
    function(data) {
      var get_set;
      var preload = [];

      photos = $.map(data.photo_slice, function(n, i) {
        return convertPhotoURI(n.uri, 'ls');
      });
      
      // Preload images.
      for (var i = 0; i < photos.length; i++) {
        preload[i] = new Image();
        preload[i].src = photos[i];
      }
      
      if (set_type == SET_TYPE_NATURAL) {
        num_sets = Math.floor(photos.length / 3);
        get_set = function(i) {
          return [photos[i * 3 + 1], photos[i * 3], photos[i * 3 + 2]];
        };
      } else if (set_type == SET_TYPE_WEIRD) {
        num_sets = photos.length - 2;
        get_set = function(i) {
          if (i == 0) {
            return [photos[i + 2], photos[i], photos[i + 1]]; // 2, 0, 1
          } else {
            return [photos[i - 1], photos[i], photos[i + 1]]; // 0, 1, 2
          }
        };
      }
      
      for (var i = 0; i < num_sets; i++) {
        photo_sets.push(get_set(i));
      }

      startSlideshow();
    }
  );
  
  function startSlideshow() {
    $('<a class="nav nav-left"></a>').appendTo('.showcase').click(function() {
      clearTimeout(timeout_id);
      $showcase.removeClass('advance');
      advanceSet(-1);
    });
    $('<a class="nav nav-right"></a>').appendTo('.showcase').click(function() {
      clearTimeout(timeout_id);
      if ( $showcase.is('.advance') ) {
        $showcase.removeClass('advance');
        advanceSet(2);
      } else {
        advanceSet(1);
      }
    });
    $('.showcase .photo-img').each(function() {
      var $this = $(this);
      var $clone = $this.clone().addClass('next');
      $this.addClass('current').after($clone);
    });
    advanceSet(0);
    $('.loading-slideshow').text('Slideshow loaded!').fadeOut();
    setInterval(function() {
      if ( $showcase.is(':hover') ) {
        return;
      } else {
        $showcase.addClass('advance');
        timeout_id = setTimeout(function() {
          advanceSet(1);
          $showcase.removeClass('advance');
        }, 4000);
      }
    }, 8000);
  }
  
  function advanceSet(steps) {
    current_set = Math.max(0, (current_set + steps) % num_sets);
    // console.log(current_set);
    for (var i = 0; i < 3; i++) {
      var current_src = photo_sets[current_set][i];
      var next_src = photo_sets[(current_set + 1) % num_sets][i];
      var $container = $('.photo-' + (i + 1));
      // $container.css('background', 'url(' + current_src + ')');
      $('.current', $container).attr('src', current_src);
      $('.next', $container).attr('src', next_src);
    }
  }
})();

gistfile2.css

.showcase {
  -webkit-user-select: none;
}

.showcase-photos .photo {
  overflow: hidden;
  width: 250px;
  height: 250px;
  background: #555;
}

.showcase-photos .photo:before {
  display: none;
}

.showcase-photos .photo-img {
  position: absolute;
  top: 0;
  -webkit-transform-origin: bottom;
}

.advance .showcase-photos .photo-img {
  transition: all 1.7s ease-in-out;
}

.showcase-photos .photo-img.current,
.advance .showcase-photos .photo-img.next {
  -webkit-transform: translateZ(0);
  opacity: 1;
}

.advance .showcase-photos .photo-img.current {
  -webkit-transform: translateZ(0) translateX(-5px) rotate(-1deg);
  opacity: 0;
}

.showcase-photos .photo-img.next {
  -webkit-transform: translateZ(0) translateX(5px) rotate(1deg);
  opacity: 0;
}

.showcase .nav {
  cursor: pointer;
  -webkit-transform: translateZ(2px);
  z-index: 3;
  display: block;
  position: absolute;
  top: 68px;
  width: 32px;
  height: 45px;
  padding: 20px 4px;
  opacity: 0;
  transition: all 0.2s ease;
}

.showcase .nav-left {
  left: -32px;
  background: url(http://f.cl.ly/items/3a3j1A0v0I0N3x151m2x/nav-left.png) no-repeat center;
}

.showcase .nav-right {
  right: -32px;
  background: url(http://f.cl.ly/items/3W1i1e2X1X0D1X392U2l/nav-right.png) no-repeat center;
}

.showcase:hover .nav-left {
  left: 0;
  opacity: 0.7;
}

.showcase:hover .nav-right {
  right: 0;
  opacity: 0.7;
}

.loading-slideshow {
  z-index: 9999;
  position: absolute;
  top: 83px;
  padding: 18px 0;
  background: rgba(0,0,0,.75);
  color: white;
  text-align: center;
  border-radius: 15px;
  left: 50%;
  font-size: 22px;
  width: 300px;
  margin-left: -150px;
}

gistfile3.html

Drag me into the bookmarks bar:<br>
<a href="javascript:(function(){var gist_id='6987563';var css=[];var js=[];var applyCSS=function(){for(var x in css){var style=document.createElement('style');style.innerHTML=css[x];document.head.appendChild(style);}};var applyJS=function(){for(var x in js){var script=document.createElement('script');script.innerHTML=js[x];document.body.appendChild(script);}};var xhr=new XMLHttpRequest();xhr.open('GET','https://api.github.com/gists/'+gist_id,true);xhr.onload=function(){var data=JSON.parse(this.responseText);for(var file in data.files){if(data.files[file].language=='CSS'){css.push(data.files[file].content);}if(data.files[file].language=='JavaScript'){js.push(data.files[file].content);}}applyCSS();applyJS();};xhr.onerror=function(){console.log('Failed to load Gist: '+request.gist);};xhr.send();}());">Baz slideshow</a>