https://bueltmannshofschule.de/scripts/javascript/mme_hover/mme_hover.js

1var schliessen_text = '[X] Schließen'; // Default
2var vollbild_position = "absolut"; // Default
3if (typeof fullscreenimgs === 'undefined') {
4  var fullscreenimgs = new Array();
5}
6if (typeof thumbnail_height === 'undefined') {
7  var thumbnail_height = new Array();
8}
9var cache = new Array();
10var hover_id = 0;  //Um die Orginal Bilder wieder einzublenden
11
12function get_close_title() {
13  $.ajax({
14    type: 'GET',
15    url: '/scripts/ajax/mme_hover/get_close_title.php',
16    success: function (response) {
17      schliessen_text = response;
18    }
19  });
20}
21get_close_title();
22
23
24$(document).ready(function () { //Plugins preloaden
25  //Hotkeys einbinden
26  load_plugin(function () {
27    return typeof jQuery.hotkeys == 'undefined';
28  }, '/scripts/jQuery/jquery.hotkeys.min.js');
29  //Wenn Modenizr-touch gerät meldet, jquery.mobile einbinden
30  load_plugin(function () {
31    return typeof Modernizr == 'undefined' || typeof Modernizr.touch == 'undefined';
32  }, '/scripts/javascript/modernizr/modernizr.touch.js', function () {
33    if (Modernizr.touch) {
34      load_plugin(function () {
35        return typeof jQuery.mobile == 'undefined'
36      }, '/scripts/jQuery/jquery.mobile.js', null, function () {
37        $(document).bind("mobileinit", function () {
38          $.mobile.ajaxEnabled = false;
39          $.mobile.autoInitializePage = false;
40          $.mobile.linkBindingEnabled = false;
41          $.mobile.hashListeningEnabled = false;
42          $.mobile.pushStateEnabled = false;
43          $.mobile.changePage.defaults.changeHash = false;
44        });
45      });
46    }
47  });
48
49})
50function load_plugin(check, url, callback, pre) { //check gibt true zurück, falls Plugin geladen werden muss
51  if (typeof callback != "function") {
52    callback = function () { };
53  }
54  if (typeof pre != "function") {
55    pre = function () { };
56  }
57  if (typeof check == "function") {
58    if (check()) {
59      pre()
60      $.ajax({
61        url: url,
62        dataType: "script",
63        cache: true
64      }).done(callback);
65    } else {
66      callback();
67    }
68  } else {
69    console.log("Plugin: " + url + " wurde nicht geladen. 'check' ist keine Funktion!");
70  }
71}
72
73function show_hover(object, img, h_width, h_height, fullscreenid, collection, fullscreen_class, mask) {
74  if (typeof h_height != 'number') {
75    h_height = Math.round(height * 1.3);
76  }
77  if (typeof h_width != 'number') {
78    h_width = Math.round(width * 1.3);
79  }
80  var height = $(object).height();
81  var width = $(object).width();
82  var offset = $(object).position();
83  var h_offset = { top: Math.round(offset.top), left: Math.round(offset.left) };
84  //alert(offset.top);
85  var onClick = '';
86  var Class = "mme_hover mme_hover_container";
87  if (typeof fullscreenid == 'number') {
88    onClick = "show_fullscreen(this, " + fullscreenid + ", '" + collection + "', '" + fullscreen_class + "');";
89    Class = Class + ' mme_hover_clickable';
90  }
91  $('.mme_hover').mouseout(); //Alle andern Hover vorher ausblenden. (Bugfix für Fehler bei schnell nacheinander ausgelöstem Hover)
92  var style = "";
93  var mask_svg = "";
94  var uuid = "";
95  if (typeof mask != 'undefined' && mask != '') {
96    preload_image(mask);
97    var params = get_transparency_mask_params(mask, width, height);
98
99    mask_svg = params.mask_svg
100    style = 'style="' + params.style + '"';
101    uuid = params.uuid;
102  }
103  var timeout;
104  $(object)
105    .css('cursor', 'wait');

106  var container = $('<div style="display: none; position: absolute; width: ' + width + 'px; height: ' + height + 'px; " onClick="' + onClick + '" class="' + Class + '"><img class="mme_hover mme_hover_img" ' + style + '/>' + mask_svg + '</div>').appendTo($(object).parent())
107    .offset(h_offset);
108  container.children("img")
109    .load(function () {
110      $(object).addClass('isHovering');
111      //Objekt aufsliden
112      // console.log(this, h_offset, offset, object);
113      $(this).parent().css({ height, width, display: 'block' })//show('scale', { from: { height: height, width: width } }, 150);
114      //SVG Maske muss mit skaliert werden
115      $({ height: height, width: width }).animate({
116        height: h_height,
117        width: h_width
118      }, {
119        duration: 150,
120        step: function (now, fx) {
121          if (fx.prop == 'width') {
122            $('#svgmask_' + uuid + ' image').attr('width', now);
123          } else if (fx.prop == 'height') {
124            $('#svgmask_' + uuid + ' image').attr('height', now);
125          }
126        }
127      });
128      $(object).css('cursor', '');
129    })
130    .attr('src', img);
131  container.mouseleave(function () {
132    // console.log('mouseOut');
133    window.clearTimeout(timeout);
134    timeout = window.setTimeout(function () {
135      clear_hover(container, object)
136    }, 100);
137  }).mouseenter(function () {
138    // console.log('mouseIn');
139    window.clearTimeout(timeout);
140  });
141}
142function get_transparency_mask_params(mask, width, height) {
143  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : r & 0x3 | 0x8; return v.toString(16); });
144  preload_image(mask);
145  mask_svg = '<svg><filter id="maskfilter_' + uuid + '"><feColorMatrix in="SourceAlpha" type="matrix"' +
146    'values="0 0 0 1 0 ' +
147    '0 0 0 1 0 ' +
148    '0 0 0 1 0 ' +
149    '0 0 0 1 0 " />' +
150    '</filter>' +
151    '<mask id="svgmask_' + uuid + '">' +
152    '<image width="' + width + '" height="' + height + '" xlink:href="' + mask + '" svgWidth="' + width + '" filter="url(#maskfilter_' + uuid + ')" id="imgmask_' + uuid + '"/>' +
153    '</mask>' +
154    '</svg>';
155  style = '-webkit-mask-image: url(' + mask + ');-webkit-mask-size: cover; mask-size: 100%; mask: url(#svgmask_' + uuid + ');';
156  return { mask_svg: mask_svg, style: style, uuid: uuid };
157
158}
159function clear_hover(object, img) {
160  $(".mme_curtain").fadeOut(400, function () {
161    $(this).remove();
162  });
163  //$('.isHovering[hover_id="'+hover_id+'"]').removeClass('isHovering');
164  $(img).removeClass('isHovering');
165  $(object).fadeOut(400, function () {
166    //$(object).remove();
167  });
168
169}
170function add_loading_spinner_event() {
171  $('img.not_loaded_spinner').on('load', function () {
172    $(this).removeClass("not_loaded_spinner");
173  });
174}
175function show_fullscreen(object, fullscreenid, collection, fullscreen_class) { //object wird verwendet um den Hover zu entfernen, Beim Aufruf ohne Hover stattdessen null übergeben
176  $('body').append('<div style="position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%;" class="mme_curtain"></div>').children(':last-child').fadeIn();
177  var fullscreenimg = fullscreenimgs[collection][fullscreenid]['src'];
178  var f_height = fullscreenimgs[collection][fullscreenid]['height'];
179  var f_width = fullscreenimgs[collection][fullscreenid]['width'];
180  var style = "";
181  var mask_svg = "";
182  if (typeof fullscreenimgs[collection][fullscreenid]['mask'] != 'undefined') {
183    var mask = fullscreenimgs[collection][fullscreenid]['mask'];
184    var params = get_transparency_mask_params(mask, f_width, f_height);
185
186    mask_svg = params.mask_svg;
187    style = params.style;
188  }
189  //var top =  ($('.mme_curtain').height()-f_height-thumbnail_height[collection])/2;
190  //var left = ($('.mme_curtain').width()-f_width)/2;
191  $(object).remove(); //Hover entfernen
192  $('.isHovering').removeClass('isHovering');
193  $('.ui-effects-wrapper').remove(); //Wenn beim Einbleden des Hovers auf den Hover geklickt wird, bleibt ein unsichtbares div vor dem Bild was das erneurte Hovern vermeidet.
194  var thumbnails = "";
195  if (thumbnail_height[collection] > 0) {
196    var thumbnail_width = Math.floor($('.mme_curtain').width() / fullscreenimgs[collection].length);
197    thumbnails += "<div class='mme_thumbnails' style='height: " + thumbnail_height[collection] + "px; position: absolute; left: 0; bottom: 0; width: auto; text-align: center;'>";
198    //Thumbnails konstruieren
199    for (var i = 0; i < fullscreenimgs[collection].length; i++) {
200      var this_img = fullscreenimgs[collection][i];
201      var this_height = thumbnail_height[collection];
202      var this_width = Math.floor((this_img['width'] / this_img['height']) * this_height);
203      if (this_width > thumbnail_width) {
204        this_width = thumbnail_width;
205        this_height = Math.floor((this_img['height'] / this_img['width']) * this_width);
206      }
207      this_src = this_img['src'].replace('x=' + this_img['width'], 'x=' + this_width);
208      this_src = this_src.replace('y=' + this_img['height'], 'y=' 

208+ this_height);
209
210      thumbnails += "<img src='" + this_src + "' style='height: " + this_height + "px; width: " + this_width + "px; float: left;' />";
211    }
212    thumbnails += "</div>";
213  }
214
215  $('body').append('<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;" data-fullscreenid="' + fullscreenid + '" data-collection="' + collection + '" class="mme_fullscreen not_loaded ' + fullscreen_class + '"><div class="mme_fullscreen_img" style="height:' + f_height + 'px;width:' + f_width + 'px;margin: 0 auto;"><img src="' + fullscreenimg + '" onClick="clear_fullscreen();" class="not_loaded_spinner" style="position: absolute; top: 50%; margin-top:  -' + (Math.round((parseInt(f_height) + parseInt(thumbnail_height[collection])) / 2)) + 'px;width: ' + f_width + 'px; height: ' + f_height + 'px; ' + style + '"/>' + mask_svg + '<div onclick="clear_fullscreen();" class="close_button">' + schliessen_text + '</div><div class="next_bild" style="display: none;">&nbsp;</div><div class="prev_bild" style="display: none;">&nbsp;</div>' + thumbnails + '</div></div>');
216  add_loading_spinner_event();
217
218  //} else {
219  //	$('body').append('<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;" class="mme_fullscreen"><img src="'+fullscreenimg+'" style="height:'+f_height+'px;width:'+f_width+'px;position:absolute;top:'+top+'px;left:'+left+'px;" onClick="clear_fullscreen();"/><div onclick="clear_fullscreen();" class="close_button">'+schliessen_text+'</div><div class="next_bild" style="display: none;">&nbsp;</div><div class="prev_bild" style="display: none;">&nbsp;</div>'+thumbnails+'</div>');
220  //}
221  $('.mme_thumbnails').css('left', ($('.mme_fullscreen').width() - $('.mme_thumbnails').width()) / 2);
222  if (typeof fullscreenimgs[collection][fullscreenid - 1] != 'undefined') {
223    $('.prev_bild').show();
224    preload_image(fullscreenimgs[collection][fullscreenid - 1]['src']);
225  }
226  if (typeof fullscreenimgs[collection][fullscreenid + 1] != 'undefined') {
227    $('.next_bild').show();
228    preload_image(fullscreenimgs[collection][fullscreenid + 1]['src']);
229  }
230
231  load_change_image_events(collection, ((fullscreenimgs[collection]).length - 1));
232
233
234  //Swipe Events einbinden, aber nur auf Touchscreen Clients.
235  if (Modernizr.touch) {
236    load_swipe();
237  }
238  $('body').addClass('no-scroll');
239
240}
241function load_change_image_events(collection, last_image_id) {
242  $('.prev_bild').click(function () {
243    prev_fullscreen();
244    return false;
245  });
246  $('.next_bild').click(function () {
247    next_fullscreen();
248    return false;
249  });
250  $(document).bind('keydown', 'esc', function (evt) {
251    clear_fullscreen();
252    return false;
253  });
254  $(document).bind('keydown', 'right', function (evt) {
255    next_fullscreen();
256    return false;
257  });
258  $(document).bind('keydown', 'left', function (evt) {
259    prev_fullscreen();
260    return false;
261  });
262  $(document).bind('keydown', 'home', function (evt) {
263    change_fullscreen(0, collection);
264    return false;
265  });
266  $(document).bind('keydown', 'end', function (evt) {
267    change_fullscreen(last_image_id, collection);
268    return false;
269  });
270  $('.mme_fullscreen').on("click", function (event) {
271    if ($(event.target).parent().hasClass('mme_thumbnails')) {
272      change_fullscreen($(event.target).index(), collection)
273    } else {
274      clear_fullscreen();
275    }
276  });
277}
278
279
280function load_swipe() {
281  $(window).swiperight(function () {
282    prev_fullscreen();
283  });
284  $(window).swipeleft(function () {
285    next_fullscreen();
286  });
287}
288function next_fullscreen() {
289  change_fullscreen($('.mme_fullscreen').data('fullscreenid') + 1, $('.mme_fullscreen').data('collection'));
290}
291function prev_fullscreen() {
292  change_fullscreen($('.mme_fullscreen').data('fullscreenid') - 1, $('.mme_fullscreen').data('collection'));
293}
294function change_fullscreen(fullscreenid, collection) {
295  if (typeof fullscreenimgs[collection][fullscreenid] != 'undefined') {
296    if (typeof fullscreenimgs[collection][fullscreenid - 1] != 'undefined') {
297      $('.prev_bild').show();
298      preload_image(fullscreenimgs[collection][fullscreenid - 1]['src']);
299    } else {
300      $('.prev_bild').hide();
301    }
302    if (typeof fullscreenimgs[collection][fullscreenid + 1] != 'undefined') {
303      $('.next_bild').show();
304      preload_image(fullscreenimgs[collection][fullscreenid + 1]['src']);
305    } else {
306      $('.next_bild').hide();
307    }
308    var fullscreenimg = fullscreenimgs[collection][fullscreenid]['src'];
309    var f_height = fullscreenimgs[collection][fullscreenid]['height'];
310    var f_width = fullscreenimgs[collection][fullscreenid]['width'];
311    //var top =  ($('.mme_curtain').height()-f_height-thumbnail_height[collection])/2;
312    //var left = ($('.mme_curtain').width()-f_width)/2;
313    var style = "";
314    var mask_svg = "";
315    if (typeof fullscreenimgs[collection][fullscreenid]['mask'] != 'undefined') {
316      var mask = fullscreenimgs[collection][fullscreenid]['mask'];
317      var params = get_transparency_mask_params(mask, f_width, f_height);
318
319      mask_svg = params.mask_svg;
320      style = params.style;
321    }
322
323    $('.mme_fullscreen_img').css("height", f_height).css("width", f_width);
324    $($('.mme_fullscreen img')[0]).replaceWith('<img src="' + fullscreenimg + '" style="position: absolute; top: 50%; margin-top:  -' + (Math.round((parseInt(f_height) + parseInt(thumbnail_height[collection])) / 2)) + 'px; width: ' + f_width + 'px; height: ' + f_height + 'px;' + style + '" onClick="clear_fullscreen();" class="not_loaded_spinner"/>' + mask_svg);
325    $('.mme_fullscreen').data('fullscreenid', fullscreenid);
326    add_loading_spinner_event();
327
328  }
329}
330function clear_fullscreen() {
331  debugger;
332  $(".mme_curtain").fadeOut(400, function () {
333    $(this).remove();
334  });
335  $(".mme_fullscreen").fadeOut(400, function () {
336    $(this).remove();
337  });
338  $('body').removeClass('no-scroll');
339  $(document).unbind('keydown');
340  $(window).unbind('swiperight').unbind('swipeleft');
341}
342function add_fullscreen_img(fullscreenimg, collection) {
343  if (typeof thumbnail_height[collection] != 'number') {
344    if (typeof thumbnail_height[collection] == 'string' && thumbnail_height[collection].match(/([0-9.,]+)%/) !== null) {
345      var percentage = thumbnail_height[collection].replace(',', '.');
346      percentage = parseFloat(percentage) / 100;
347      thumbnail_height[collection] = Math.round(window.innerHeight * percentage);
348    } else {
349      thumbnail_height[collection] = 0;
350    }
351
352  }
353
354  if (typeof fullscreenimgs[collection] == 'undefined') {
355    fullscreenimgs[collection] = new Array();
356  }
357  if (thumbnail_height[collection] > 0) { //Wenn Thumbnails angezeigt werden sollen Bilderhöhe anpassen
358    if (fullscreenimg['height'] > height - thumbnail_height[collection]) {
359      var new_height = height - thumbnail_height[collection];
360      var new_width = (fullscreenimg['width'] / fullscreenimg['height']) * (new_height);
361      new_height = Math.round(new_height);
362      new_width = Math.round(new_width);
363      fullscreenimg['src'] = fullscreenimg['src'].replace('x=' + fullscreenimg['width'], 'x=' + new_width);
364      fullscreenimg['src'] = fullscreenimg['src'].replace('y=' + fullscreenimg['height'], 'y=' 

364+ new_height);
365      fullscreenimg['height'] = new_height;
366      fullscreenimg['width'] = new_width;
367    }
368  }
369  //Prüfen ob Bild bereits enthalten
370  for (var i = 0, length = fullscreenimgs[collection].length; i < length; i++) {
371    if (fullscreenimgs[collection][i]['src'] == fullscreenimg['src']) {
372      return i;
373    }
374  }
375  fullscreenimgs[collection].push(fullscreenimg);
376  return fullscreenimgs[collection].length - 1;
377}
378
379function preload_image(url) {
380  for (x in cache) {
381    if (cache[x].src == url) return;
382  }
383  var cacheImage = document.createElement('img');
384  cacheImage.src = url;
385  cache.push(cacheImage);
386}