From 2db0a64454c1612fdb6949fc5c5d65ad2c727208 Mon Sep 17 00:00:00 2001
From: Martynas Barzda <martynas@barzda.info>
Date: Sat, 29 Dec 2012 21:13:35 +0200
Subject: [PATCH] Filesmanager plugin: ability to view images

Based on issue #75. On image name click opens modal window with image.
---
 .../filesmanager/views/backend/index.view.php | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/plugins/box/filesmanager/views/backend/index.view.php b/plugins/box/filesmanager/views/backend/index.view.php
index d0dcc84..1e51771 100755
--- a/plugins/box/filesmanager/views/backend/index.view.php
+++ b/plugins/box/filesmanager/views/backend/index.view.php
@@ -70,8 +70,8 @@
         <?php if (isset($files_list)) foreach ($files_list as $file) { $ext = File::ext($file); ?>
         <?php if ( ! in_array($ext, $forbidden_types)) { ?>
         <tr>        
-            <td>
-                <?php echo Html::anchor(File::name($file), $site_url.'public' . DS .$path.$file, array('target'=>'_blank'));?>
+            <td<?php if (isset(File::$mime_types[$ext]) && preg_match('/image/', File::$mime_types[$ext])) echo ' class="image"'?>>
+                <?php echo Html::anchor(File::name($file), $site_url.'public/' . $path.$file, array('target'=>'_blank'));?>
             </td>
             <td>
                 <?php echo $ext; ?>
@@ -90,4 +90,30 @@
         </tr>        
         <?php } } ?> 
     </tbody>
-</table>
\ No newline at end of file
+</table>
+
+<div class="modal hide" id="showImage">
+    <div class="modal-header">
+        <a class="close" data-dismiss="modal">×</a>
+        <h3><?php echo __('Image:', 'filesmanager')?> <span></span></h3>
+    </div>
+    <div class="modal-body">
+        <p><img src=""/></p>
+    </div>
+</div>
+
+<script>
+$('.image').find('a').on('click', function() {
+    var src = $(this).attr('href');
+    var file = $(src.split('/')).last();
+
+    var image = new Image();
+    image.src = src;
+    $(image).load(function() {
+        $('#showImage').modal('show').css({width: image.width + 32, margin: '0 auto', left: 'auto'})
+        .find('img').attr('src', src);
+        $('#showImage').find('h3 span').text(file[0]);
+    });
+    return false;
+});
+</script>