December 7, 2014 21:34 · Dec 7, 2014
diff --git a/Polygon-Image-Slider.markdown b/Polygon-Image-Slider.markdown
@@ -0,0 +1,7 @@
+Polygon Image Slider
+--------------------
+
+
+A [Pen](http://codepen.io/psychokiller/pen/ILDow) by [Berkay](http://codepen.io/psychokiller) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/psychokiller/pen/ILDow/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<div class="prev"></div>
+<div class="next"></div>
+<div class=polygon>  
+  <div class="spinner">
+	<div class="side passive">
+      <img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
+    </div>
+        <div class="side">
+      <img src="http://ingress.xanderhyde.com/downloads/ingress_R_1920x1200_by_Xanderhyde.jpg" alt="" />
+    </div>
+	<div class="side">
+      <img src="https://lh5.googleusercontent.com/-adX5umUE_YI/UO71unG82DI/AAAAAAAADL8/f-1roZ0shw8/w800-h800/ingress.JPG" alt="" />
+    </div>
+    <div class="side">
+      <img src="http://4.bp.blogspot.com/-zAxaxgcy2n4/UMNscCDMUyI/AAAAAAAABn4/zxg5rG8Iv9g/s1600/Portal.jpg" alt="" />
+    </div>
+    <div class="side">
+      <img src="https://lh4.googleusercontent.com/--X5FcfA1uAQ/UVQsl81sNbI/AAAAAAAAAEM/uZm1OpUQxOk/w500/Ingress.jpg" alt="" />
+    </div>
+    <div class="side">
+      <img src="https://lh5.googleusercontent.com/-QmbNU7ToUdQ/UN_WP3RmJwI/AAAAAAAAG3M/soNQKlaawsc/w500/Ingress-Zelda.jpg" alt="" />
+    </div>
+    <div class="side">
+      <img src="http://ingressportal.com/w/wp-content/uploads/2012/12/wayne.ingress.jpg" alt="" />
+    </div>
+    <div class="side">
+      <img src="https://lh6.googleusercontent.com/-G5vp9mq7CJI/UYwq7Yk0BvI/AAAAAAAAHvc/CQgee2a_Yw8/w800-h800/xmp_01.jpg" alt="" />
+    </div>
+  </div>
+</div>
+<div class="imagelist"></div>
+<div class="info"></div>
diff --git a/script.js b/script.js
@@ -0,0 +1,116 @@
+$(function(){
+  setImagePolygon();
+
+  var imagelist = $('.side');
+  imagelist.each(function(i,e){
+    var cb = $(document.createElement('input'));
+    cb.attr('type','checkbox')
+    .attr('data-index',i);
+    if($(e).hasClass('passive'))
+      cb.removeAttr('checked');
+    else
+      cb.attr('checked','checked');
+
+    $('.imagelist').append(cb).append('image' + (i + 1));
+  });
+});
+
+var rotation;
+var angle;
+
+function setImagePolygon(){
+  var images = $('.side:not(.passive)');
+  var startAngle = 0;
+  var w = images.width();
+  var n = images.length;
+  angle = 360 / images.length;
+  var r = w / (2 * Math.sin((angle/2)*Math.PI/180));
+  var h = Math.sqrt(Math.pow(r,2) - (Math.pow(w/2,2)));
+  rotation = 0;
+  var even = (images.length % 2 === 0);
+
+  $('.info').html('');
+  logInfo('h= ' +h);
+  logInfo('n=' + n);
+  logInfo('even=' + even);
+  logInfo('r=' + r);
+  logInfo('angle=' + angle);
+
+  if(n < 3){
+      images.css('transform','rotateY(0deg) translateZ(0px)');
+  }
+  else{
+    images.each(function(i,e){
+      if(i===0){
+        $(e).css('transform','translateZ('+ h +'px)');
+      }else
+        $(e).css('transform','rotateY('+startAngle+'deg) translateZ('+ h +'px)');
+      startAngle= startAngle+angle; 
+    });
+  }
+}
+$('.imagelist').on('change','input',function(){
+  if(this.checked)
+    $($('.side')[$(this).data('index')]).removeClass('passive');
+  else
+    $($('.side')[$(this).data('index')]).addClass('passive');
+
+  setImagePolygon();
+});
+
+function logInfo(i){
+  $('.info').append('<br/>'+i);
+}
+
+function rotate(d){
+  var dim = d > 0 ? 1:-1;
+
+  var newRotation = (rotation + (angle * dim));
+
+  $('.spinner').css('transform','rotateY('+ newRotation + 'deg)');
+  rotation = newRotation;
+}
+
+$('.next').on('click',function(e){
+  rotate(1);
+});
+
+$('.prev').on('click',function(e){
+  rotate(-1);
+});
+/*
+var touchX,touchY,move;
+
+//$('.polygon').on({ 'touchstart' : function(e){ console.log(e); } });
+$( ".polygon" )[0].addEventListener('touchstart', function(e) {
+    e.preventDefault();
+  if($(e.target).parent().hasClass('side')){
+    var touch = e.touches[0];
+    touchX = touch.pageX;
+    touchY = touch.pageY;
+  }
+}, false);
+//$( ".polygon" ).mousemove(function( e ) {console.log(e);});
+
+$( ".polygon" )[0].addEventListener('touchmove', function(e) {
+    e.preventDefault();
+  var touch = e.touches[0];
+  if($(e.target).parent().hasClass('side') && touchX != null){
+    move = (touch.pageX - touchX);
+    //touchX = touch.pageX;
+    console.log(move);
+    if(move > (r / 2))
+      rotate(1);
+    else if(move < (-1 * w / 2))
+      rotate(-1);
+    else
+      $('.spinner').css('transform','rotateY('+ move + 'deg)');
+  }
+}, false);
+
+$( ".polygon" )[0].addEventListener('touchend', function(e) {
+    e.preventDefault();
+  if(move)
+    touchX = null;
+    touchY = null;
+}, false);*/
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+.info{position:relative;top:150px;left:10px;z-index:3;}
+.polygon{
+-webkit-perspective: 800;
+-moz-perspective: 800px;
+-ms-perspective: 800;
+perspective: 800;
+-webkit-perspective-origin: 50% 0;
+-moz-perspective-origin: 50% 0;
+-ms-perspective-origin: 50% 0;
+perspective-origin: 50% 0;
+margin:50px auto;
+width:320px;height:300px;
+}
+
+.side{background-color:black;
+  width:320px;
+  height:240px;
+  overflow:hidden;
+  position:absolute;
+}
+.passive{display:none;}
+.spinner{
+-webkit-transform-style: preserve-3d;
+transform-style: preserve-3d;
+-webkit-transform-origin: 50% 0 0;
+-moz-transform-origin: 50% 0 0;
+-ms-transform-origin: 50% 0 0;
+-o-transform-origin: 50% 0 0;
+transform-origin: 50% 0 0;
+position:relative;
+transition:all 1s ease-in;
+}
+
+.side img{position: absolute;
+top: -9999px;
+bottom: -9999px;
+left: -9999px;
+right: -9999px;
+margin: auto;
+opacity:0.7;
+width:320px;
+height:240px;
+}
+
+.next,.prev{position:absolute;width:50%;height:100%;top:0;cursor:pointer;opacity:0.5;z-index: 2;}
+.next{right:0;}
+.prev{left:0;}
+
+.imagelist{position:relative;background-color:#fff;z-index:2;top:150px;left:10px;right:0;margin:auto;}
No results found