Responsive FileManager as Standalone File Manager
In this post, we are going to implement Responsive FileManager as a standalone filemanager. We will be using JQuery along with Fancybox JavaScript and CSS for this.
Source Code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous" /> <h1 style="text-align:center;">Standalone Responsive Filemanager</h1> <hr> <a href="plugins/filemanager/dialog.php?relative_url=1&type=0&field_id=image-input" class="btn iframe-btn" type="button">Open Filemanager</a> <input type="hidden" id="image-input"> <img style="width:20%;" class="image-preview" src=""> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script> <script> $('.iframe-btn').fancybox({ 'width' : 900, 'height' : 600, 'type' : 'iframe', 'autoScale' : false }); function responsive_filemanager_callback(field_id){ var url=jQuery('#'+field_id).val(); $(".image-preview").attr('src','http://localhost/filemanager/plugins/source/'+url); } </script>
Follow this video for complete guidance :