Finally! PopUp preview window

media/css/load.css

@@ -7,7 +7,7 @@
     height: 37px;
     margin: 0;
     padding: 0;
-    border: 0;
+    border: none;
     background-image: url("../img/load.png");
     text-indent: -1000em;
     background-position: center;
@@ -19,24 +19,34 @@
     pointer-events: none;
     visibility: hidden;
 }
-.imagePreviewContainer{
-    overflow: hidden;
-    float: left;
-    width: 100px;
-    height: 100px;
-    border: 5px solid #FFFFFF;
-}
 
 .button-delete {
-    width: 37px;
-    height: 37px;
-    background-image: url("../img/cancel.png");
+    width: 10px;
+    height: 10px;
+    float: left;
+    margin-left: 5px;
+    background-image: url("../img/close.png");
     background-color: #ffffff;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
 }
+.imagePreviewContainer{
+    /*overflow: hidden;
+    float: left;
+    width: 100px;
+    height: 100px;*/
+    border: 5px solid #FFFFFF;
+    display:none;
+    position:absolute;
+}
 
+.messagePrev{
+    margin-top: -5px;
+    margin-left: 5px;
+    float: left;
+    cursor:pointer;
+}
 .loading {
     background-image: url("../img/loading.gif");
     pointer-events: none;
@@ -54,4 +64,5 @@
     pointer-events: none;
 }
 
+
 /*url(‘http://i.imgur.com/8BgaE65.png’) no-repeat center top;*/

media/js/supportDialog.js

@@ -12,18 +12,39 @@ $(function () {
         if (this.isInit) {
             return;
         }
+        $('#messagePrev').hover(
+            function(){
+                $('#imagePreviewContainer').css({'display': 'block'}).stop().animate({bottom: 75, left: 20 ,opacity: 1},300);
+                console.log("on");},
+            function(){
+                console.log("out");
+                $('#imagePreviewContainer').stop().animate({bottom: '80px',left: 20,opacity: 0}, 200,
+                    function(){
+                        $('.imagePreviewContainer').css({'display': 'none'});
+                    });
+            }
+
+        );
         $("#hiddenframe").load(function () {
             var data = this.contentWindow.document.body.innerHTML;
             console.log(data);
             data = $.parseJSON(data);
             if (data.success === true) {
                 requestID = data.requestID;
-                $('#imageFile').addClass("successful-load");
+                $('#imageFile').hide();
                 $('#button-delete').removeClass("button-delete-none");
                 $('#button-delete').addClass("button-delete");
-                $('#imagePreview').show();
+                $('.Preview').show();
                 $('#imagePreview').attr('src', data.previewBase64);
 
+                /*$('#Preview').mouseenter(function(){
+                    $('#imagePreviewContainer').fadeIn("slow");
+                });
+
+                $('#Preview').mouseleave(function(){
+                    $('#imagePreviewContainer').fadeOut("slow");
+                });*/
+
             }
             else {
                 EventInspector_ShowMsg(data.error, 'error');
@@ -36,7 +57,6 @@ $(function () {
             }
 
 
-
         });
         $('#imageFile').change(function () {
             document.forms["loadPicture"].submit();
@@ -49,7 +69,8 @@ $(function () {
             $("#imageFile").removeClass("successful-load loading");
             requestID = NULLrequestID;
             $('#imagePreview').removeAttr('src');
-            $('#imagePreview').hide();
+            $('.Preview').hide();
+            $('#imageFile').show();
 
         });
         this.isInit = true;

~dev_rating/application/views/popup/support.twig

@@ -25,7 +25,12 @@
     </form>
 
     <iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>
-    <div class="imagePreviewContainer"><img id="imagePreview"  ></div>
+
+    <div class="Preview" style="display:none;">
+        <a href='#' class="messagePrev" id="messagePrev">Файл прикреплен</a>
+    <div class="imagePreviewContainer" id="imagePreviewContainer"><img id="imagePreview"></div>
+    </div>
+
     <button id="button-delete" class="button-delete-none"></button>
     <button class="defaultForm BlueButton marginBetween SendButton" id="dialogSendButton" style="float:right; width: 170px">Отправить сообщение</button>
 </div>