https://www.lateetud.com/wp-content/themes/lateetud-themes/assets/js/examples.js

1$(function() {
2  /*
3
4		Creative example - Customized layout
5	    ====================================
6
7	*/
8
9  $('[data-fancybox="cl-group"]').fancybox({
10    baseClass: "fancybox-custom-layout",
11    infobar: false,
12    touch: {
13      vertical: false
14    },
15    buttons: ["close", "thumbs", "share"],
16    animationEffect: "fade",
17    transitionEffect: "fade",
18    preventCaptionOverlap: false,
19    idleTime: false,
20    gutter: 0,
21    // Customize caption area
22    caption: function(instance) {
23      return '<h3>home</h3><p>interiors, exteriors, and the humans that inhabit them.</p><p><a href="https://unsplash.com/collections/curated/162" target="_blank">unsplash.com</a></p>';
24    }
25  });
26
27  /*
28
29		Creative example - Product quick view
30	    =====================================
31
32	*/
33
34  $(".quick_view").fancybox({
35    baseClass: "quick-view-container",
36    infobar: false,
37    buttons: false,
38    thumbs: false,
39    margin: 0,
40    touch: {
41      vertical: false
42    },
43    animationEffect: false,
44    transitionEffect: "slide",
45    transitionDuration: 500,
46    baseTpl:
47      '<div class="fancybox-container" role="dialog">' +
48      '<div class="quick-view-content">' +
49      '<div class="quick-view-carousel">' +
50      '<div class="fancybox-stage"></div>' +
51      "</div>" +
52      '<div class="quick-view-aside"></div>' +
53      '<button data-fancybox-close class="quick-view-close">X</button>' +
54      "</div>" +
55      "</div>",
56
57    onInit: function(instance) {
58      /*
59
60			    #1 Create bullet navigation links
61			    =================================
62
63			*/
64
65      var bullets = '<ul class="quick-view-bullets">';
66
67      for (var i = 0; i < instance.group.length; i++) {
68        bullets += '<li><a data-index="' + i + '" href="javascript:;"><span>' + (i + 1) + "</span></a></li>";
69      }
70
71      bullets += "</ul>";
72
73      $(bullets)
74        .on("click touchstart", "a", function() {
75          var index = $(this).data("index");
76
77          $.fancybox.getInstance(function() {
78            this.jumpTo(index);
79          });
80        })
81        .appendTo(instance.$refs.container.find(".quick-view-carousel"));
82
83      /*
84
85			    #2 Add product form
86			    ===================
87
88			*/
89
90      var $element = instance.group[instance.currIndex].opts.$orig;
91      var form_id = $element.data("qw-form");
92
93      instance.$refs.container.find(".quick-view-aside").append(
94        // In this example, this element contains the form
95        $("#" + form_id)
96          .clone(true)
97          .removeClass("hidden")
98      );
99    },
100
101    beforeShow: function(instance) {
102      /*
103			    Mark current bullet navigation link as active
104			*/
105
106      instance.$refs.container
107        .find(".quick-view-bullets")
108        .children()
109        .removeClass("active")
110        .eq(instance.currIndex)
111        .addClass("active");
112    }
113  });
114
115  /*
116
117	    Creative example - Confirm dialog
118
119	    See demo on CodePen: https://codepen.io/fancyapps/full/Ebmqgv/
120	    ===========================================================
121
122	*/
123
124  // Step 1: Create reusable jQuery plugin
125  // =====================================
126
127  $.fancyConfirm = function(opts) {
128    opts = $.extend(
129      true,
130      {
131        title: "Are you sure?",
132        message: "",
133        okButton: "OK",
134        noButton: "Cancel",
135        callback: $.noop
136      },
137      opts || {}
138    );
139
140    $.fancybox.open({
141      type: "html",
142      src:
143        '<div class="fc-content p-5 rounded">' +
144        '<h2 class="mb-3">' +
145        opts.title +
146        "</h2>" +
147        "<p>" +
148        opts.message +
149        "</p>" +
150        '<p class="text-right">' +
151        '<a data-value="0" data-fancybox-close href="javascript:;" class="mr-2">' +
152        opts.noButton +
153        "</a>" +
154        '<button data-value="1" data-fancybox-close class="btn btn-primary">' +
155        opts.okButton +
156        "</button>" +
157        "</p>" +
158        "</div>",
159      opts: {
160        animationDuration: 350,
161        animationEffect: "material",
162        modal: true,
163        baseTpl:
164          '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
165          '<div class="fancybox-bg"></div>' +
166          '<div class="fancybox-inner">' +
167          '<div class="fancybox-stage"></div>' +
168          "</div>" +
169          "</div>",
170        afterClose: function(instance, current, e) {
171          var button = e ? e.target || e.currentTarget : null;
172          var value = button ? $(button).data("value") : 0;
173
174          opts.callback(value);
175        }
176      }
177    });

178  };
179
180  // Step 2: Start using it!
181  // =======================
182
183  $("#test_confirm").click(function() {
184    // Open customized confirmation dialog window
185    $.fancyConfirm({
186      title: "Use Google's location service?",
187      message:
188        "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running",
189      okButton: "Agree",
190      noButton: "Disagree",
191      callback: function(value) {
192        if (value) {
193          $("#test_confirm_rez").html("Let's do this!");
194        } else {
195          $("#test_confirm_rez").html("Maybe later.");
196        }
197      }
198    });
199  });
200
201  /*
202
203		Creative example - Morphing modal window
204
205	    See demo on CodePen: https://codepen.io/fancyapps/full/xPdvdp/
206	    ==============================================================
207
208	*/
209
210  // Step 1: Create jQuery plugin
211  // ============================
212
213  $.fn.fancyMorph = function(opts) {
214    var Morphing = function($btn, opts) {
215      var self = this;
216
217      self.opts = $.extend(
218        {
219          animationEffect: false,
220          infobar: false,
221          buttons: ["close"],
222          smallBtn: false,
223          touch: false,
224          baseClass: "fancybox-morphing",
225          afterClose: function() {
226            self.close();
227          }
228        },
229        opts
230      );
231
232      self.init($btn);
233    };
234
235    Morphing.prototype.init = function($btn) {
236      var self = this;
237
238      self.$btn = $btn.addClass("morphing-btn");
239
240      self.$clone = $('<div class="morphing-btn-clone" />')
241        .hide()
242        .insertAfter($btn);
243
244      // Add wrapping element and set initial width used for positioning
245      $btn.wrap('<span class="morphing-btn-wrap"></span>').on("click", function(e) {
246        e.preventDefault();
247
248        self.start();
249      });
250    };
251
252    Morphing.prototype.start = function() {
253      var self = this;
254
255      if (self.$btn.hasClass("morphing-btn_circle")) {
256        return;
257      }
258
259      // Set initial width, because it is not possible to start CSS transition from "auto"
260      self.$btn
261        .width(self.$btn.width())
262        .parent()
263        .width(self.$btn.outerWidth());
264
265      self.$btn
266        .off(".fm")
267        .on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
268          if (e.originalEvent.propertyName === "width") {
269            self.$btn.off(".fm");
270
271            self.animateBg();
272          }
273        })
274        .addClass("morphing-btn_circle");
275    };
276
277    Morphing.prototype.animateBg = function() {
278      var self = this;
279
280      self.scaleBg();
281
282      self.$clone.show();
283
284      // Trigger repaint
285      self.$clone[0].offsetHeight;
286
287      self.$clone
288        .off(".fm")
289        .on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
290          self.$clone.off(".fm");
291
292          self.complete();
293        })
294        .addClass("morphing-btn-clone_visible");
295    };
296
297    Morphing.prototype.scaleBg = function() {
298      var self = this;
299
300      var $clone = self.$clone;
301      var scale = self.getScale();
302      var $btn = self.$btn;
303      var pos = $btn.offset();
304
305      $clone.css({
306        top: pos.top + $btn.outerHeight() * 0.5 - $btn.outerHeight() * scale * 0.5 - $(window).scrollTop(),
307        left: pos.left + $btn.outerWidth() * 0.5 - $btn.outerWidth() * scale * 0.5 - $(window).scrollLeft(),
308        width: $btn.outerWidth() * scale,
309        height: $btn.outerHeight() * scale,
310        transform: "scale(" + 1 / scale + ")"
311      });
312    };
313
314    Morphing.prototype.getScale = function() {
315      var $btn = this.$btn,
316        radius = $btn.outerWidth() * 0.5,
317        left = $btn.offset().left + radius - $(window).scrollLeft(),
318        top = $btn.offset().top + radius - $(window).scrollTop(),
319        windowW = $(window).width(),
320        windowH = $(window).height();
321
322      var maxDistHor = left > windowW / 2 ? left : windowW - left,
323        maxDistVert = top > windowH / 2 ? top : windowH - top;
324
325      return Math.ceil(Math.sqrt(Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2)) / radius);
326    };
327
328    Morphing.prototype.complete = function() {
329      var self = this;
330      var $btn = self.$btn;
331
332      $.fancybox.open({src: $btn.data("src") || $btn.attr("href")}, self.opts);
333    };
334
335    Morphing.prototype.close = function() {
336      var self = this;
337      var $clone = self.$clone;
338
339      self.scaleBg();
340
341      $clone.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
342        $clone.hide();
343
344        self.$btn.removeClass("morphing-btn_circle");
345      });
346
347      $clone.removeClass("morphing-btn-clone_visible");
348
349      $(window).off("resize.fm");
350    };
351
352    // Init
353    this.each(function() {
354      var $this = $(this);
355
356      if (!$this.data("morphing")) {
357        $this.data("morphing", new Morphing($this, opts));
358      }
359    });

360
361    return this;
362  };
363
364  // Step 2: Start using it!
365  // =======================
366
367  $("[data-morphing]").fancyMorph({
368    hash: "morphing"
369  });
370});