feat: add photos page

YangPengFe1 · Nov 7, 2019 · 70b0213 · 70b0213
1 parent 2bc364e
commit 70b0213
Show file tree

Hide file tree

Showing 26 changed files with 482 additions and 7 deletions.
diff --git a/html/photos.html b/html/photos.html
@@ -0,0 +1,56 @@
+<!doctype html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="icon" href="../bitbug_favicon.ico" type="image/x-icon">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="author" content="Marcin Dziewulski for Codrops" />
+  <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
+  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
+  <link href="../style/photos.css" rel="stylesheet" type="text/css" />
+  <title>YOU NEED A DOCTOR</title>
+</head>
+
+<body>
+  <div id="portfolio">
+    <div id="background"></div>
+    <div class="arrows">
+      <a href="#" class="up">Up</a>
+      <a href="#" class="down">Down</a>
+      <a href="#" class="prev">Previous</a>
+      <a href="#" class="next">Next</a>
+    </div>
+    <div class="gallery">
+      <div class="inside">
+        <div class="item">
+          <div><img src="../img/photos/1.jpg" alt="image1" /></div>
+          <div><img src="../img/photos/2.jpg" alt="image2" /></div>
+          <div><img src="../img/photos/3.jpg" alt="image3" /></div>
+        </div>
+        <div class="item">
+          <div><img src="../img/photos/4.jpg" alt="image4" /></div>
+          <div><img src="../img/photos/5.jpg" alt="image5" /></div>
+        </div>
+        <div class="item">
+          <div><img src="../img/photos/6.jpg" alt="image6" /></div>
+          <div><img src="../img/photos/7.jpg" alt="image7" /></div>
+          <div><img src="../img/photos/8.jpg" alt="image8" /></div>
+          <div><img src="../img/photos/9.jpg" alt="image9" /></div>
+          <div><img src="../img/photos/10.jpg" alt="image10" /></div>
+          <div><img src="../img/photos/11.jpg" alt="image11" /></div>
+        </div>
+        <div class="item">
+          <div><img src="../img/photos/12.jpg" alt="image12" /></div>
+          <div><img src="../img/photos/13.jpg" alt="image13" /></div>
+          <div><img src="../img/photos/14.jpg" alt="image14" /></div>
+          <div><img src="../img/photos/15.jpg" alt="image15" /></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script src="../js/photos/jquery.js" type="text/javascript"></script>
+<script src="../js/photos/portfolio.js" type="text/javascript"></script>
+<script src="../js/photos/init.js" type="text/javascript"></script>
+
+</html>
diff --git a/img/photos/1.jpg b/img/photos/1.jpg
diff --git a/img/photos/10.jpg b/img/photos/10.jpg
diff --git a/img/photos/11.jpg b/img/photos/11.jpg
diff --git a/img/photos/12.jpg b/img/photos/12.jpg
diff --git a/img/photos/13.jpg b/img/photos/13.jpg
diff --git a/img/photos/14.jpg b/img/photos/14.jpg
diff --git a/img/photos/15.jpg b/img/photos/15.jpg
diff --git a/img/photos/2.jpg b/img/photos/2.jpg
diff --git a/img/photos/3.jpg b/img/photos/3.jpg
diff --git a/img/photos/4.jpg b/img/photos/4.jpg
diff --git a/img/photos/5.jpg b/img/photos/5.jpg
diff --git a/img/photos/6.jpg b/img/photos/6.jpg
diff --git a/img/photos/7.jpg b/img/photos/7.jpg
diff --git a/img/photos/8.jpg b/img/photos/8.jpg
diff --git a/img/photos/9.jpg b/img/photos/9.jpg
diff --git a/img/photos/ImageAttribution.txt b/img/photos/ImageAttribution.txt
@@ -0,0 +1,3 @@
+Images by Angelo Gonz�lez: http://www.flickr.com/photos/ag2r/
+Licensed under the Attribution 2.0 Generic (CC BY 2.0) License:
+http://creativecommons.org/licenses/by/2.0/deed.en
diff --git a/img/photos/arrows.png b/img/photos/arrows.png
diff --git a/img/photos/bg.png b/img/photos/bg.png
diff --git a/index.html b/index.html
@@ -18,26 +18,27 @@
         <div class="card__bg"></div>
         <img class="card__img" src="img/3dr_mono.png" />
         <div class="card__text">
