Fancybox fuer Bilder eingebaut

ulrich

2017-08-03 630c3f3cb7bf2679e7a96a9bc9c076ea350a13eb

Fancybox fuer Bilder eingebaut

 web/ui/api.js

@@ -129,6 +129,11 @@
    $('.breadcrumb-item').click(fm_bc_click);
    $('#ansicht').click(fm_ansicht_umschalten);
    fm_set_modus();
    
    $("[data-fancybox]").fancybox({
      loop: true,
      idleTime: 2
    });
  });
}


 web/ui/data.js

@@ -47,6 +47,7 @@
  var self = this;
  this.fr = obj;
  this.fnx;
  this.fext = '';
  
  this.typeClass = function() {
    if(modus == 'kacheln') {
@@ -80,19 +81,37 @@
  
  this.miniurl = function() {
      var userid = $('#userMenu').text();
      var ext = '';
      if(self.fext === '') {
        //self.fext = '';
      var dotpos = self.fnx.indexOf('.');
      if(dotpos > -1) {
        var fny = self.fnx;
        self.fnx = self.fnx.substring(0, dotpos);
        ext = fny.substr(dotpos);
          self.fext = fny.substr(dotpos);
        }
      }
      var path = fm_get_path(userid);
      var imgurl = loc + path + '/' + self.fnx + '_tn' + ext;
      var imgurl = loc + path + '/' + self.fnx + '_tn' + self.fext;
      return imgurl;
    
  };
  
  this.bildurl = function() {
      var userid = $('#userMenu').text();
      if(self.fext === '') {
        //self.fext = '';
        var dotpos = self.fnx.indexOf('.');
        if(dotpos > -1) {
          var fny = self.fnx;
          self.fnx = self.fnx.substring(0, dotpos);
          self.fext = fny.substr(dotpos);
        }
      }
      var path = fm_get_path(userid);
      var imgurl = loc + path + '/' + self.fnx + self.fext;
      return imgurl;
  };
  
  this.fileName = function() {
    
    var namen = self.fr.absolutePath.split('/');

 web/ui/index.html

@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="/jslib/codemirror/addon/display/fullscreen.css">        
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/jslib/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" type="text/css" href="/jslib/lightbox/lightbox.css">
    <link rel="stylesheet" type="text/css" href="stile.css">
    <script id="tpl-ci" type="x-tmpl-mustache">
@@ -22,7 +23,9 @@
      {{#files}}          
        <figure class="figure datei-figure text-center text-warning align-top datei-elem">
          {{#mini}}
            <a href="{{bildurl}}" data-fancybox="group" data-caption="">
            <img class="datei" src="{{miniurl}}"  width="60" height="40" />
            </a>
          {{/mini}}
          {{^mini}}
            <i class="fa {{ typeClass }} fa-3x"></i>
@@ -228,7 +231,8 @@
      </div>
    </div>
    <!-- Skripte -->
    <script src="/jslib/jquery/jquery.min.js"></script>
    <!-- <script src="/jslib/jquery/jquery.min.js"></script> -->
    <script src="/jslib/jquery-3.2.1/jquery.min.js"></script>
    <script src="/jslib/codemirror/lib/codemirror.js"></script>
    
    <script src="/jslib/codemirror/mode/javascript/javascript.js"></script>
@@ -241,6 +245,7 @@
    <script src="/jslib/tether/tether.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="/jslib/fancybox/jquery.fancybox.min.js"></script>
    <script src="/jslib/lightbox/lightbox.min.js"></script>
    <script src="data.js"></script>
    <script src="api.js"></script>