Add image previews on thumbnail hover

TheReverend403 · Jul 3, 2016 · 9cc40de · 9cc40de
1 parent cab5d28
commit 9cc40de
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 9 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -24,10 +24,14 @@ elixir(function(mix) {
         'error.scss'
     ], 'public/assets/css/error.css');
 
+    mix.sass('thumbnailhover.scss', 'public/assets/css/thumbnailhover.css');
+
     mix.styles([
         '../../../node_modules/dropzone/dist/basic.css'
     ], 'public/assets/css/dropzone.css');
 
+    mix.scripts('thumbnailhover.js', 'public/assets/js/thumbnailhover.js');
+
     mix.scripts([
         '../../../node_modules/dropzone/dist/dropzone.js',
         'dropzone.js'
@@ -44,11 +48,13 @@ elixir(function(mix) {
     ], 'public/assets/js/global.js');
 
     mix.version([
-        "assets/css/global.css",
-        "assets/css/error.css",
-        "assets/css/dropzone.css",
-        "assets/js/global.js",
-        "assets/js/dropzone.js",
+        'assets/css/global.css',
+        'assets/css/error.css',
+        'assets/js/thumbnailhover.js',
+        'assets/css/thumbnailhover.css',
+        'assets/css/dropzone.css',
+        'assets/js/global.js',
+        'assets/js/dropzone.js',
         'assets/img/favicon.png',
         'assets/img/thumbnail.png'
     ]);

diff --git a/resources/assets/js/thumbnailhover.js b/resources/assets/js/thumbnailhover.js
@@ -0,0 +1,40 @@
+/*
+ * Image preview script
+ * powered by jQuery (http://www.jquery.com)
+ *
+ * written by Alen Grakalic (http://cssglobe.com)
+ *
+ * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
+ *
+ */
+
+this.imagePreview = function(){
+
+    xOffset = 10;
+    yOffset = 30;
+
+    $("a.preview").hover(function(e){
+            this.t = this.title;
+            this.title = "";
+            var c = (this.t != "") ? "<br/>" + this.t : "";
+            $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
+            $("#preview")
+                .css("top",(e.pageY - xOffset) + "px")
+                .css("left",(e.pageX + yOffset) + "px")
+                .css("z-index", 1000)
+                .fadeIn("fast");
+        },
+        function(){
+            this.title = this.t;
+            $("#preview").remove();
+        });
+    $("a.preview").mousemove(function(e){
+        $("#preview")
+            .css("top",(e.pageY - xOffset) + "px")
+            .css("left",(e.pageX + yOffset) + "px");
+    });
+};
+
+$(document).ready(function(){
+    imagePreview();
+});
diff --git a/resources/assets/sass/thumbnailhover.scss b/resources/assets/sass/thumbnailhover.scss
@@ -0,0 +1,8 @@
+#preview {
+  position: absolute;
+  border: 1px solid #ccc;
+  background: #333;
+  padding: 5px;
+  display: none;
+  color: #fff;
+}
diff --git a/resources/views/account/uploads.blade.php b/resources/views/account/uploads.blade.php
@@ -2,6 +2,10 @@
 
 @section('title', 'My Uploads')
 
+@section('stylesheets')
+    <link href="{{ elixir('assets/css/thumbnailhover.css') }}" rel="stylesheet">
+@stop
+
 @section('content')
     @if(count($uploads))
         @foreach ($uploads->chunk(2) as $chunk)
@@ -12,8 +16,8 @@
                             <div class="panel-body">
                                 <div class="media">
                                     <div class="media-left hidden-sm hidden-xs">
-                                        <a href="{{ route('files.get', $upload) }}">
-                                            <img src="{{ $upload->getThumbnailUrl() }}" class="img-thumbnail" alt="{{ $upload->original_name }}">
+                                        <a href="{{ route('files.get', $upload) }}" class="preview">
+                                            <img src="{{ $upload->getThumbnailUrl() }}" class="img-thumbnail" title="{{ $upload->original_name }}" alt="{{ $upload->original_name }}">
                                         </a>
                                     </div>
                                     <div class="media-body">
@@ -51,3 +55,7 @@
         </div>
     @endif
 @stop
+
+@section('javascript')
+    <script src="{{ elixir('assets/js/thumbnailhover.js') }}" type="application/javascript"></script>
+@endsection
diff --git a/resources/views/admin/uploads.blade.php b/resources/views/admin/uploads.blade.php
@@ -2,6 +2,10 @@
 
 @section('title', 'AdminCP - Uploads')
 
+@section('stylesheets')
+    <link href="{{ elixir('assets/css/thumbnailhover.css') }}" rel="stylesheet">
+@stop
+
 @section('content')
     @if($uploads->count())
         <div class="text-center">
@@ -17,8 +21,8 @@
                             <div class="panel-body">
                                 <div class="media">
                                     <div class="media-left hidden-sm hidden-xs">
-                                        <a href="{{ route('files.get', $upload) }}">
-                                            <img src="{{ $upload->getThumbnailUrl() }}" class="img-thumbnail" alt="{{ $upload->original_name }}">
+                                        <a href="{{ route('files.get', $upload) }}" class="preview">
+                                            <img src="{{ $upload->getThumbnailUrl() }}" class="img-thumbnail" title="{{ $upload->original_name }}" alt="{{ $upload->original_name }}">
                                         </a>
                                     </div>
                                     <div class="media-body">
@@ -56,3 +60,7 @@
         </div>
     @endif
 @stop
+
+@section('javascript')
+    <script src="{{ elixir('assets/js/thumbnailhover.js') }}" type="application/javascript"></script>
+@endsection