371 lines
9.7 KiB
JavaScript
371 lines
9.7 KiB
JavaScript
|
$(function() {
|
||
|
|
/*
|
||
|
|
|
||
|
|
Creative example - Customized layout
|
||
|
|
====================================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
$('[data-fancybox="cl-group"]').fancybox({
|
||
|
|
baseClass: "fancybox-custom-layout",
|
||
|
|
infobar: false,
|
||
|
|
touch: {
|
||
|
|
vertical: false
|
||
|
|
},
|
||
|
|
buttons: ["close", "thumbs", "share"],
|
||
|
|
animationEffect: "fade",
|
||
|
|
transitionEffect: "fade",
|
||
|
|
preventCaptionOverlap: false,
|
||
|
|
idleTime: false,
|
||
|
|
gutter: 0,
|
||
|
|
// Customize caption area
|
||
|
|
caption: function(instance) {
|
||
|
|
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>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
Creative example - Product quick view
|
||
|
|
=====================================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
$(".quick_view").fancybox({
|
||
|
|
baseClass: "quick-view-container",
|
||
|
|
infobar: false,
|
||
|
|
buttons: false,
|
||
|
|
thumbs: false,
|
||
|
|
margin: 0,
|
||
|
|
touch: {
|
||
|
|
vertical: false
|
||
|
|
},
|
||
|
|
animationEffect: false,
|
||
|
|
transitionEffect: "slide",
|
||
|
|
transitionDuration: 500,
|
||
|
|
baseTpl:
|
||
|
|
'<div class="fancybox-container" role="dialog">' +
|
||
|
|
'<div class="quick-view-content">' +
|
||
|
|
'<div class="quick-view-carousel">' +
|
||
|
|
'<div class="fancybox-stage"></div>' +
|
||
|
|
"</div>" +
|
||
|
|
'<div class="quick-view-aside"></div>' +
|
||
|
|
'<button data-fancybox-close class="quick-view-close">X</button>' +
|
||
|
|
"</div>" +
|
||
|
|
"</div>",
|
||
|
|
|
||
|
|
onInit: function(instance) {
|
||
|
|
/*
|
||
|
|
|
||
|
|
#1 Create bullet navigation links
|
||
|
|
=================================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
var bullets = '<ul class="quick-view-bullets">';
|
||
|
|
|
||
|
|
for (var i = 0; i < instance.group.length; i++) {
|
||
|
|
bullets += '<li><a data-index="' + i + '" href="javascript:;"><span>' + (i + 1) + "</span></a></li>";
|
||
|
|
}
|
||
|
|
|
||
|
|
bullets += "</ul>";
|
||
|
|
|
||
|
|
$(bullets)
|
||
|
|
.on("click touchstart", "a", function() {
|
||
|
|
var index = $(this).data("index");
|
||
|
|
|
||
|
|
$.fancybox.getInstance(function() {
|
||
|
|
this.jumpTo(index);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.appendTo(instance.$refs.container.find(".quick-view-carousel"));
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
#2 Add product form
|
||
|
|
===================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
var $element = instance.group[instance.currIndex].opts.$orig;
|
||
|
|
var form_id = $element.data("qw-form");
|
||
|
|
|
||
|
|
instance.$refs.container.find(".quick-view-aside").append(
|
||
|
|
// In this example, this element contains the form
|
||
|
|
$("#" + form_id)
|
||
|
|
.clone(true)
|
||
|
|
.removeClass("hidden")
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeShow: function(instance) {
|
||
|
|
/*
|
||
|
|
Mark current bullet navigation link as active
|
||
|
|
*/
|
||
|
|
|
||
|
|
instance.$refs.container
|
||
|
|
.find(".quick-view-bullets")
|
||
|
|
.children()
|
||
|
|
.removeClass("active")
|
||
|
|
.eq(instance.currIndex)
|
||
|
|
.addClass("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
Creative example - Confirm dialog
|
||
|
|
|
||
|
|
See demo on CodePen: https://codepen.io/fancyapps/full/Ebmqgv/
|
||
|
|
===========================================================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Step 1: Create reusable jQuery plugin
|
||
|
|
// =====================================
|
||
|
|
|
||
|
|
$.fancyConfirm = function(opts) {
|
||
|
|
opts = $.extend(
|
||
|
|
true,
|
||
|
|
{
|
||
|
|
title: "Are you sure?",
|
||
|
|
message: "",
|
||
|
|
okButton: "OK",
|
||
|
|
noButton: "Cancel",
|
||
|
|
callback: $.noop
|
||
|
|
},
|
||
|
|
opts || {}
|
||
|
|
);
|
||
|
|
|
||
|
|
$.fancybox.open({
|
||
|
|
type: "html",
|
||
|
|
src:
|
||
|
|
'<div class="fc-content p-5 rounded">' +
|
||
|
|
'<h2 class="mb-3">' +
|
||
|
|
opts.title +
|
||
|
|
"</h2>" +
|
||
|
|
"<p>" +
|
||
|
|
opts.message +
|
||
|
|
"</p>" +
|
||
|
|
'<p class="text-right">' +
|
||
|
|
'<a data-value="0" data-fancybox-close href="javascript:;" class="mr-2">' +
|
||
|
|
opts.noButton +
|
||
|
|
"</a>" +
|
||
|
|
'<button data-value="1" data-fancybox-close class="btn btn-primary">' +
|
||
|
|
opts.okButton +
|
||
|
|
"</button>" +
|
||
|
|
"</p>" +
|
||
|
|
"</div>",
|
||
|
|
opts: {
|
||
|
|
animationDuration: 350,
|
||
|
|
animationEffect: "material",
|
||
|
|
modal: true,
|
||
|
|
baseTpl:
|
||
|
|
'<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
|
||
|
|
'<div class="fancybox-bg"></div>' +
|
||
|
|
'<div class="fancybox-inner">' +
|
||
|
|
'<div class="fancybox-stage"></div>' +
|
||
|
|
"</div>" +
|
||
|
|
"</div>",
|
||
|
|
afterClose: function(instance, current, e) {
|
||
|
|
var button = e ? e.target || e.currentTarget : null;
|
||
|
|
var value = button ? $(button).data("value") : 0;
|
||
|
|
|
||
|
|
opts.callback(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Step 2: Start using it!
|
||
|
|
// =======================
|
||
|
|
|
||
|
|
$("#test_confirm").click(function() {
|
||
|
|
// Open customized confirmation dialog window
|
||
|
|
$.fancyConfirm({
|
||
|
|
title: "Use Google's location service?",
|
||
|
|
message:
|
||
|
|
"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running",
|
||
|
|
okButton: "Agree",
|
||
|
|
noButton: "Disagree",
|
||
|
|
callback: function(value) {
|
||
|
|
if (value) {
|
||
|
|
$("#test_confirm_rez").html("Let's do this!");
|
||
|
|
} else {
|
||
|
|
$("#test_confirm_rez").html("Maybe later.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
Creative example - Morphing modal window
|
||
|
|
|
||
|
|
See demo on CodePen: https://codepen.io/fancyapps/full/xPdvdp/
|
||
|
|
==============================================================
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Step 1: Create jQuery plugin
|
||
|
|
// ============================
|
||
|
|
|
||
|
|
$.fn.fancyMorph = function(opts) {
|
||
|
|
var Morphing = function($btn, opts) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
self.opts = $.extend(
|
||
|
|
{
|
||
|
|
animationEffect: false,
|
||
|
|
infobar: false,
|
||
|
|
buttons: ["close"],
|
||
|
|
smallBtn: false,
|
||
|
|
touch: false,
|
||
|
|
baseClass: "fancybox-morphing",
|
||
|
|
afterClose: function() {
|
||
|
|
self.close();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
opts
|
||
|
|
);
|
||
|
|
|
||
|
|
self.init($btn);
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.init = function($btn) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
self.$btn = $btn.addClass("morphing-btn");
|
||
|
|
|
||
|
|
self.$clone = $('<div class="morphing-btn-clone" />')
|
||
|
|
.hide()
|
||
|
|
.insertAfter($btn);
|
||
|
|
|
||
|
|
// Add wrapping element and set initial width used for positioning
|
||
|
|
$btn.wrap('<span class="morphing-btn-wrap"></span>').on("click", function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
self.start();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.start = function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if (self.$btn.hasClass("morphing-btn_circle")) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set initial width, because it is not possible to start CSS transition from "auto"
|
||
|
|
self.$btn
|
||
|
|
.width(self.$btn.width())
|
||
|
|
.parent()
|
||
|
|
.width(self.$btn.outerWidth());
|
||
|
|
|
||
|
|
self.$btn
|
||
|
|
.off(".fm")
|
||
|
|
.on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
|
||
|
|
if (e.originalEvent.propertyName === "width") {
|
||
|
|
self.$btn.off(".fm");
|
||
|
|
|
||
|
|
self.animateBg();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.addClass("morphing-btn_circle");
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.animateBg = function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
self.scaleBg();
|
||
|
|
|
||
|
|
self.$clone.show();
|
||
|
|
|
||
|
|
// Trigger repaint
|
||
|
|
self.$clone[0].offsetHeight;
|
||
|
|
|
||
|
|
self.$clone
|
||
|
|
.off(".fm")
|
||
|
|
.on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
|
||
|
|
self.$clone.off(".fm");
|
||
|
|
|
||
|
|
self.complete();
|
||
|
|
})
|
||
|
|
.addClass("morphing-btn-clone_visible");
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.scaleBg = function() {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
var $clone = self.$clone;
|
||
|
|
var scale = self.getScale();
|
||
|
|
var $btn = self.$btn;
|
||
|
|
var pos = $btn.offset();
|
||
|
|
|
||
|
|
$clone.css({
|
||
|
|
top: pos.top + $btn.outerHeight() * 0.5 - $btn.outerHeight() * scale * 0.5 - $(window).scrollTop(),
|
||
|
|
left: pos.left + $btn.outerWidth() * 0.5 - $btn.outerWidth() * scale * 0.5 - $(window).scrollLeft(),
|
||
|
|
width: $btn.outerWidth() * scale,
|
||
|
|
height: $btn.outerHeight() * scale,
|
||
|
|
transform: "scale(" + 1 / scale + ")"
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.getScale = function() {
|
||
|
|
var $btn = this.$btn,
|
||
|
|
radius = $btn.outerWidth() * 0.5,
|
||
|
|
left = $btn.offset().left + radius - $(window).scrollLeft(),
|
||
|
|
top = $btn.offset().top + radius - $(window).scrollTop(),
|
||
|
|
windowW = $(window).width(),
|
||
|
|
windowH = $(window).height();
|
||
|
|
|
||
|
|
var maxDistHor = left > windowW / 2 ? left : windowW - left,
|
||
|
|
maxDistVert = top > windowH / 2 ? top : windowH - top;
|
||
|
|
|
||
|
|
return Math.ceil(Math.sqrt(Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2)) / radius);
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.complete = function() {
|
||
|
|
var self = this;
|
||
|
|
var $btn = self.$btn;
|
||
|
|
|
||
|
|
$.fancybox.open({src: $btn.data("src") || $btn.attr("href")}, self.opts);
|
||
|
|
};
|
||
|
|
|
||
|
|
Morphing.prototype.close = function() {
|
||
|
|
var self = this;
|
||
|
|
var $clone = self.$clone;
|
||
|
|
|
||
|
|
self.scaleBg();
|
||
|
|
|
||
|
|
$clone.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
|
||
|
|
$clone.hide();
|
||
|
|
|
||
|
|
self.$btn.removeClass("morphing-btn_circle");
|
||
|
|
});
|
||
|
|
|
||
|
|
$clone.removeClass("morphing-btn-clone_visible");
|
||
|
|
|
||
|
|
$(window).off("resize.fm");
|
||
|
|
};
|
||
|
|
|
||
|
|
// Init
|
||
|
|
this.each(function() {
|
||
|
|
var $this = $(this);
|
||
|
|
|
||
|
|
if (!$this.data("morphing")) {
|
||
|
|
$this.data("morphing", new Morphing($this, opts));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Step 2: Start using it!
|
||
|
|
// =======================
|
||
|
|
|
||
|
|
$("[data-morphing]").fancyMorph({
|
||
|
|
hash: "morphing"
|
||
|
|
});
|
||
|
|
});
|