Fire JS Bin - FireSwipe

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/**
 * Position based scrollTo effect
 * @author Firejune<to@firejune.com>
 * @license MIT
 */
Effect.Scroll = Class.create(Effect.Base, {
  initialize: function(element) {
    var args = $A(arguments)
      , options = typeof args.last() == "object" ? args.last() : {};

this.element = $(element)
    this.scroll = {
        left: options.left || 0
      , top: options.top || 0
    };

this.start(options);
  },
  setup: function() {
    this.scrollLeft = this.element.scrollLeft;
    this.scrollTop = this.element.scrollTop;

if (this.options.offset) {
      this.scrollLeft += this.options.offset;
      this.scrollTop += this.options.offset;
    }

this.delta = {
        x: this.scroll.left - this.scrollLeft
      , y: this.scroll.top - this.scrollTop
    };
  },
  update: function(position) {
    this.element.scrollLeft = (this.scrollLeft + position * this.delta.x).round();
    this.element.scrollTop = (this.scrollY + position * this.delta.y).round();
  }
});

/**
 * Touchswipe Interface
 * @author Firejune<to@firejune.com>
 * @license MIT
 */
var TouchSwipe = Class.create({
  initialize: function(element, options) {
    var isMoving = false
      , frames = 0
      , items = []
      , scroll
      , startX
      , startY
      , distX
      , distY
      , startTime
      , direction
      , viewportWidth
      , viewportHeight
      , options = Object.extend({
          timeLimit: 500
        , stopEvents: false
        , axis: null
        , minX: document.viewport.getWidth() / 2
        , minY: document.viewport.getHeight() / 2
        , onSwipe: Prototype.emptyFunction
        , onCancel: Prototype.emptyFunction
      }, options);

element = $(element);

if (element || 'ontouchstart' in document.documentElement) {
      window.addEventListener('resize', onResize, false);
      element.addEventListener('touchstart', onTouchStart, false);
      element.addEventListener('touchend', onTouchEnd, false);
      element.addEventListener('gesturestart', cancelTouch, false);
      onResize();
    } else {
      return console.error('Not supported');
    }

element.setStyle({
      'overflow-y': 'hidden',
      'overflow-x': 'auto',
      'width': '100%',
      'height': '100%'
    });
    
    items = element.down().select('> *');
    items.first().style.marginLeft = viewportWidth + 'px';
    element.scrollLeft = viewportWidth;
    
    function onTouchStart(event) {
      if (event.touches.length != 1) return;
      if (options.stopEvents) event.preventDefault();
      console.log('onTouchStart');
      isMoving = true;
      startTime = new Date;
      distX = distY = direction = null;
      startX = event.touches[0].pageX;
      startY = event.touches[0].pageY;
      element.addEventListener('touchmove', onTouchMove, false);
    }
    
    function onTouchEnd(event) {
      if (distX && distY) {
        console.log('onTouchEnd');
        var diff = new Date - startTime;
        if (diff < options.timeLimit) {
          var bonus = (options.timeLimit - diff) / 50;
          distX *= bonus;
          distY *= bonus;
        }
        
        if (options.axis != 'y' && (distX).abs() >= options.minX && (options.axis == 'x' || (distY).abs() < options.minY)) {
          if (distX > 0) direction = 'left'; 
          else direction = 'right';
        } else
        if (options.axis != 'x' && (distY).abs() >= options.minY && (options.axis == 'y' || (distX).abs() < options.minX)) {
          if (distY > 0) direction = 'down'; 
          else direction = 'up';
        }
      }

if (!direction) cancelTouch(event);
      else {
        if (direction.match(/left|up/)) frames < items.length - 1 && frames++;
        else 0 < frames && frames--;
      }
      scrollTo(event);

element.removeEventListener('touchmove', onTouchMove);
      isMoving = false;
    }

function onTouchMove(event) {
      if (isMoving) {
        distX = startX - event.touches[0].pageX
        distY = startY - event.touches[0].pageY;
      }
    }

function cancelTouch(event) {
      options.onCancel(event);
    }

function onResize() {
      viewportWidth = document.viewport.getWidth();
      viewportHeight = document.viewport.getHeight();
    }
  }
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR" lang="ko-KR">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Apple Inc." />
	<meta name="viewport" content="width=1024" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />

<title>iPhone 5 Gallery</title>

<div id="main">
		<div class="content" id="content" data-hires="true">
			<div class="autogallery autogallery-slide-directional autogallery-slideshow-hero gallery flushleft flushright" data-hires="false" id="gallery-hero-videos">
				<div id="gallery-hero-videos-default" class="gallery-hero-videos-default">
					<div class="gallery-view" id="hero-gallery">
						
						<figure class="gallery-content gallery-hero" id="gallery-hero">
								<div class="image"></div>
								<h1 class="title">iPhone 5. iPhone 이래 가장 획기적인 iPhone.</h1>
						</figure>
						
						<figure class="gallery-content gallery-design" id="gallery-design">
								<div class="image"></div>
								<h1 class="title">더 얇고 가벼운 디자인. 더 좋아졌지만 더 슬림해졌습니다.</h1>
						</figure>
						<figure class="gallery-content gallery-display" id="gallery-display">
								<div class="image"></div>
								<h1 class="title">4형 Retina 디스플레이. 그냥 커진 것이 아닙니다. 딱 맞게 커졌습니다.</h1>
						</figure>
						<figure class="gallery-content gallery-wireless" id="gallery-wireless">
								<div class="image"></div>
								<h1 class="title">초고속 무선 네트워크. 빛처럼 빠른 속도로 콘텐츠를 검색, 다운로드, 스트리밍하세요.</h1>
						</figure>
						<figure class="gallery-content gallery-a6" id="gallery-a6">
								<div class="image"></div>
								<h1 class="title">A6 칩. 최대 두 배 빠른 성능 및 그래픽.</h1>
						</figure>
						<figure class="gallery-content gallery-camera" id="gallery-camera">
								<div class="image"></div>
								<h1 class="title">iSight 카메라. 당신이 사랑하는 카메라로 이제 파노라마를 찍어보세요.</h1>
						</figure>
						<figure class="gallery-content gallery-ios" id="gallery-ios">
								<div class="image"></div>
								<h1 class="title">iOS 6. 세계에서 가장 앞선 모바일 운영 체제.</h1>
						</figure>
					</div>
					<nav class="paddle-nav">
						<ul>
							<li><a class="arrow prev hero-gallery" href="#previous"><b>이전</b></a></li>
							<li><a class="arrow next hero-gallery" href="#next"><b>다음</b></a></li>
						</ul>
					</nav>
					<nav class="dot-nav"><ul><li>
						<a class="hero-gallery" href="#gallery-hero">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-design">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-display">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-wireless">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-a6">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-camera">갤러리: iPhone 5</a></li><li>
						<a class="hero-gallery" href="#gallery-ios">갤러리: iPhone 5</a></li>
					</ul></nav>
				</div>
			</div>
			
		</div>
	</div>

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }

/* LAYOUT */
html { background-color:#fff; }

.clear { clear: both; }
img { border: 0; }

/* dot-nav */
.dot-nav { width:100%; margin:0; padding:0; text-align:center; line-height:1px; }
.dot-nav li,
.dot-nav li a { display:-moz-inline-stack; display:inline-block; *display:inline; *zoom:1; }
.dot-nav li { position:relative; z-index:1; margin:0; width:13px; height:15px; overflow:hidden; }
.dot-nav li a { position:absolute; z-index:1; width:13px; height:45px; top:0; left:0; cursor:pointer; text-indent:-1000em; background:url(http://images.apple.com/global/elements/buttons/dots_08c.png) no-repeat 0 0; behavior:url(/global/scripts/lib/ie7pngfix.htc); }
.dot-nav li a:hover { top:-15px; }
.dot-nav li a.active { cursor:default; top:-30px; }

.dot-nav:nth-child(1n) li { width:10px; height:10px; padding:3px 2px 2px 2px; }
.dot-nav:nth-child(1n) li a { border-radius:5px; width:10px; height:10px; background:#e0e1e3;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
       -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
            box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
}
.dot-nav:nth-child(1n) li a:hover { top:0; background:#ccc;}
.dot-nav:nth-child(1n) li a.active { top:0; background:#08c;
    background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgb(126,198,234)),color-stop(24%,rgb(70,179,234)),color-stop(100%,rgb(3,135,201)));
    background:-webkit-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
    background:   -moz-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
    background:        linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
    -webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
       -moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
            box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
}

/* PRINT */
@media print {
	body, #main, #content { color: #000 !important; }
	a, a:link, a:visited { color: #000 !important; text-decoration:none !important; }
	#tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
	#main a.pdf, #main a.html, #main a.qt, #main a.ical, #main a.dl, #main a.dmg, #main a.zip, #main a.keynote, #main a.audio { padding-left: 0 !important; background-image: none !important; }
}

/* iPhone */
@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

/* Platterization
------------------------*/
html { background:#f2f2f2; width:100%; height:100%; }
body { min-height:100%; width:980px; margin:0 auto; padding:0 70px; position:relative; z-index:1; background:#fff; border:1px solid #d9d9d9; border-top:none; border-bottom:none; overflow-x:hidden; overflow-y:auto; *overflow-y:visible;
	-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);
	   -moz-box-shadow:0 0 4px rgba(0,0,0,.3);
	        box-shadow:0 0 4px rgba(0,0,0,.3);
}
body:nth-child(1n) { border:none; }
body:before { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

#main,
#main #content { position:static; padding:0; background:transparent; }
#main .content,
#main #content { border:none;
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
	        box-shadow:none;
	-webkit-border-radius:0;
	 -khtml-border-radius:0;
	   -moz-border-radius:0;
	        border-radius:0;
}

@media only screen and (max-width:1119px) {
	html { background:#fff; }
	body { width:980px; padding-left:22px; padding-right:22px;
		-webkit-box-shadow:none;
		   -moz-box-shadow:none;
		        box-shadow:none;
	}
}

@media only screen and (max-width:1023px) {
	body { overflow:auto; }
}

@media only screen and (max-device-width:768px) {
	body { width:1024px; padding-left:0; padding-right:0; }
	#main { overflow:hidden; width:980px; padding:0 22px; }
}

/* Site-wide Styles
------------------------*/
#main { margin:0 auto; position:static; }
#main .content { width:810px; margin:0 auto 18px; padding:60px 50px 32px; zoom:1; }
#main .content .content { width:auto; padding:0; }
.content:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

/* fonts */
.content { font-size:1.167em; line-height:1.5714em; word-spacing:-1px; } /* 14px/20px */
.content h1 { font-size:1.7142em; line-height:1.1666em; margin-bottom:10px; font-weight:normal; } /* 24px/28px */
.content h2 { font-size:1.2857em; line-height:1.3888em; margin-bottom:7px; } /* 18px/25px */
.content h3	{ font-size:1.1428em; line-height:1.25em; margin-bottom:7px; }/* 16px/20px */
.content h4 { font-size:1em; margin-bottom:7px; } /* 14px/20px */

.content h1 img,
.content h2 img { display:block; margin:0; }

.content .title,
.content .title h1,
.content .title h2 { line-height:1.2142em; font-weight:normal; }

.content .title { font-size:2em; margin-bottom:10px; }
.content .title h1,
.content .title h2 { font-size:1em; margin-bottom:0; }
.content .title h2 { color:#898989; }

.content .small { font-size:.8571em; line-height:1.5em; } /* 12px/18px */
.content .intro { font-size:1.2857em; line-height:1.45em; color:#8a8d99; font-weight:normal; } /* 18px/26px */
.content .intro sup { bottom:.75em; } /* 18px/26px */
.content .caption { color:#666; }

.content .hero h1 { margin-bottom:2px; }

/* layout */
.content .row { padding-top:50px; padding-bottom:32px; }

.content .column { *display:inline; }

.content .block { display:block; }
.content .inline { display:inline; }
.content .left { float:left; }
.content .right { float:right; }
.content .center { display:block; margin-right:auto; margin-left:auto; text-align:center; }

.content .flushpad,
.content .padright { padding-right:155px; }

.content .flushpad,
.content .padleft { padding-left:155px; }

.content .flushpad,
.content .flushright { margin-right:-155px; }

.content .flushpad,
.content .flushleft { margin-left:-155px; }

.content .flushpad,
.content .flushtop,
.content .flushbottom,
.content .flushright,
.content .flushleft,
.content .relative { *position:relative; *z-index:1; *zoom:1; }

/* links */
.content a { cursor:pointer; }
.content a.block { color:#000; }
.content a.wrap { text-decoration:none; }
.content a.wrap:hover span { text-decoration:underline; cursor:pointer; } /* investigate styles for 2 line .more links */

/* aesthetic */
.content .shadow { border:1px solid #ccc; -webkit-box-shadow:0 1px 4px rgba(0,0,0,.4); -moz-box-shadow:0 1px 4px rgba(0,0,0,.4); box-shadow:0 1px 4px rgba(0,0,0,.4); }
.content .inset { border:1px solid #ccc; -webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 4px rgba(0,0,0,.4); box-shadow:inset 0 1px 4px rgba(0,0,0,.4); }

.content .shadow:nth-child(1n),
.content .inset:nth-child(1n) { border:none; }
.content .gradient {
	background:#f2f2f2;
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));
	background:-moz-linear-gradient(top, #fff, #f2f2f2);
}

#content .row.divider-down,
#content .row.divider-up { background:no-repeat 50% 0; }
#content .row.divider-down { background-image:url(http://images.apple.com/v/iphone/c/images/divider_down.png); padding-top:50px; }
#content .row.divider-up { background-image:url(http://images.apple.com/v/iphone/c/images/divider_up.png); background-position:50% 100%; padding-bottom:37px; }
#content .row.divider-down.divider-up { background:url(http://images.apple.com/v/iphone/c/images/divider_down.png) no-repeat 50% 0; *border-bottom:1px solid #e2e2e2; background:url(http://images.apple.com/v/iphone/c/images/divider_down.png) no-repeat 50% 0, url(http://images.apple.com/v/iphone/c/images/divider_up.png) no-repeat 50% 100%; }
#content .gradient-divider-up { background:url(http://images.apple.com/v/iphone/c/images/buystrip_gradient_up.png) no-repeat 50% 100%; }

@media only screen and (-webkit-min-device-pixel-ratio:1.5), 
	only screen and (min-device-pixel-ratio:1.5) {
		#content .row.divider-down.divider-up { background:url(http://images.apple.com/v/iphone/c/images/divider_down_2x.png) no-repeat 50% 0, url(http://images.apple.com/v/iphone/c/images/divider_up_2x.png) no-repeat 50% 100%; }
}

/* Galleries
------------------------*/
.content .gallery { *position:static; }
.gallery:after,
.gallery-view:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

.gallery .gallery-view,
.gallery .gallery-content { width:100%; }
.gallery .gallery-content { display:none; }
.gallery .gallery-view .gallery-content { display:block; }

.gallery-view { position:relative; z-index:1; }
.gallery-view .gallery-video { position:absolute; z-index:1; width:848px; height:480px; padding-top:50px; margin-top:-325px; margin-left:-424px; top:50%; left:50%; }
.gallery-view .gallery-video .moviePanel { width:848px; height:480px; }
.gallery-view .gallery-video .close { position:absolute; z-index:1; top:8px; left:-35px; width:29px; height:29px; text-indent:-1000em; overflow:hidden; background:url(http://images.apple.com/v/iphone/c/images/button_close.png) no-repeat 0 0; _behavior:url(/global/scripts/lib/iepngfix.htc); }

Pop out