Fix show avatar in social tool - refs #7539

main/css/base.css

@@ -5421,3 +5421,14 @@ i.size-32.icon-new-work{
   vertical-align: bottom;
   margin-right: 5px;
 }
+
+/**
+ * Modal for user avatar preview
+ * @author Angel Fernando Quiroz Campos <angel.quiroz@beeznest.com>
+ */
+#expand-image-modal img {
+    display: block;
+    height: auto;
+    margin: auto;
+    max-width: 100%;
+}

main/inc/lib/social.lib.php

@@ -618,7 +618,7 @@ class SocialManager extends UserManager
 
             //--- User image
             if ($img_array['file'] != 'unknown.jpg') {
-                $html .= '<a class="ajax" href="'.$big_image.'"><img class="img-responsive" src='.$normal_image.' /> </a>';
+                $html .= '<a class="expand-image" href="'.$big_image.'"><img class="img-responsive" src='.$normal_image.' /> </a>';
             } else {
                 $html .= '<img src='.$normal_image.' width="110px" />';
             }

main/template/default/layout/footer.tpl

@@ -60,6 +60,19 @@
 {# Extra footer configured in admin section, only shown to non-admins #}
 {{ footer_extra_content }}
 
+<div class="modal fade" id="expand-image-modal" tabindex="-1" role="dialog" aria-labelledby="expand-image-modal-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="expand-image-modal-title">&nbsp;</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
     $("form").on("click", ' .advanced_parameters', function() {
         var id = $(this).attr('id') + '_options';

main/template/default/layout/head.tpl

@@ -409,6 +409,27 @@ $(function() {
         return false;
     });
 
+    $('a.expand-image').on('click', function(e) {
+        e.preventDefault();
+
+        var title = $(this).attr('title');
+
+        var image = new Image();
+        image.onload = function() {
+            if (title) {
+                $('#expand-image-modal').find('.modal-title').text(title);
+            } else {
+                $('#expand-image-modal').find('.modal-title').html(' ');
+            }
+
+            $('#expand-image-modal').find('.modal-body').html(image);
+            $('#expand-image-modal').modal({
+                show: true
+            });
+        };
+        image.src = this.href;
+    });
+
     // Global confirmation
     $('.popup-confirmation').on('click', function() {
         showConfirmationPopup(this);