https://www.archimatix.com/wp-content/plugins/fullscreen-galleria/galleria-fs.js?ver=1.6.13-B7VeFY

1/******************************************************************************
2 Galleria Fullscreen Theme
3 Copyright (c) 2012, Petri Damstén
4 Licensed under the MIT license.
5******************************************************************************/
6
7(function($) {
8
9var fsg_last_post_id = "";
10var fsg_map = undefined;
11var fsg_map_layer = undefined;
12var fsg_map_marker = undefined;
13
14$(document).ready(function() { // DOM ready
15  $("[data-imgid]", this).each(function() {
16    $(this).click(fsg_show_galleria);
17  });
18  if($(".galleria-photobox").length != 0) {
19    randomize_photos();
20  }
21  if($(".galleria-photolist").length != 0) {
22    list_photos();
23  }
24  var hash = window.location.hash;
25  if (hash.length == 0 && fullscreen_galleria_attachment) {
26    hash = "#0";
27  }
28  if (hash.length > 0) {
29    var postid = 'fsg_post_' + fullscreen_galleria_postid;
30    var imgid = hash.substring(1);
31    $('[data-imgid="' + imgid + '"][data-postid="' + postid + '"]', this).first().click();
32  }
33  $(document.body).on('post-load', function() {
34    //console.log('post-load');
35    $("[data-imgid]", this).each(function() {
36      $(this).off('click').on('click', fsg_show_galleria);
37    });
38  });
39});
40
41fsg_resize = function(event) {
42  var galleria = $("#galleria").data('galleria');
43  if (galleria != undefined) {
44    galleria.resize();
45  }
46  galleria = $(".galleria-photolist");
47  if (galleria != undefined) {
48    list_photos();
49  }
50}
51
52$(window).on("orientationchange", function(event) {
53  fsg_resize();
54});
55
56$(window).resize(function() { // window resized
57  fsg_resize();
58});
59
60fsg_set_keyboard = function(event) {
61  var galleria = $("#galleria").data('galleria');
62  galleria.attachKeyboard({
63    escape: function() {
64      if ($('#galleria-map').is(":visible")) {
65        $('.galleria-map-close').click();
66      } else if ($('#galleria').is(":visible")) {
67        $('.galleria-close').click();
68      }
69    },
70    left: function() {
71      if (fsg_settings['image_nav']) {
72        return;
73      }
74      galleria.prev();
75      galleria.exitIdleMode();
76    },
77    80: function() { // P = Previous
78      if (fsg_settings['image_nav']) {
79        return;
80      }
81      galleria.prev();
82      galleria.exitIdleMode();
83    },
84    right: function() {
85      if (fsg_settings['image_nav']) {
86        return;
87      }
88      galleria.next();
89      galleria.exitIdleMode();
90    },
91    space: function() {
92      if (fsg_settings['image_nav']) {
93        return;
94      }
95      galleria.next();
96      galleria.exitIdleMode();
97    },
98    78: function() {  // N = Next
99      if (fsg_settings['image_nav']) {
100        return;
101      }
102      galleria.next();
103      galleria.exitIdleMode();
104    },
105    83: function() { // S = Slideshow
106      if (fsg_settings['image_nav']) {
107        return;
108      }
109      galleria.setPlaytime(1500);
110      galleria.playToggle();
111    },
112    77: function() { // M = Open map
113      $('#fsg_map_btn').click();
114    },
115    70: function() { // F = Fullscreen
116      galleria.toggleFullscreen();
117      fsg_set_keyboard();
118    }
119  });
120}
121
122fsg_on_show = function(event) {
123  var gallery = $("#galleria").data('galleria');
124
125  if (fsg_settings['true_fullscreen']) {
126    gallery.enterFullscreen();
127  }
128  if (fsg_settings['auto_start_slideshow']) {
129    gallery.play();
130  }
131}
132
133fsg_on_close = function(event) {
134  var gallery = $("#galleria").data('galleria');
135
136  if (gallery.isFullscreen()) {
137    gallery.exitFullscreen();
138  }
139  if (gallery.isPlaying()) {
140    gallery.pause();
141  }
142}
143
144fsg_show_galleria = function(event) {
145  //console.log("fsg_show_galleria");
146  event.preventDefault();
147  var elem = $("#galleria");
148  var close = $("#close-galleria");
149  elem.toggle();

150  close.toggle();
151  var postid = $(this).attr("data-postid");
152  var imgid = $(this).attr("data-imgid");
153
154  id = 0;
155  for (var i = 0; i < fsg_json[postid].length; ++i) {
156    if (fsg_json[postid][i]['id'] == imgid) {
157      id = i;
158      break;
159    }
160  }
161  if (postid != fsg_last_post_id) {
162    if (elem.data('galleria')) {
163      // Set new data
164      // Bit of a hack, but load does not have show param and show function
165      // works purely after load
166      elem.data('galleria')._options.show = id;
167      elem.data('galleria').load(fsg_json[postid]);
168      fsg_set_keyboard();
169      fsg_on_show();
170    } else {
171      // Init galleria
172      if  (!fsg_settings['show_thumbnails']) {
173        var sheet = document.createElement('style')
174        sheet.innerHTML = ".galleria-stage {bottom: 10px !important; } \
175                           .galleria-thumbnails-container {height: 0px !important;}";
176        document.body.appendChild(sheet);
177      }
178      elem.galleria({
179        css: (fsg_settings['w3tc']) ? $('link').attr('href') : 'galleria-fs-' + fsg_settings['theme'] + '.css',
180        dataSource: fsg_json[postid],
181        show: id,
182        showCounter: false,
183        fullscreenDoubleTap: false,
184        imageCrop: false,
185        fullscreenCrop: false,
186        maxScaleRatio: 1.0,
187        showInfo: false,
188        idleTime: Math.max(1000, parseInt(fsg_settings['overlay_time'])),
189        thumbnails: fsg_settings['show_thumbnails'],
190        autoplay: fsg_settings['auto_start_slideshow'],
191        transition: fsg_settings['transition'],
192        trueFullscreen: fsg_settings['true_fullscreen'],
193        showImagenav: !fsg_settings['image_nav'],
194        extend: function() {
195          fsg_set_keyboard();
196        }
197      });
198      fsg_on_show();
199    }
200    fsg_last_post_id = postid;
201  } else {
202    elem.data('galleria').show(id);
203    fsg_set_keyboard();
204    fsg_on_show();
205  }
206}
207
208open_map = function(lat, long)
209{
210  $('#galleria-map').show();
211  if (typeof fsg_map == 'undefined') {
212    fsg_map = new ol.Map({
213        target: 'galleria-map',
214        layers: [
215          new ol.layer.Tile({
216            source: new ol.source.OSM()
217          })
218        ],
219        view: new ol.View({
220          center: ol.proj.fromLonLat([long, lat]),
221          zoom: 16
222        })
223    });
224    fsg_map.addControl(new ol.control.ZoomSlider());
225  } else {
226    fsg_map.getView().setZoom(16);
227    fsg_map.getView().setCenter(ol.proj.fromLonLat([long, lat]));
228  }
229
230  if (typeof fsg_map_layer == 'undefined') {
231    style = new ol.style.Style({
232      image: new ol.style.Icon({
233        anchor: [0.5, 1.0],
234        src: '/wp-content/plugins/fullscreen-galleria/marker.svg'
235      })
236    });
237
238    fsg_map_marker  = new ol.Feature({
239      geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
240    });
241
242    fsg_map_layer = new ol.layer.Vector({
243      source: new ol.source.Vector({
244        features: [fsg_map_marker],
245      }),
246      style: style,
247   });
248   fsg_map.addLayer(fsg_map_layer);
249 } else {
250   fsg_map_marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat([long, lat])));
251 }
252}
253
254generate_small_cols = function(cols)
255{
256  var small = [];
257  for (c in cols) {
258    var v = Math.floor(cols[c] / 2);
259    small.push(v);
260    small.push((cols[c] % 2.0 == 0) ? v : v + 1);
261  }
262  return small;
263}
264
265list_photos = function()
266{
267  $(".galleria-photolist").each(function() {
268      var ID = $(this).attr("id");
269      var BORDER = fsg_photolist[ID]['border'];
270      var TILE = fsg_photolist[ID]['tile'];
271      var EXTLINKS = fsg_photolist[ID]['extlinks'];
272      var FIXED = fsg_photolist[ID]['fixed'];
273      var width = $(this).parent().width();
274      var height = $(this).parent().height();
275      var box = 0;
276      var left = BORDER;
277      var imgx = 0;
278      var imgy = 0;
279      var prev = 0;
280      var max_col = 0;
281      var COLS = fsg_photolist[ID]['cols'].split(',');
282      var SMALLCOLS = ('smallcols' in fsg_photolist[ID]) ? 
283          fsg_photolist[ID]['smallcols'].split(',') : generate_small_cols(COLS);
284      COLS = (width <= 750) ? SMALLCOLS : COLS;
285
286      $(this).html("");
287      for(i in COLS) {
288        COLS[i] = +COLS[i];
289        max_col = Math.max(COLS[i], max_col);
290      }
291
292      if (FIXED == 'width') {
293        box = (width - BORDER) / max_col - BORDER;
294        if (box < TILE) {
295          box = TILE;
296        }
297        left = (width - (max_col * (box + BORDER)) + BORDER) / 2;
298      } // TODO: TILE for FIXED == 'height'
299
300      var col_bottoms = new Array(max_col);
301      col_bottoms.fill(0);
302
303      var row = 0;
304      var pic = 0;
305      for (i in fsg_json[ID]) {
306          var img = fsg_json[ID][i]['image'];
307          var imgid = fsg_json[ID][i]['id'];
308          var w = fsg_json[ID][i]['full'][1];
309          var h = fsg_json[ID][i]['full'][2];
310          var extlink = fsg_json[ID][i]['extlink'];
311
312          if (row < COLS.length) {
313            columns = COLS[row];
314          } else {
315            columns = COLS[COLS.length - 1];
316          }
317
318          if (FIXED == 'width') {
319            var min = 1000000;
320            var mini = 0;
321            for (j = 0; j < columns; ++j) {
322              if (col_bottoms[j] < min) {
323                mini = j;
324                min = col_bottoms[j];
325              }
326            }
327            imgx = left + (mini * (box + BORDER));
328          } else {
329            var first = i - pic;
330            var last = first + columns;
331            for (var fullwidth = 0, j = first; j < last && j < fsg_json[ID].length; ++j) {
332              fullwidth += fsg_json[ID][j]['full'][1] / fsg_json[ID][j]['full'][2];
333            }
334            if (last > fsg_json[ID].length) {
335              n = last - fsg_json[ID].length;
336              fullwidth += n;
337            }
338            box = (width - ((columns + 1) * BORDER)) * (w / h / fullwidth);
339            mini = pic;
340            min = col_bottoms[mini];
341            //console.log(row, pic, columns, box, fsg_json[ID][i]);
342            if (mini == 0) {
343              imgx = BORDER;
344            } else {
345              imgx += BORDER + prev;
346            }
347            prev = box;
348          }
349          // - Find best img
350          var a = ["thumbnail", "medium", "large", "full"];
351          for (var s in a) {
352            if (fsg_json[ID][i][a[s]][1] > box * window.devicePixelRatio) {
353              img = fsg_json[ID][i][a[s]][0];
354              w = fsg_json[ID][i][a[s]][1];
355              h = fsg_json[ID][i][a[s]][2];
356              break;
357            }
358          }
359
360          imgy = col_bottoms[mini];
361          //console.log(imgy, mini, box, w, h, BORDER, (box / w) * h + BORDER);
362          col_bottoms[mini] += (box / w) * h + BORDER;
363
364          if (EXTLINKS) {
365            var $a = $('<a href="' + extlink + '">');
366          } else {
367            var $a = $('<a data-postid="' + ID + '" data-imgid="' + imgid + '" href="' + img + '">');
368            $($a).click(fsg_show_galleria);
369          }
370          var d = 'animation-delay: ' + i /20 +'s; ';
371          //console.log(row, pic, columns, imgx, imgy);
372          var $img = $('<img style="'+ d +'left: ' + imgx + 'px; top: ' + imgy + 'px;" width="' + box +
373          '" src="' + img + '">');
374          $a.append($img);
375          $(this).append($a);
376
377          if (pic == columns - 1) {
378            ++row;
379            for (var j = pic + 1; j < max_col; ++j) {
380              col_bottoms[j] = col_bottoms[pic];
381              //console.log('xx', col_bottoms[j], j, col_bottoms[pic], pic, max_col);
382            }
383            pic = 0;
384          } else {
385            ++pic;
386          }
387      }
388  });
389}
390
391randomize_photos = function()
392{
393  $(".galleria-photobox").each(function() {
394    var ID = $(this).attr("id");
395    var BORDER = fsg_photobox[ID]['border'];
396    var COLS = fsg_photobox[ID]['cols'];
397    var ROWS = fsg_photobox[ID]['rows'];
398    var MAXTILES = fsg_photobox[ID]['maxtiles'];
399    var TILE = fsg_photobox[ID]['tile'];
400    var REPEAT = fsg_photobox[ID]['repeat'];
401    var x = 0;
402    var y = 0;
403    var BOX = 0;
404    var width = $(this).parent().width();
405    var height = $(this).parent().height();
406    //console.log(width, height, window.width, window.height);
407
408    if (TILE > 0) {
409      // calc rows and cols
410      BOX = TILE + BORDER;
411      COLS = Math.floor(width / BOX);
412      ROWS = Math.floor(height / BOX);
413      $(this).width(width + BORDER);
414      $(this).height(height + BORDER);
415      y = Math.floor(($(this).height() - (ROWS * BOX)) / 2);
416    } else {
417      $(this).width(width + BORDER);
418      var BOX = Math.floor($(this).width() / COLS);
419      $(this).height((BOX * ROWS) + BORDER);
420      y = -BORDER;
421    }
422    x = Math.floor(($(this).width() - (COLS * BOX)) / 2);
423    //console.log(TILE, $(this).width(), $(this).height(), COLS, ROWS, x, y, BOX);
424    $(this).css('top', y);
425    $(this).css('left', x);
426    $(this).html('');
427
428    //console.log(ID, BORDER, 'x', COLS, ROWS, BOX, MAXTILES);
429    // init array
430    var array = new Array(COLS);
431    for (var i = 0; i < COLS; i++) {
432      array[i] = new Array(ROWS);
433      for (var j = 0; j < ROWS; j++) {

434        array[i][j] = -1;
435      }
436    }
437    x = 0;
438    y = 0;
439    var d = 0;
440    var tiles = {};
441    while (1) {
442      // next free cell
443      stop = false;
444      while (array[x][y] != -1) {
445        ++x;
446        if (x >= COLS) {
447          x = 0;
448          ++y;
449          if (y >= ROWS) {
450            stop = true;
451            break;
452          }
453        }
454      }
455      if (stop) {
456        break;
457      }
458      // find max size
459      var mx = 0;
460      while ((x + mx) < COLS && array[x + mx][y] == -1) {
461        ++mx;
462      }
463      var my = 0;
464      while ((y + my) < ROWS && array[x][y + my] == -1) {
465        ++my;
466      }
467      // mark array
468      var m = Math.min(mx, my);
469      var box = Math.min(MAXTILES, Math.floor(Math.random() * m) + 1);
470      for (var i = 0; i < box; i++) {
471        for (var j = 0; j < box; j++) {
472          array[x + i][y + j] = d;
473        }
474      }
475      tiles[d] = [box, x, y];
476      ++d;
477    }
478
479    /* print array
480    for (var i = 0; i < ROWS; i++) {
481      s = i + '. - ';
482      for (var j = 0; j < COLS; j++) {
483        s += array[j][i] + ' ';
484      }
485      console.log(s);
486    }
487    */
488
489    var p = 0;
490    var b = 0;
491    while (1) {
492      // Get random tile starting from biggest
493      r = Math.floor(Math.random() * d);
494      b = r;
495      all = (tiles[b][0] == -1);
496      for (j = 0; j < d; ++j) {
497        n = (r + j) % d;
498        if (tiles[n][0] > tiles[b][0]) {
499          b = n;
500          all = false;
501        }
502      }
503      if (all) {
504        break;
505      }
506      // No random photo just next one...
507      if (p + 1 >= fsg_json[ID].length) {
508        if (!REPEAT) {
509          break;
510        }
511        p = 0;
512      }
513      // Add photo div
514      var photo = p + 1;
515      var box = tiles[b][0];
516      var x = tiles[b][1];
517      var y = tiles[b][2];
518      var size = Math.floor(box * BOX - 2 * BORDER);
519      var img = fsg_json[ID][photo]['image'];
520      var imgid = fsg_json[ID][photo]['id'];
521      var w = fsg_json[ID][photo]['full'][1];
522      var h = fsg_json[ID][photo]['full'][2];
523      //console.log(b, box, y, x);
524      var $div = $('<div style="width: ' + size + 'px; height: ' + size + 'px; top: ' + y * BOX +
525                  'px; left: ' + x * BOX + 'px; margin: ' + BORDER + 'px;">');
526      var $a = $('<a data-postid="' + ID + '" data-imgid="' + imgid + '" href="' + img + '">');
527      $($a).click(fsg_show_galleria);
528      // - Find best img
529      var a = ["thumbnail", "medium", "large", "full"];
530      for (var s in a) {
531        min = Math.min(fsg_json[ID][photo][a[s]][1],
532                      fsg_json[ID][photo][a[s]][2]);
533        if (min > size) {
534          img = fsg_json[ID][photo][a[s]][0];
535          w = fsg_json[ID][photo][a[s]][1];
536          h = fsg_json[ID][photo][a[s]][2];
537          break;
538        }
539      }
540      var min = Math.min(w, h);
541      var m = size / min;
542      w = w * m;
543      h = h * m;
544      var imgx = -Math.floor((w - size) / 2.0);
545      var imgy = -Math.floor((h - size) / 2.0);
546      var $img = $('<img style="left: ' + imgx + 'px; top: ' + imgy + 'px;" width="' + w +
547                  '" height="' + h + '" src="' + img + '">');
548      $a.append($img);
549      $div.append($a);
550      $(this).append($div);
551      ++p;
552      tiles[b][0] = -1;
553    }
554  });
555  //$(window).resize();
556}
557
558}(jQuery));