New branch for #17

SchwarzwaldFalke · Apr 16, 2016 · 433d5b7 · 433d5b7
1 parent 2c98c12
commit 433d5b7
Show file tree

Hide file tree

Showing 26 changed files with 526 additions and 0 deletions.
diff --git a/examples/basic/css/ngGallery.css b/examples/basic/css/ngGallery.css
@@ -0,0 +1,267 @@
+.ng-gallery {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+
+img.ng-thumb {
+  height: 50px;
+  float: left;
+  display: block;
+  cursor: pointer;
+  margin: 2px 2px 0 0; 
+}
+
+.ng-overlay { 
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.85;
+  z-index: 9999;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.ng-gallery-content { 
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  text-align: center;
+}
+
+.ng-gallery-content > a.close-popup {
+  font-size: 42px;
+  float: right;
+  color: #fff;
+  text-decoration: none;
+  margin: 0 30px 0 0;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 0;
+}
+
+.ng-gallery-content > a.download-image {
+  font-size: 42px;
+  float: right;
+  color: #fff;
+  text-decoration: none;
+  margin: 0 30px 0 0;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 63px;
+}
+
+.ng-gallery-content > a.nav-left, .ng-gallery-content > a.nav-right {
+  color: #fff;
+  text-decoration: none;
+  font-size: 60px;
+  cursor: pointer;
+  outline: none;
+}
+
+.ng-gallery-content > a.nav-left {
+  position: fixed;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ng-gallery-content > a.nav-right {
+  position: fixed;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ng-gallery-content > img {
+  height: auto;
+  max-height: calc(100% - 150px);
+  max-width: calc(100% - 100px);
+  position: relative;
+  display: block;
+  margin: 0 auto 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  cursor: pointer;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.ng-gallery-content > img.effect {
+  animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0.3; }
+      to { opacity: 1; }
+}
+
+.ng-gallery-content > span.info-text {
+  color: #fff;
+  display: inline-block;
+  width: 100%;
+  height: 20px;
+  font-weight: bold;
+  text-align: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 100px;
+}
+
+.ng-gallery-content > .ng-thumbnails-wrapper {
+  width: 400px;
+  height: 70px;
+  text-align: center;
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  overflow-x: hidden;
+}
+
+.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails {
+  width: 4000px;
+  height: 70px;
+}
+
+.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img {
+  width: auto;
+  height: 70px;
+  float: left;
+  margin-right: 10px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img:hover, 
+.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img.active {
+  transition: opacity 0.25s ease;
+  opacity: 1;
+}
+
+/* Loading - from http://loading.io */
+uiload {
+  display: inline-block;
+  position: relative; 
+}
+
+uiload > div {
+    position: relative; 
+}
+
+@-webkit-keyframes uil-ring-anim {
+  0% {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); 
+  }
+
+  100% {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg); 
+  } 
+}
+
+@-moz-keyframes uil-ring-anim {
+  0% {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); 
+  }
+
+  100% {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg); 
+    } 
+}
+
+@-ms-keyframes uil-ring-anim {
+  0% {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); 
+  }
+
+  100% {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg); 
+  } 
+}
+
+@keyframes uil-ring-anim {
+  0% {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); 
+  }
+
+  100% {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg); 
+  } 
+}
+
+.uil-ring-css {
+  background: none;
+  position: relative;
+  top: 0;
+  margin: 180px auto 0 auto;
+  width: 100px;
+  height: 100px; 
+}
+
+.uil-ring-css > div {
+    position: absolute;
+    display: block;
+    width: 80px;
+    height: 80px;
+    top: 20px;
+    left: 20px;
+    border-radius: 40px;
+    box-shadow: 0 6px 0 0 #fff;
+    -ms-animation: uil-ring-anim 1s linear infinite;
+    -moz-animation: uil-ring-anim 1s linear infinite;
+    -webkit-animation: uil-ring-anim 1s linear infinite;
+    -o-animation: uil-ring-anim 1s linear infinite;
+    animation: uil-ring-anim 1s linear infinite; 
+}
diff --git a/examples/basic/css/screen.css b/examples/basic/css/screen.css
@@ -0,0 +1,10 @@
+body {
+	margin: 0;
+	font-family: Helvetica,Arial,sans-serif;
+}
+
+.content {
+	width: 600px;
+	height: 100%;
+	margin: 100px auto 0 auto;
+}
diff --git a/examples/basic/images/1.jpg b/examples/basic/images/1.jpg
diff --git a/examples/basic/images/10.jpg b/examples/basic/images/10.jpg
diff --git a/examples/basic/images/11.jpg b/examples/basic/images/11.jpg
diff --git a/examples/basic/images/2.jpg b/examples/basic/images/2.jpg
diff --git a/examples/basic/images/3.jpg b/examples/basic/images/3.jpg
diff --git a/examples/basic/images/4.jpg b/examples/basic/images/4.jpg
diff --git a/examples/basic/images/5.jpg b/examples/basic/images/5.jpg
diff --git a/examples/basic/images/6.jpg b/examples/basic/images/6.jpg
diff --git a/examples/basic/images/7.jpg b/examples/basic/images/7.jpg
diff --git a/examples/basic/images/8.jpg b/examples/basic/images/8.jpg
diff --git a/examples/basic/images/9.jpg b/examples/basic/images/9.jpg
diff --git a/examples/basic/images/thumbs/1.jpg b/examples/basic/images/thumbs/1.jpg
diff --git a/examples/basic/images/thumbs/10.jpg b/examples/basic/images/thumbs/10.jpg
diff --git a/examples/basic/images/thumbs/11.jpg b/examples/basic/images/thumbs/11.jpg
diff --git a/examples/basic/images/thumbs/2.jpg b/examples/basic/images/thumbs/2.jpg
diff --git a/examples/basic/images/thumbs/3.jpg b/examples/basic/images/thumbs/3.jpg
diff --git a/examples/basic/images/thumbs/4.jpg b/examples/basic/images/thumbs/4.jpg
diff --git a/examples/basic/images/thumbs/5.jpg b/examples/basic/images/thumbs/5.jpg
diff --git a/examples/basic/images/thumbs/6.jpg b/examples/basic/images/thumbs/6.jpg
diff --git a/examples/basic/images/thumbs/7.jpg b/examples/basic/images/thumbs/7.jpg
diff --git a/examples/basic/images/thumbs/8.jpg b/examples/basic/images/thumbs/8.jpg
diff --git a/examples/basic/images/thumbs/9.jpg b/examples/basic/images/thumbs/9.jpg
diff --git a/examples/basic/js/app.js b/examples/basic/js/app.js
@@ -0,0 +1,28 @@
+// Code goes here
+var myApp = angular.module('myApp', ['ngTouch','jkuri.gallery']);
+
+myApp.controller('testController', ['$scope',function($scope) {
+    $scope.images = [
+        {
+            thumb: 'images/thumbs/1.jpg',
+            img: 'images/1.jpg',
+            downloadSrc: 'images/1.jpg',
+            description: 'Image 1'
+        },
+        {
+            thumb: 'images/thumbs/2.jpg',
+            img: 'images/2.jpg',
+            downloadSrc: 'images/2.jpg',
+            description: 'Image 2'
+
+        },
+        {
+            thumb: 'images/thumbs/3.jpg',
+            img: 'images/3.jpg',
+            downloadSrc: 'images/3.jpg',
+            description: 'Image 3'},
+        {
+            thumb: 'images/thumbs/4.jpg',
+            img: 'images/4.jpg',  description: 'Image 4'}
+    ];
+}]);