diff --git a/src/css/ngGallery.css b/src/css/ngGallery.css
index 20c3a4b..3913a38 100644
--- a/src/css/ngGallery.css
+++ b/src/css/ngGallery.css
@@ -6,13 +6,12 @@
 
 img.ng-thumb {
   height: 50px;
-  float: left;
   display: block;
   cursor: pointer;
-  margin: 2px 2px 0 0; 
+  margin: 2px 2px 0 0;
 }
 
-.ng-overlay { 
+.ng-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -28,8 +27,32 @@ img.ng-thumb {
   user-select: none;
   -webkit-user-drag: none;
 }
+.ng-gallery {
+  clear: both;
+}
+.ng-gallery > .ng-gallery-thumbs {
+  float: left;
+  position: relative; 
+}
+.ng-gallery > .ng-gallery-thumbs:hover .delete-icon {
+  visibility: visible;
+  opacity: 1;
+  text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
+}
+
+.ng-gallery > .ng-gallery-thumbs .delete-icon {
+  cursor: pointer;
+  color: white;
+  position: absolute;
+  padding: 2px 6px;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
 
-.ng-gallery-content { 
+.ng-gallery-content {
   position: fixed;
   top: 0;
   left: 0;
@@ -39,28 +62,23 @@ img.ng-thumb {
   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;
+.ng-gallery-content > .image-controls {
   position: absolute;
   top: 20px;
   right: 0;
+  z-index: 2;
 }
 
-.ng-gallery-content > a.download-image {
+.ng-gallery-content > .image-controls > a.download-image,
+.ng-gallery-content > .image-controls > a.delete-image,
+.ng-gallery-content > .image-controls > 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: 63px;
+  position: relative;
 }
 
 .ng-gallery-content > a.nav-left, .ng-gallery-content > a.nav-right {
@@ -72,17 +90,37 @@ img.ng-thumb {
 }
 
 .ng-gallery-content > a.nav-left {
-  position: fixed;
-  left: 30px;
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  text-align: left;
+}
+
+.ng-gallery-content > a.nav-right {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  text-align: right;
+}
+
+.ng-gallery-content > a.nav-left > i {
   top: 50%;
+  left: 30px;
   transform: translateY(-50%);
+  position: relative;
 }
 
-.ng-gallery-content > a.nav-right {
-  position: fixed;
-  right: 30px;
+.ng-gallery-content > a.nav-right > i {
   top: 50%;
+  right: 30px;
   transform: translateY(-50%);
+  position: relative;
 }
 
 .ng-gallery-content > img {
@@ -130,13 +168,14 @@ img.ng-thumb {
   width: 400px;
   height: 70px;
   text-align: center;
-  position: fixed;
+  position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   overflow-x: hidden;
+  z-index: 2;
 }
 
 .ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails {
@@ -153,7 +192,7 @@ img.ng-thumb {
   opacity: 0.6;
 }
 
-.ng-gallery-content > .ng-thumbnails-wrapper > .ng-thumbnails > div > img:hover, 
+.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;
@@ -162,11 +201,11 @@ img.ng-thumb {
 /* Loading - from http://loading.io */
 uiload {
   display: inline-block;
-  position: relative; 
+  position: relative;
 }
 
 uiload > div {
-    position: relative; 
+    position: relative;
 }
 
 @-webkit-keyframes uil-ring-anim {
@@ -175,7 +214,7 @@ uiload > div {
     -moz-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -o-transform: rotate(0deg);
-    transform: rotate(0deg); 
+    transform: rotate(0deg);
   }
 
   100% {
@@ -183,8 +222,8 @@ uiload > div {
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
-    transform: rotate(360deg); 
-  } 
+    transform: rotate(360deg);
+  }
 }
 
 @-moz-keyframes uil-ring-anim {
@@ -193,7 +232,7 @@ uiload > div {
     -moz-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -o-transform: rotate(0deg);
-    transform: rotate(0deg); 
+    transform: rotate(0deg);
   }
 
   100% {
@@ -201,8 +240,8 @@ uiload > div {
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
-    transform: rotate(360deg); 
-    } 
+    transform: rotate(360deg);
+    }
 }
 
 @-ms-keyframes uil-ring-anim {
@@ -211,7 +250,7 @@ uiload > div {
     -moz-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -o-transform: rotate(0deg);
-    transform: rotate(0deg); 
+    transform: rotate(0deg);
   }
 
   100% {
@@ -219,8 +258,8 @@ uiload > div {
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
-    transform: rotate(360deg); 
-  } 
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes uil-ring-anim {
@@ -229,7 +268,7 @@ uiload > div {
     -moz-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -o-transform: rotate(0deg);
-    transform: rotate(0deg); 
+    transform: rotate(0deg);
   }
 
   100% {
@@ -237,8 +276,8 @@ uiload > div {
     -moz-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
-    transform: rotate(360deg); 
-  } 
+    transform: rotate(360deg);
+  }
 }
 
 .uil-ring-css {
@@ -247,7 +286,7 @@ uiload > div {
   top: 0;
   margin: 180px auto 0 auto;
   width: 100px;
-  height: 100px; 
+  height: 100px;
 }
 
 .uil-ring-css > div {
@@ -263,5 +302,5 @@ uiload > div {
     -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; 
+    animation: uil-ring-anim 1s linear infinite;
 }
\ No newline at end of file
diff --git a/src/js/ngGallery.js b/src/js/ngGallery.js
index 56e7dbf..fa3b560 100644
--- a/src/js/ngGallery.js
+++ b/src/js/ngGallery.js
@@ -30,7 +30,8 @@
         // Set the default template
         $templateCache.put(template_url,
             '<div class="{{ baseClass }}">' +
-            '  <div ng-repeat="i in images">' +
+            '  <div ng-repeat="i in images" class="ng-gallery-thumbs">' +
+            '    <a class="delete-icon" uib-tooltip="{{ deleteTooltipText }}" ng-click="deleteNgGalleryImage($index)" ng-show="showDeleteIcons()"><i class="fa fa-times"></i></a>' +
             '    <img ng-src="{{ i.thumb }}" class="{{ thumbClass }}" ng-click="openGallery($index)" alt="Image {{ $index + 1 }}" />' +
             '  </div>' +
             '</div>' +
@@ -38,8 +39,11 @@
             '</div>' +
             '<div class="ng-gallery-content" unselectable="on" ng-show="opened" ng-swipe-left="nextImage()" ng-swipe-right="prevImage()">' +
             '  <div class="uil-ring-css" ng-show="loading"><div></div></div>' +
-            '<a href="{{getImageDownloadSrc()}}" target="_blank" ng-show="showImageDownloadButton()" class="download-image"><i class="fa fa-download"></i></a>' +
-            '  <a class="close-popup" ng-click="closeGallery()"><i class="fa fa-close"></i></a>' +
+            '  <div class="image-controls">' +
+            '    <a class="close-popup" ng-click="closeGallery()"><i class="fa fa-close"></i></a>' +
+            '    <a href="{{getImageDownloadSrc()}}" target="_blank" ng-show="showImageDownloadButton()" class="download-image"><i class="fa fa-download"></i></a>' +
+            '    <a ng-click="deleteNgGalleryImage(index)" ng-show="showDeleteIcons()" class="delete-image"><i class="fa fa-trash"></i></a>' +
+            '  </div>' +
             '  <a class="nav-left" ng-click="prevImage()"><i class="fa fa-angle-left"></i></a>' +
             '  <img ondragstart="return false;" draggable="false" ng-src="{{ img }}" ng-click="nextImage()" ng-show="!loading" class="effect" />' +
             '  <a class="nav-right" ng-click="nextImage()"><i class="fa fa-angle-right"></i></a>' +
@@ -59,7 +63,12 @@
             scope: {
                 images: '=',
                 thumbsNum: '@',
-                hideOverflow: '='
+                hideOverflow: '=',
+                deleteIcons: '@',
+                onDelete: '&', // on delete callback
+                customConfirm: '=', // Allows to use custom confirm
+                confirmDelete: '=', // User must return true or false to remove image from object
+                deleteTooltipText: '=', // Show hide delete tooltip
             },
             controller: [
                 '$scope',
@@ -82,6 +91,7 @@
                 var $body = $document.find('body');
                 var $thumbwrapper = angular.element(element[0].querySelectorAll('.ng-thumbnails-wrapper'));
                 var $thumbnails = angular.element(element[0].querySelectorAll('.ng-thumbnails'));
+                var confirmDeleteWatch;
 
                 scope.index = 0;
                 scope.opened = false;
@@ -130,6 +140,49 @@
                     return scope.images[scope.index].downloadSrc;
                 };
 
+                scope.showDeleteIcons = function () {
+                  if (scope.deleteIcons == 'false') return
+                  return scope.deleteIcons
+                }
+
+                scope.deleteNgGalleryImage = function (i) {
+                  if (scope.images[i] == null) return
+                  var image = scope.images[i];
+
+                  if (scope.customConfirm) {
+                      scope.onDelete({ image: image });
+
+                      if (confirmDeleteWatch){
+                          confirmDeleteWatch();
+                      }
+
+                      confirmDeleteWatch = scope.$watch('confirmDelete', function (newValue, oldValue) {
+                          if (angular.isDefined(newValue) && newValue === true) {
+                            if (scope.images.splice(i, 1)) {
+                                if (scope.images.length == 0) {
+                                    return scope.closeGallery();
+                                }
+                                scope.confirmDelete = false;
+                                scope.changeImage((scope.images.length - 1));
+                            }
+                        }
+                      });
+
+                  } else {
+                    if (confirm('Are you sure you want to delete ' + (image.name || 'this image') + '?')) {
+                        scope.onDelete({ image: image }); // onDelete callback
+                        if (scope.images.splice(i, 1)) {
+                            if (scope.images.length == 0) {
+                                return scope.closeGallery();
+                            }
+                            scope.changeImage((scope.images.length - 1));
+                        }
+                    }
+                  }
+
+
+                }
+
                 scope.changeImage = function (i) {
                     scope.index = i;
                     showImage(i);
@@ -214,11 +267,8 @@
                         var len = scope.images.length,
                             width = scope.thumbs_width,
                             item_scroll = parseInt(width / len, 10),
-                            i = index + 1,
-                            s = Math.ceil(len / i);
-
-                        $thumbwrapper[0].scrollLeft = 0;
-                        $thumbwrapper[0].scrollLeft = i * item_scroll - (s * item_scroll);
+                            i = index + 1;
+                            $thumbwrapper[0].scrollLeft =  (i * item_scroll) - (scope.thumbsNum * item_scroll) + item_scroll;
                     }, 100);
                 };