Loading jQuery with AJAX -
like of know, jquery gets loaded/"activated" on page load if bring content via ajax code requires few modifications or restart in cases.
i make fitvids inside magnific popup work in ajax loaded content. attemps has been failed while repaired bootstrap tooltips , few other minor things.
fitvids inside main.js
(function( $ ) { "use strict"; $.fn.fitvids = function( options ) { var settings = { customselector: null, ignore: null, }; if(!document.getelementbyid('fit-vids-style')) { // appendstyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js var head = document.head || document.getelementsbytagname('head')[0]; var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; var div = document.createelement('div'); div.innerhtml = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; head.appendchild(div.childnodes[1]); } if ( options ) { $.extend( settings, options ); } return this.each(function(){ var selectors = [ "iframe[src*='player.vimeo.com']", "iframe[src*='youtube.com']", "iframe[src*='youtube-nocookie.com']", "iframe[src*='kickstarter.com'][src*='video.html']", "object", "embed" ]; if (settings.customselector) { selectors.push(settings.customselector); } var ignorelist = '.fitvidsignore'; if(settings.ignore) { ignorelist = ignorelist + ', ' + settings.ignore; } var $allvideos = $(this).find(selectors.join(',')); $allvideos = $allvideos.not("object object"); // swfobj conflict patch $allvideos = $allvideos.not(ignorelist); // disable fitvids on video. $allvideos.each(function(){ var $this = $(this); if($this.parents(ignorelist).length > 0) { return; // disable fitvids on video. } if (this.tagname.tolowercase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } if ((!$this.css('height') && !$this.css('width')) && (isnan($this.attr('height')) || isnan($this.attr('width')))) { $this.attr('height', 9); $this.attr('width', 16); } var height = ( this.tagname.tolowercase() === 'object' || ($this.attr('height') && !isnan(parseint($this.attr('height'), 10))) ) ? parseint($this.attr('height'), 10) : $this.height(), width = !isnan(parseint($this.attr('width'), 10)) ? parseint($this.attr('width'), 10) : $this.width(), aspectratio = height / width; if(!$this.attr('id')){ var videoid = 'fitvid' + math.floor(math.random()*999999); $this.attr('id', videoid); } $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectratio * 100)+"%"); $this.removeattr('height').removeattr('width'); }); }); }; // works either jquery or zepto })( window.jquery || window.zepto ); ; some fitvids + popup in main.js
jquery(document).find('.property-video-popup').magnificpopup({ type: 'iframe' }); html triggers popup
<a href=" video url " class="property-video-popup"> icon, text, tooltip etc </a> it seems wrong popup - it's separate min.js file. managed unminify should warn - it's rather long. there's character limit, forced cut off.. let me know if there's important that's missing!
(function(e) { var t, n, i, o, r, a, s, l = "close", c = "beforeclose", d = "afterclose", u = "beforeappend", p = "markupparse", f = "open", m = "change", g = "mfp", h = "." + g, v = "mfp-ready", c = "mfp-removing", y = "mfp-prevent-close", w = function() {}, b = !! window.jquery, = e(window), x = function(e, n) { t.ev.on(g + e + h, n) }, k = function(t, n, i, o) { var r = document.createelement("div"); return r.classname = "mfp-" + t, && (r.innerhtml = i), o ? n && n.appendchild(r) : (r = e(r), n && r.appendto(n)), r }, t = function(n, i) { t.ev.triggerhandler(g + n, i), t.st.callbacks && (n = n.charat(0).tolowercase() + n.slice(1), t.st.callbacks[n] && t.st.callbacks[n].apply(t, e.isarray(i) ? : [i])) }, e = function(n) { return n === s && t.currtemplate.closebtn || (t.currtemplate.closebtn = e(t.st.closemarkup.replace("%title%", t.st.tclose)), s = n), t.currtemplate.closebtn }, _ = function() { e.magnificpopup.instance || (t = new w, t.init(), e.magnificpopup.instance = t) }, s = function() { var e = document.createelement("p").style, t = ["ms", "o", "moz", "webkit"]; if (void 0 !== e.transition) return !0; (; t.length;) if (t.pop() + "transition" in e) return !0; return !1 }; w.prototype = { constructor: w, init: function() { var n = navigator.appversion; t.isie7 = -1 !== n.indexof("msie 7."), t.isie8 = -1 !== n.indexof("msie 8."), t.islowie = t.isie7 || t.isie8, t.isandroid = /android/gi.test(n), t.isios = /iphone|ipad|ipod/gi.test(n), t.supportstransition = s(), t.probablymobile = t.isandroid || t.isios || /(opera mini)|kindle|webos|blackberry|(opera mobi)|(windows phone)|iemobile/i.test(navigator.useragent), o = e(document), t.popupscache = {} }, open: function(n) { || (i = e(document.body)); var r; if (n.isobj === !1) { t.items = n.items.toarray(), t.index = 0; var s, l = n.items; (r = 0; l.length > r; r++) if (s = l[r], s.parsed && (s = s.el[0]), s === n.el[0]) { t.index = r; break } } else t.items = e.isarray(n.items) ? n.items : [n.items], t.index = n.index || 0; if (t.isopen) return t.updateitemhtml(), void 0; t.types = [], = "", t.ev = n.mainel && n.mainel.length ? n.mainel.eq(0) : o, n.key ? (t.popupscache[n.key] || (t.popupscache[n.key] = {}), t.currtemplate = t.popupscache[n.key]) : t.currtemplate = {}, t.st = e.extend(!0, {}, e.magnificpopup.defaults, n), t.fixedcontentpos = "auto" === t.st.fixedcontentpos ? !t.probablymobile : t.st.fixedcontentpos, t.st.modal && (t.st.closeoncontentclick = !1, t.st.closeonbgclick = !1, t.st.showclosebtn = !1, t.st.enableescapekey = !1), t.bgoverlay || (t.bgoverlay = k("bg").on("click" + h, function() { t.close() }), t.wrap = k("wrap").attr("tabindex", -1).on("click" + h, function(e) { t._checkifclose(e.target) && t.close() }), t.container = k("container", t.wrap)), t.contentcontainer = k("content"), t.st.preloader && (t.preloader = k("preloader", t.container, t.st.tloading)); var c = e.magnificpopup.modules; (r = 0; c.length > r; r++) { var d = c[r]; d = d.charat(0).touppercase() + d.slice(1), t["init" + d].call(t) } t("beforeopen"), t.st.showclosebtn && (t.st.closebtninside ? (x(p, function(e, t, n, i) { n.close_replacewith = e(i.type) }), += " mfp-close-btn-in") : t.wrap.append(e())), t.st.aligntop && (a += " mfp-align-top"), t.fixedcontentpos ? t.wrap.css({ overflow: t.st.overflowy, overflowx: "hidden", overflowy: t.st.overflowy }) : t.wrap.css({ top: i.scrolltop(), position: "absolute" }), (t.st.fixedbgpos === !1 || "auto" === t.st.fixedbgpos && !t.fixedcontentpos) && t.bgoverlay.css({ height: o.height(), position: "absolute" }), t.st.enableescapekey && o.on("keyup" + h, function(e) { 27 === e.keycode && t.close() }), i.on("resize" + h, function() { t.updatesize() }), t.st.closeoncontentclick || (a += " mfp-auto-cursor"), && t.wrap.addclass(a); var u = t.wh = i.height(), m = {}; if (t.fixedcontentpos && t._hasscrollbar(u)) { var g = t._getscrollbarsize(); g && (m.marginright = g) } t.fixedcontentpos && (t.isie7 ? e("body, html").css("overflow", "hidden") : m.overflow = "hidden"); var c = t.st.mainclass; return t.isie7 && (c += " mfp-ie7"), c && t._addclasstomfp(c), t.updateitemhtml(), t("buildcontrols"), e("html").css(m), t.bgoverlay.add(t.wrap).prependto(t.st.prependto || i), t._lastfocusedel = document.activeelement, settimeout(function() { t.content ? (t._addclasstomfp(v), t._setfocus()) : t.bgoverlay.addclass(v), o.on("focusin" + h, t._onfocusin) }, 16), t.isopen = !0, t.updatesize(u), t(f), n }, close: function() { t.isopen && (t(c), t.isopen = !1, t.st.removaldelay && !t.islowie && t.supportstransition ? (t._addclasstomfp(c), settimeout(function() { t._close() }, t.st.removaldelay)) : t._close()) }, _close: function() { t(l); var n = c + " " + v + " "; if (t.bgoverlay.detach(), t.wrap.detach(), t.container.empty(), t.st.mainclass && (n += t.st.mainclass + " "), t._removeclassfrommfp(n), t.fixedcontentpos) { var = { marginright: "" }; t.isie7 ? e("body, html").css("overflow", "") : i.overflow = "", e("html").css(i) } o.off("keyup" + h + " focusin" + h), t.ev.off(h), t.wrap.attr("class", "mfp-wrap").removeattr("style"), t.bgoverlay.attr("class", "mfp-bg"), t.container.attr("class", "mfp-container"), !t.st.showclosebtn || t.st.closebtninside && t.currtemplate[t.curritem.type] !== !0 || t.currtemplate.closebtn && t.currtemplate.closebtn.detach(), t._lastfocusedel && e(t._lastfocusedel).focus(), t.curritem = null, t.content = null, t.currtemplate = null, t.prevheight = 0, t(d) }, updatesize: function(e) { if (t.isios) { var n = document.documentelement.clientwidth / window.innerwidth, = window.innerheight * n; t.wrap.css("height", i), t.wh = } else t.wh = e || i.height(); t.fixedcontentpos || t.wrap.css("height", t.wh), t("resize") }, updateitemhtml: function() { var n = t.items[t.index]; t.contentcontainer.detach(), t.content && t.content.detach(), n.parsed || (n = t.parseel(t.index)); var = n.type; if (t("beforechange", [t.curritem ? t.curritem.type : "", i]), t.curritem = n, !t.currtemplate[i]) { var o = t.st[i] ? t.st[i].markup : !1; t("firstmarkupparse", o), t.currtemplate[i] = o ? e(o) : !0 } r && r !== n.type && t.container.removeclass("mfp-" + r + "-holder"); var = t["get" + i.charat(0).touppercase() + i.slice(1)](n, t.currtemplate[i]); t.appendcontent(a, i), n.preloaded = !0, t(m, n), r = n.type, t.container.prepend(t.contentcontainer), t("afterchange") character limit!!!!!
this kind of workaround solution. can following steps reinitialize plugin every time ajax triggered
- clone existing popup links (with out events)
- delete original elements
- append cloned items
- initialize plugin again. (thus plugin add events newly added elements).
try running below code once ajax success , new elements created.
var $popups = jquery('.property-video-popup'); var $clones = $popups.clone(); $clones.each(function(index,elem){ var $popup = $popups.eq(index); jquery(elem).insertafter($popup); $popup.remove(); }) jquery('.property-video-popup').magnificpopup({ type: 'iframe' }); 
Comments
Post a Comment