-          <p class="card__title">你在看什么?</p>
+          <p class="card__title">相册</p>
         </div>
       </div>
       <div class="card card__two">
         <div class="card__bg"></div>
         <img class="card__img" src="img/3dr_chihiro.png" />
         <div class="card__text">
-          <p class="card__title">你在看什么?</p>
+          <p class="card__title">技术</p>
         </div>
       </div>
       <div class="card card__three">
         <div class="card__bg"></div>
         <img class="card__img" src="img/3dr_howlcastle.png" />
         <div class="card__text">
-          <p class="card__title">你在看什么?</p>
+          <p class="card__title">乱七八糟</p>
         </div>
       </div>
     </div>
   </div>
 </body>
+<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="./js/index.js"></script>
 
 </html>
diff --git a/js/index.js b/js/index.js
@@ -14,15 +14,18 @@ document.addEventListener('mousemove', function(_ref) {
   timeout = window.requestAnimationFrame(function() {
     var yValue = calcValue(y, window.innerHeight);
     var xValue = calcValue(x, window.innerWidth);
-    console.log(xValue, yValue);
     cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";
-
     [].forEach.call(images, function(image) {
       image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)";
     });
-
     [].forEach.call(backgrounds, function(background) {
       background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px";
     });
   });
-}, false);
+}, false);
+
+$(function() {
+  $('.card__one').on('click', function() {
+    window.location.href = './html/photos.html'
+  })
+})
diff --git a/js/photos/init.js b/js/photos/init.js
@@ -0,0 +1,14 @@
+var o = {
+	init: function(){
+		this.portfolio.init();
+	},
+	portfolio: {
+		data: {
+		},
+		init: function(){
+			$('#portfolio').portfolio(o.portfolio.data);
+		}
+	}
+}
+
+$(function(){ o.init(); });
diff --git a/js/photos/jquery.js b/js/photos/jquery.js
diff --git a/js/photos/portfolio.js b/js/photos/portfolio.js
@@ -0,0 +1,169 @@
+/*
+ * Portfolio Plugin for Codrops
+ * author: Marcin Dziewulski 
+ * url: http://www.mobily.pl or http://playground.mobily.pl
+ * inspiration: http://pauljnoble.com
+ * last modified: 11.08.2011
+ * MIT License
+ */
+
+
+(function($){
+    $.fn.portfolio = function(options) {
+		var d = {
+				image: {
+					width: 600,
+					height: 400,
+					margin: 20
+				},
+				path: {
+					width: 10,
+					height: 10,
+					marginTop: 5,
+					marginLeft: 5
+				},
+				animationSpeed: 400
+		}; // default settings
+
+		var s = $.extend({}, d, options); 
+
+        return this.each(function(){
+			var $t = $(this),
+				plugin = {
+					init: function(){
+						this.set.position();
+						this.paths.draw();
+						this.paths.go();
+						this.animate.item();
+					},
+					set: {
+						position: function(){
+							$t.find('.item').each(function(i){
+								var t = $(this);
+								t.css({ left: (s.image.width+s.image.margin)*i+'px' });
+								t.find('div').each(function(j){
+									var t = $(this);
+									t.css({ top: (s.image.height+s.image.margin)*j+'px' });
+								});
+							});
+						}
+					},
+					paths: {
+						draw: function(){
+							$t.append($('<div />').addClass('paths'));
+							var path = $t.find('.paths'),
+								items = $t.find('.item');
+							items.each(function(i){
+								var t = $(this), div = t.find('div');
+								path.append($('<div />').addClass('path'+i).css({
+										width: s.path.width+'px', 
+										left: (s.path.width+s.path.marginLeft)*i+'px' 
+									})
+								);
+								div.each(function(j){
+									$('<a />').attr({ href: '#', rel: j }).css({ 
+										width: s.path.width+'px',
+										height: s.path.height+'px',
+										top: (s.path.height+s.path.marginTop)*j+'px'  
+									}).appendTo(path.find('.path'+i))
+								});
+							});
+							path.find('.path0').find('a').eq(0).addClass('active');
+						},
+						go: function(){
+							$t.find('.paths').find('a').click(function(){
+								var t = $(this), all = $t.find('.paths').find('a'), column = t.parent('div').attr('class').split('path')[1], row = t.attr('rel'), 
+									inside = $t.find('.inside'),
+									top = row*(s.image.height+s.image.margin),
+									left = column*(s.image.width+s.image.margin);
+								inside.animate({
+									top: -top+'px',
+									left: -left+'px'
+								}, s.animationSpeed, function(){
+									plugin.position.get(inside);
+								});	
+								return false;
+							});
+						},
+						classes: function(column, row){
+							var anchors = $t.find('.paths').find('a'), anchor = anchors.filter(function(){
+								var t = $(this),
+									col = t.parent('div').attr('class').split('path')[1], 
+									r = t.attr('rel');
+								return col == column && r == row;
+							});
+							anchors.removeClass('active');
+							anchor.addClass('active');
+						}
+					},
+					animate: {
+						item: function(){
+							var down = { top: '-='+(s.image.height+s.image.margin)+'px' },
+								up = { top: '+='+(s.image.height+s.image.margin)+'px' },
+								next = { top: 0, left: '-='+(s.image.width+s.image.margin)+'px' },
+								prev = { top: 0, left: '+='+(s.image.width+s.image.margin)+'px' }
+							plugin.animate.img('.down', down, 40);
+							plugin.animate.img('.up', up, 38);
+							plugin.animate.img('.next', next, 39);
+							plugin.animate.img('.prev', prev, 37);
+						},
+						img: function(element, object, key){
+							var inside = $t.find('.inside'), type = $.browser.mozilla ? 'keypress' : 'keydown';
+							$(element).click(function(){
+								var t = $(this);
+								if (!t.hasClass('active')){
+									inside.animate(object, s.animationSpeed, function(){
+										plugin.position.get(inside);
+										t.removeClass('active');
+									});	
+								}
+								t.addClass('active');
+								return false;
+							});
+							$(document).bind(type, function(e) {
+						        var code = e.keyCode ? e.keyCode : e.which;
+								if(code == key && $(element).is(':visible')) { 
+									if (!inside.is(':animated')) {
+										inside.animate(object, s.animationSpeed, function(){
+											plugin.position.get(inside);
+										});
+									}
+								}
+								return false;
+							});	
+
+						}
+					},
+					position: {
+						get: function(element){
+							var top = element.position().top,
+								left = element.position().left;
+							plugin.position.check(top, left);
+						},
+						check: function(top, left){
+							top = ($.browser.msie && parseInt($.browser.version) == 8 && top != 0) ? top-1 : top;
+							var items = $t.find('.item'),
+								size_left = items.length-1,
+								max_left = -size_left*(s.image.width+s.image.margin),
+								column = left*size_left/max_left,
+								current = items.filter(function(){
+									return parseInt($(this).css('left')) == -left;
+								}),
+								size_top = current.find('div').length-1,
+								max_top = -size_top*(s.image.height+s.image.margin),
+								row = top*size_top/max_top,
+								arrows = $t.find('.arrows'), 
+								up = arrows.find('.up'), down = arrows.find('.down'),
+								next = arrows.find('.next'), prev = arrows.find('.prev');
+							if (left==max_left){ next.hide(); } else { next.show(); }
+							if (left<0) { prev.show(); } else { prev.hide(); }
+							if (top==max_top){ down.hide(); } else { down.show(); }
+							if (top<0) { up.show(); } else { up.hide(); }
+							plugin.paths.classes(column, row);
+						}
+					}
+				}
+			plugin.init();
+        });
+    };
+}(jQuery));
diff --git a/style/index.css b/style/index.css
@@ -59,6 +59,7 @@ h3 {
 }
 
 .card {
+  cursor: pointer;
   border-radius: 15px;
   box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
   display: inline-block;