diff --git a/seahub/templates/view_shared_dir.html b/seahub/templates/view_shared_dir.html
index 9995b14584..5891f7d652 100644
--- a/seahub/templates/view_shared_dir.html
+++ b/seahub/templates/view_shared_dir.html
@@ -2,6 +2,11 @@
 
 {% load seahub_tags i18n %}
 {% load url from future %}
+{% load staticfiles %}
+
+{% block extra_style %}
+<link rel="stylesheet" type="text/css" href="{% static "css/magnific-popup.css" %}" />
+{% endblock %}
 
 {% block main_panel %}
     <h2>{{ dir_name }}</h2>
@@ -63,7 +68,11 @@
                     {% endif %}
 
                     <td>
-                        <a class="normal" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.props.obj_name }}</a>
+                        {% if dirent.is_img %}
+                        <a class="normal img-name-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}"  data-mfp-src="{% url "view_raw_shared_file" token dirent.obj_id dirent.obj_name %}">{{ dirent.obj_name }}</a>
+                        {% else %}
+                        <a class="normal" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
+                        {% endif %}
                     </td>
 
                     <td>{{ dirent.file_size|filesizeformat }}</td>
@@ -82,6 +91,7 @@
 {% endblock %}
 
 {% block extra_script %}
+<script type="text/javascript" src="{% static "scripts/lib/jquery.magnific-popup.js" %}"></script>
 <script type="text/javascript">
 $(function() {
     {% if traffic_over_limit %}
@@ -90,85 +100,29 @@ $(function() {
     {% endif %}
 });
 
-{% if not repo.encrypted and ENABLE_THUMBNAIL %}
-var timer, ajaxRequest = {},
-    cur_path = "{{path|escapejs}}",
-    default_size = {{PREVIEW_DEFAULT_SIZE}},
-    preview_wrap = $('<div id="preview-wrap"><img id="image-preview" src="" alt=""/><div class="outer-caret right-outer-caret"><div class="inner-caret"></div></div></div>')
-        .appendTo("body")
-        .css({'width':default_size + 'px', 'height':default_size + 'px'})
-        .hide(),
-    image_preview = $("#image-preview"),
-    caret = image_preview.next();
-
-$(".repo-file-list").on({
-    mouseenter: function() {
-        var thumbnail = $('.thumbnail', $(this)),
-            file_item = thumbnail.closest('.file-item');
-
-        timer = setTimeout(function () {
-            ajaxRequest = $.ajax({
-                url: '{% url "thumbnail_create" repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size + '&t=' + '{{token}}',
-                cache: false,
-                dataType: 'json',
-                success: function(data) {
-                    if (data) {
-                        image_preview.attr("src", data.thumbnail_src + '?t=' + '{{token}}' + '&p=' + e(cur_path));
-                        var file_item_offset = file_item.offset(),
-                            thumbnail_offset = thumbnail.offset(),
-
-                            wrap_width = preview_wrap.outerWidth(),
-                            wrap_padding = parseInt(preview_wrap.css('padding-top')),
-
-                            caret_width = parseInt(caret.css('border-top-width')),
-                            caret_pos_x = (default_size)/2 + wrap_padding - caret_width,
-                            caret_pos_y = default_size + 2 * wrap_padding,
-
-                            wrap_left = file_item_offset.left - wrap_width - caret_width;
-
-                        if (wrap_left >= 0) {
-                            caret.removeClass('bottom-outer-caret')
-                                .addClass('right-outer-caret')
-                                .css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'});
-
-                            preview_wrap.css({
-                                'top'  : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px',
-                                'left' : wrap_left + 'px'
-                            }).fadeIn();
-                        } else {
-                            caret.removeClass("right-outer-caret")
-                                 .addClass("bottom-outer-caret")
-                                 .css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'});
-
-                            preview_wrap.css({
-                                'top'  : (file_item_offset.top - wrap_width) - caret_width + 'px',
-                                'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px'
-                            }).fadeIn();
-                        }
-                    }
-                },
-                error: function(xhr, textStatus, errorThrown) {
-                   if (textStatus != "abort") {
-                       if (xhr.responseText) {
-                           feedback($.parseJSON(xhr.responseText).error, 'error');
-                       } else {
-                           feedback("{% trans "Failed. Please check the network." %}", 'error');
-                       };
-                   };
-                }
-            });
-        }, 200);
+$('.repo-file-list').magnificPopup({
+    type: 'image',
+    delegate: '.img-name-link',
+    tClose: "{% trans "Close (Esc)" %}", // Alt text on close button
+    tLoading: "{% trans "Loading..." %}", // Text that is displayed during loading. Can contain %curr% and %total% keys
+    gallery: {
+        enabled: true,
+        tPrev: "{% trans "Previous (Left arrow key)" %}", // Alt text on left arrow
+        tNext: "{% trans "Next (Right arrow key)" %}", // Alt text on right arrow
+        tCounter: "{% trans "%curr% of %total%" %}" // Markup for "1 of 7" counter
     },
-    mouseleave: function() {
-        if (ajaxRequest.hasOwnProperty('abort')) {
-            ajaxRequest.abort();
-        }
-        clearTimeout(timer);
-        preview_wrap.hide();
-        image_preview.attr('src', ''); // for ff. In ff, when hover, the last preview image would be shown first, then the right one.
+    image: {
+        titleSrc: function(item) {
+            var el = item.el;
+            var img_name = el[0].innerHTML;
+            var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + "{% trans "Open in New Tab" %}" + '</a>';
+            return img_name + '<br />' + img_link;
+        },
+        tError: '{% trans '<a href="%url%" target="_blank">The image</a> could not be loaded.' %}' // Error message when image could not be loaded
     }
-}, ".dirent-icon:has('.thumbnail')");
+});
 
+{% if not repo.encrypted and ENABLE_THUMBNAIL %}
 // get thumbnails for image files
 $(function() {
     var img_icons = $('.not-thumbnail');
diff --git a/seahub/views/repo.py b/seahub/views/repo.py
index 05a7777aab..be15e73d77 100644
--- a/seahub/views/repo.py
+++ b/seahub/views/repo.py
@@ -31,7 +31,8 @@ from seahub.views import gen_path_link, get_repo_dirents, \
 from seahub.utils import gen_file_upload_url, is_org_context, \
     get_fileserver_root, gen_dir_share_link, gen_shared_upload_link, \
     get_max_upload_file_size, new_merge_with_no_conflict, \
-    get_commit_before_new_merge, user_traffic_over_limit, render_error
+    get_commit_before_new_merge, user_traffic_over_limit, render_error, \
+    get_file_type_and_ext
 from seahub.settings import ENABLE_SUB_LIBRARY, FORCE_SERVER_CRYPTO, \
     ENABLE_UPLOAD_FOLDER, \
     ENABLE_THUMBNAIL, THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE, PREVIEW_DEFAULT_SIZE
@@ -477,6 +478,9 @@ def view_shared_dir(request, token):
     traffic_over_limit = user_traffic_over_limit(fileshare.username)
 
     for f in file_list:
+        file_type, file_ext = get_file_type_and_ext(f.obj_name)
+        if file_type == IMAGE:
+            f.is_img = True
         if allow_generate_thumbnail(username, repo, f):
             f.allow_generate_thumbnail = True
             if os.path.exists(os.path.join(THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE, f.obj_id)):