Placing jquery navigation buttons over slider

Placing jquery navigation buttons over slider - javascript

Thanks man,
It took me a while but here's the code. I hope this works. I've never used this forum before.
My Code:
<html>
<div class="container">
<div id="slides">
<img src="_images/aqw.png" data-title="ALLIANCE QUARTETT WIEN: ">
<img src="_images/aqw2.jpg">
<img src="_images/eme.png">
<img src="_images/eme2.jpg">
<img src="_images/zen.png">
<img src="_images/zen2.png">
<img src="_images/cts.png">
<img src="_images/cts2.jpg">
<img src="_images/ag2.png">
<img src="_images/ag.jpg">
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 1000,
height: 650,
play: {
active: true,
auto: true,
interval: 5000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
CSS
#slides {
display: none
}
#slides .slidesjs-navigation {
margin:10px 0 0 10px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image:url(_images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
JS
(function () {
(function (a, b, c) {
var d, e, f;
return f = "slidesjs", e = {
width: 940,
height: 528,
start: 1,
navigation: {
active: !0,
effect: "slide"
},
pagination: {
active: !0,
effect: "slide"
},
play: {
active: !1,
effect: "slide",
interval: 5e3,
auto: !1,
swap: !0,
pauseOnHover: !1,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: !0
}
},
callback: {
loaded: function () {},
start: function () {},
complete: function () {}
}
}, d = function () {
function b(b, c) {
this.element = b, this.options = a.extend(!0, {}, e, c), this._defaults = e, this._name = f, this.init()
}
return b
}(), d.prototype.init = function () {
var c, d, e, f, g, h, i = this;
return c = a(this.element), this.data = a.data(this), a.data(this, "animating", !1), a.data(this, "total", c.children().not(".slidesjs-navigation", c).length), a.data(this, "current", this.options.start - 1), a.data(this, "vendorPrefix", this._getVendorPrefix()), "undefined" != typeof TouchEvent && (a.data(this, "touch", !0), this.options.effect.slide.speed = this.options.effect.slide.speed / 2), c.css({
overflow: "hidden"
}), c.slidesContainer = c.children().not(".slidesjs-navigation", c).wrapAll("<div class='slidesjs-container'>", c).parent().css({
overflow: "hidden",
position: "relative"
}), a(".slidesjs-container", c).wrapInner("<div class='slidesjs-control'>", c).children(), a(".slidesjs-control", c).css({
position: "relative",
left: 0
}), a(".slidesjs-control", c).children().addClass("slidesjs-slide").css({
position: "absolute",
top: 0,
left: 0,
width: "100%",
zIndex: 0,
display: "none",
webkitBackfaceVisibility: "hidden"
}), a.each(a(".slidesjs-control", c).children(), function (b) {
var c;
return c = a(this), c.attr("slidesjs-index", b)
}), this.data.touch && (a(".slidesjs-control", c).on("touchstart", function (a) {
return i._touchstart(a)
}), a(".slidesjs-control", c).on("touchmove", function (a) {
return i._touchmove(a)
}), a(".slidesjs-control", c).on("touchend", function (a) {
return i._touchend(a)
})), c.fadeIn(0), this.update(), this.data.touch && this._setuptouch(), a(".slidesjs-control", c).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function () {
return a(this).css({
zIndex: 10
})
}), this.options.navigation.active && (g = a("<a>", {
"class": "slidesjs-previous slidesjs-navigation",
href: "#",
title: "Previous",
text: "Previous"
}).appendTo(c), d = a("<a>", {
"class": "slidesjs-next slidesjs-navigation",
href: "#",
title: "Next",
text: "Next"
}).appendTo(c)), a(".slidesjs-next", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.next(i.options.navigation.effect)
}), a(".slidesjs-previous", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.previous(i.options.navigation.effect)
}), this.options.play.active && (f = a("<a>", {
"class": "slidesjs-play slidesjs-navigation",
href: "#",
title: "Play",
text: "Play"
}).appendTo(c), h = a("<a>", {
"class": "slidesjs-stop slidesjs-navigation",
href: "#",
title: "Stop",
text: "Stop"
}).appendTo(c), f.click(function (a) {
return a.preventDefault(), i.play(!0)
}), h.click(function (a) {
return a.preventDefault(), i.stop(!0)
}), this.options.play.swap && h.css({
display: "none"
})), this.options.pagination.active && (e = a("<ul>", {
"class": "slidesjs-pagination"
}).appendTo(c), a.each(Array(this.data.total), function (b) {
var c, d;
return c = a("<li>", {
"class": "slidesjs-pagination-item"
}).appendTo(e), d = a("<a>", {
href: "#",
"data-slidesjs-item": b,
html: b + 1
}).appendTo(c), d.click(function (b) {
return b.preventDefault(), i.stop(!0), i.goto(1 * a(b.currentTarget).attr("data-slidesjs-item") + 1)
})
})), a(b).bind("resize", function () {
return i.update()
}), this._setActive(), this.options.play.auto && this.play(), this.options.callback.loaded(this.options.start)
}, d.prototype._setActive = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b > -1 ? b : this.data.current, a(".active", c).removeClass("active"), a("li:eq(" + d + ") a", c).addClass("active")
}, d.prototype.update = function () {
var b, c, d;
return b = a(this.element), this.data = a.data(this), a(".slidesjs-control", b).children(":not(:eq(" + this.data.current + "))").css({
display: "none",
left: 0,
zIndex: 0
}), d = b.width(), c = this.options.height / this.options.width * d, this.options.width = d, this.options.height = c, a(".slidesjs-control, .slidesjs-container", b).css({
width: d,
height: c
})
}, d.prototype.next = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "next"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.previous = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "previous"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.goto = function (b) {
var c, d;
if (c = a(this.element), this.data = a.data(this), void 0 === d && (d = this.options.pagination.effect), b > this.data.total ? b = this.data.total : 1 > b && (b = 1), "number" == typeof b) return "fade" === d ? this._fade(b) : this._slide(b);
if ("string" == typeof b) {
if ("first" === b) return "fade" === d ? this._fade(0) : this._slide(0);
if ("last" === b) return "fade" === d ? this._fade(this.data.total) : this._slide(this.data.total)
}
}, d.prototype._setuptouch = function () {
var b, c, d, e;
return b = a(this.element), this.data = a.data(this), e = a(".slidesjs-control", b), c = this.data.current + 1, d = this.data.current - 1, 0 > d && (d = this.data.total - 1), c > this.data.total - 1 && (c = 0), e.children(":eq(" + c + ")").css({
display: "block",
left: this.options.width
}), e.children(":eq(" + d + ")").css({
display: "block",
left: -this.options.width
})
}, d.prototype._touchstart = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b.originalEvent.touches[0], this._setuptouch(), a.data(this, "touchtimer", Number(new Date)), a.data(this, "touchstartx", d.pageX), a.data(this, "touchstarty", d.pageY), b.stopPropagation()
}, d.prototype._touchend = function (b) {
var c, d, e, f, g, h, i, j = this;
return c = a(this.element), this.data = a.data(this), h = b.originalEvent.touches[0], f = a(".slidesjs-control", c), f.position().left > .5 * this.options.width || f.position().left > .1 * this.options.width && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "previous"), this._slide()) : f.position().left < -(.5 * this.options.width) || f.position().left < -(.1 * this.options.width) && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "next"), this._slide()) : (e = this.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "translateX(0px)", f[0].style[d] = .85 * this.options.effect.slide.speed + "ms"), f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return e = j.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "", f[0].style[d] = "", f[0].style[g] = ""
}), b.stopPropagation()
}, d.prototype._touchmove = function (b) {
var c, d, e, f, g;
return c = a(this.element), this.data = a.data(this), f = b.originalEvent.touches[0], d = this.data.vendorPrefix, e = a(".slidesjs-control", c), g = d + "Transform", a.data(this, "scrolling", Math.abs(f.pageX - this.data.touchstartx) < Math.abs(f.pageY - this.data.touchstarty)), this.data.animating || this.data.scrolling || (b.preventDefault(), this._setuptouch(), e[0].style[g] = "translateX(" + (f.pageX - this.data.touchstartx) + "px)"), b.stopPropagation()
}, d.prototype.play = function (b) {
var c, d, e, f = this;
return c = a(this.element), this.data = a.data(this), !this.data.playInterval && (b && (d = this.data.current, this.data.direction = "next", "fade" === this.options.play.effect ? this._fade() : this._slide()), a.data(this, "playInterval", setInterval(function () {
return d = f.data.current, f.data.direction = "next", "fade" === f.options.play.effect ? f._fade() : f._slide()
}, this.options.play.interval)), e = a(".slidesjs-container", c), this.options.play.pauseOnHover && (e.unbind(), e.bind("mouseenter", function () {
return f.stop()
}), e.bind("mouseleave", function () {
return f.options.play.restartDelay ? a.data(f, "restartDelay", setTimeout(function () {
return f.play(!0)
}, f.options.play.restartDelay)) : f.play()
})), a.data(this, "playing", !0), a(".slidesjs-play", c).addClass("slidesjs-playing"), this.options.play.swap) ? (a(".slidesjs-play", c).hide(), a(".slidesjs-stop", c).show()) : void 0
}, d.prototype.stop = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), clearInterval(this.data.playInterval), this.options.play.pauseOnHover && b && a(".slidesjs-container", c).unbind(), a.data(this, "playInterval", null), a.data(this, "playing", !1), a(".slidesjs-play", c).removeClass("slidesjs-playing"), this.options.play.swap ? (a(".slidesjs-stop", c).hide(), a(".slidesjs-play", c).show()) : void 0
}, d.prototype._slide = function (b) {
var c, d, e, f, g, h, i, j, k, l, m = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b > -1 ? (b -= 1, l = b > d ? 1 : -1, e = b > d ? -this.options.width : this.options.width, g = b) : (l = "next" === this.data.direction ? 1 : -1, e = "next" === this.data.direction ? -this.options.width : this.options.width, g = d + l), -1 === g && (g = this.data.total - 1), g === this.data.total && (g = 0), this._setActive(g), i = a(".slidesjs-control", c), b > -1 && i.children(":not(:eq(" + d + "))").css({
display: "none",
left: 0,
zIndex: 0
}), i.children(":eq(" + g + ")").css({
display: "block",
left: l * this.options.width,
zIndex: 10
}), this.options.callback.start(d + 1), this.data.vendorPrefix ? (h = this.data.vendorPrefix, k = h + "Transform", f = h + "TransitionDuration", j = h + "TransitionTimingFunction", i[0].style[k] = "translateX(" + e + "px)", i[0].style[f] = this.options.effect.slide.speed + "ms", i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return i[0].style[k] = "", i[0].style[f] = "", i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}), a.data(m, "current", g), a.data(m, "animating", !1), i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"), i.children(":not(:eq(" + g + "))").css({
display: "none",
left: 0,
zIndex: 0
}), m.data.touch && m._setuptouch(), m.options.callback.complete(g + 1)
})) : i.stop().animate({
left: e
}, this.options.effect.slide.speed, function () {
return i.css({
left: 0
}), i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}, a.data(m, "current", g), a.data(m, "animating", !1), m.options.callback.complete(g + 1))
}))
}, d.prototype._fade = function (b) {
var c, d, e, f, g, h = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b ? (b -= 1, g = b > d ? 1 : -1, e = b) : (g = "next" === this.data.direction ? 1 : -1, e = d + g), -1 === e && (e = this.data.total - 1), e === this.data.total && (e = 0), this._setActive(e), f = a(".slidesjs-control", c), f.children(":eq(" + e + ")").css({
display: "none",
left: 0,
zIndex: 10
}), this.options.callback.start(d + 1), this.options.effect.fade.crossfade ? (f.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed), f.children(":eq(" + e + ")").stop().fadeIn(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 0
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
})) : f.children(":eq(" + d + ")").stop().fadeOut(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").stop().fadeIn(h.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 10
})
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
}))
}, d.prototype._getVendorPrefix = function () {
var a, b, d, e, f;
for (a = c.body || c.documentElement, d = a.style, e = "transition", f = ["Moz", "Webkit", "Khtml", "O", "ms"], e = e.charAt(0).toUpperCase() + e.substr(1), b = 0; f.length > b;) {
if ("string" == typeof d[f[b] + e]) return f[b];
b++
}
return !1
}, a.fn[f] = function (b) {
return this.each(function () {
return a.data(this, "plugin_" + f) ? void 0 : a.data(this, "plugin_" + f, new d(this, b))
})
}
})(jQuery, window, document)
}).call(this);
I'm new to web and clueless using javascript. I'm trying to place a the navigation buttons (next, previous and play/pause) of the link below over the image but I can't figure it out!! I would really appreciate if someone could help? Also, is there a way on that same code of making it scale as the width and height change?
http://www.slidesjs.com/examples/standard/
Thanks very much!

Add this to your Stylesheet
#slides .slidesjs-previous {
position: absolute;
top: 45%;
left: 10%;
z-index:999;
}
#slides .slidesjs-next{
position: absolute;
top: 45%;
right: 10%;
z-index:999;
}

Bring some changes in the next previous css classes according to your requirement. That is: z index margin-top/top.

Related

how to change header color with midnight.js

I would like to change the color of the menu letters.
However, some problems arise.
The problem is that when I enter this jquery code the menu gets all centered
https://imgur.com/4196CgN
The goal of this jquery is to change the color of the header when it arrives in another section by assigning it a class.
If the header is between two sections, above it takes the color of the previous section, and below it takes the color of the next section.
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){var e=0,s=Array.prototype.slice;t.cleanData=function(e){return function(s){var i,n,o;for(o=0;null!=(n=s[o]);o++)try{i=t._data(n,"events"),i&&i.remove&&t(n).triggerHandler("remove")}catch(r){}e(s)}}(t.cleanData),t.widget=function(e,s,i){var n,o,r,a,h={},d=e.split(".")[0];return e=e.split(".")[1],n=d+"-"+e,i||(i=s,s=t.Widget),t.expr[":"][n.toLowerCase()]=function(e){return!!t.data(e,n)},t[d]=t[d]||{},o=t[d][e],r=t[d][e]=function(t,e){return this._createWidget?void(arguments.length&&this._createWidget(t,e)):new r(t,e)},t.extend(r,o,{version:i.version,_proto:t.extend({},i),_childConstructors:[]}),a=new s,a.options=t.widget.extend({},a.options),t.each(i,function(e,i){return t.isFunction(i)?void(h[e]=function(){var t=function(){return s.prototype[e].apply(this,arguments)},n=function(t){return s.prototype[e].apply(this,t)};return function(){var e,s=this._super,o=this._superApply;return this._super=t,this._superApply=n,e=i.apply(this,arguments),this._super=s,this._superApply=o,e}}()):void(h[e]=i)}),r.prototype=t.widget.extend(a,{widgetEventPrefix:o?a.widgetEventPrefix||e:e},h,{constructor:r,namespace:d,widgetName:e,widgetFullName:n}),o?(t.each(o._childConstructors,function(e,s){var i=s.prototype;t.widget(i.namespace+"."+i.widgetName,r,s._proto)}),delete o._childConstructors):s._childConstructors.push(r),t.widget.bridge(e,r),r},t.widget.extend=function(e){for(var i,n,o=s.call(arguments,1),r=0,a=o.length;a>r;r++)for(i in o[r])n=o[r][i],o[r].hasOwnProperty(i)&&void 0!==n&&(e[i]=t.isPlainObject(n)?t.isPlainObject(e[i])?t.widget.extend({},e[i],n):t.widget.extend({},n):n);return e},t.widget.bridge=function(e,i){var n=i.prototype.widgetFullName||e;t.fn[e]=function(o){var r="string"==typeof o,a=s.call(arguments,1),h=this;return o=!r&&a.length?t.widget.extend.apply(null,[o].concat(a)):o,r?this.each(function(){var s,i=t.data(this,n);return"instance"===o?(h=i,!1):i?t.isFunction(i[o])&&"_"!==o.charAt(0)?(s=i[o].apply(i,a),s!==i&&void 0!==s?(h=s&&s.jquery?h.pushStack(s.get()):s,!1):void 0):t.error("no such method '"+o+"' for "+e+" widget instance"):t.error("cannot call methods on "+e+" prior to initialization; attempted to call method '"+o+"'")}):this.each(function(){var e=t.data(this,n);e?(e.option(o||{}),e._init&&e._init()):t.data(this,n,new i(o,this))}),h}},t.Widget=function(){},t.Widget._childConstructors=[],t.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"<div>",options:{disabled:!1,create:null},_createWidget:function(s,i){i=t(i||this.defaultElement||this)[0],this.element=t(i),this.uuid=e++,this.eventNamespace="."+this.widgetName+this.uuid,this.bindings=t(),this.hoverable=t(),this.focusable=t(),i!==this&&(t.data(i,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===i&&this.destroy()}}),this.document=t(i.style?i.ownerDocument:i.document||i),this.window=t(this.document[0].defaultView||this.document[0].parentWindow)),this.options=t.widget.extend({},this.options,this._getCreateOptions(),s),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:t.noop,_getCreateEventData:t.noop,_create:t.noop,_init:t.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:t.noop,widget:function(){return this.element},option:function(e,s){var i,n,o,r=e;if(0===arguments.length)return t.widget.extend({},this.options);if("string"==typeof e)if(r={},i=e.split("."),e=i.shift(),i.length){for(n=r[e]=t.widget.extend({},this.options[e]),o=0;i.length-1>o;o++)n[i[o]]=n[i[o]]||{},n=n[i[o]];if(e=i.pop(),1===arguments.length)return void 0===n[e]?null:n[e];n[e]=s}else{if(1===arguments.length)return void 0===this.options[e]?null:this.options[e];r[e]=s}return this._setOptions(r),this},_setOptions:function(t){var e;for(e in t)this._setOption(e,t[e]);return this},_setOption:function(t,e){return this.options[t]=e,"disabled"===t&&(this.widget().toggleClass(this.widgetFullName+"-disabled",!!e),e&&(this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus"))),this},enable:function(){return this._setOptions({disabled:!1})},disable:function(){return this._setOptions({disabled:!0})},_on:function(e,s,i){var n,o=this;"boolean"!=typeof e&&(i=s,s=e,e=!1),i?(s=n=t(s),this.bindings=this.bindings.add(s)):(i=s,s=this.element,n=this.widget()),t.each(i,function(i,r){function a(){return e||o.options.disabled!==!0&&!t(this).hasClass("ui-state-disabled")?("string"==typeof r?o[r]:r).apply(o,arguments):void 0}"string"!=typeof r&&(a.guid=r.guid=r.guid||a.guid||t.guid++);var h=i.match(/^([\w:-]*)\s*(.*)$/),d=h[1]+o.eventNamespace,l=h[2];l?n.delegate(l,d,a):s.bind(d,a)})},_off:function(e,s){s=(s||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,e.unbind(s).undelegate(s),this.bindings=t(this.bindings.not(e).get()),this.focusable=t(this.focusable.not(e).get()),this.hoverable=t(this.hoverable.not(e).get())},_delay:function(t,e){function s(){return("string"==typeof t?i[t]:t).apply(i,arguments)}var i=this;return setTimeout(s,e||0)},_hoverable:function(e){this.hoverable=this.hoverable.add(e),this._on(e,{mouseenter:function(e){t(e.currentTarget).addClass("ui-state-hover")},mouseleave:function(e){t(e.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(e){this.focusable=this.focusable.add(e),this._on(e,{focusin:function(e){t(e.currentTarget).addClass("ui-state-focus")},focusout:function(e){t(e.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(e,s,i){var n,o,r=this.options[e];if(i=i||{},s=t.Event(s),s.type=(e===this.widgetEventPrefix?e:this.widgetEventPrefix+e).toLowerCase(),s.target=this.element[0],o=s.originalEvent)for(n in o)n in s||(s[n]=o[n]);return this.element.trigger(s,i),!(t.isFunction(r)&&r.apply(this.element[0],[s].concat(i))===!1||s.isDefaultPrevented())}},t.each({show:"fadeIn",hide:"fadeOut"},function(e,s){t.Widget.prototype["_"+e]=function(i,n,o){"string"==typeof n&&(n={effect:n});var r,a=n?n===!0||"number"==typeof n?s:n.effect||s:e;n=n||{},"number"==typeof n&&(n={duration:n}),r=!t.isEmptyObject(n),n.complete=o,n.delay&&i.delay(n.delay),r&&t.effects&&t.effects.effect[a]?i[e](n):a!==e&&i[a]?i[a](n.duration,n.easing,o):i.queue(function(s){t(this)[e](),o&&o.call(i[0]),s()})}}),t.widget}),function(t){"use strict";t.widget("aerolab.midnight",{options:{headerClass:"midnightHeader",innerClass:"midnightInner",defaultClass:"default",classPrefix:"",sectionSelector:"midnight"},_headers:{},_headerInfo:{top:0,height:0},_$sections:[],_sections:[],_scrollTop:0,_documentHeight:0,_transformMode:!1,refresh:function(){this._headerInfo={top:0,height:this.element.outerHeight()},this._$sections=t("[data-"+this.options.sectionSelector+"]:not(:hidden)"),this._sections=[],this._setupHeaders(),this.recalculate()},_create:function(){var e=this;this._scrollTop=window.pageYOffset||document.documentElement.scrollTop,this._documentHeight=t(document).height(),this._headers={},this._transformMode=this._getSupportedTransform(),this.refresh(),setInterval(function(){e._recalculateSections()},1e3),e.recalculate(),t(window).resize(function(){e.recalculate()}),this._updateHeadersLoop()},recalculate:function(){this._recalculateSections(),this._updateHeaderHeight(),this._recalculateHeaders(),this._updateHeaders()},_getSupportedTransform:function(){for(var t=["transform","WebkitTransform","MozTransform","OTransform","msTransform"],e=0;e<t.length;e++)if(void 0!==document.createElement("div").style[t[e]])return t[e];return!1},_getContainerHeight:function(){var e=this.element.find("> ."+this.options.headerClass),s=0,i=0,n=this;return e.length?e.each(function(){var e=t(this),o=e.find("> ."+n.options.innerClass);o.length?(o.css("bottom","auto").css("overflow","auto"),i=o.outerHeight(),o.css("bottom","0")):(e.css("bottom","auto"),i=e.outerHeight(),e.css("bottom","0")),s=i>s?i:s}):s=i=this.element.outerHeight(),s},_setupHeaders:function(){var e=this;this._headers[this.options.defaultClass]={};for(var s=0;s<this._$sections.length;s++){var i=t(this._$sections[s]),n=i.data(this.options.sectionSelector);"string"==typeof n&&(n=n.trim(),""!==n&&(e._headers[n]={}))}({top:this.element.css("padding-top"),right:this.element.css("padding-right"),bottom:this.element.css("padding-bottom"),left:this.element.css("padding-left")});this.element.css({position:"fixed",top:0,left:0,right:0,overflow:"hidden"}),this._updateHeaderHeight();var o=this.element.find("> ."+this.options.headerClass);o.length?o.filter("."+this.options.defaultClass).length||o.filter("."+this.options.headerClass+":first").clone(!0,!0).attr("class",this.options.headerClass+" "+this.options.defaultClass):this.element.wrapInner('<div class="'+this.options.headerClass+" "+this.options.defaultClass+'"></div>');var o=this.element.find("> ."+this.options.headerClass),r=o.filter("."+this.options.defaultClass).clone(!0,!0);for(var n in this._headers)if(this._headers.hasOwnProperty(n)&&"undefined"==typeof this._headers[n].element){var a=o.filter("."+n);a.length?this._headers[n].element=a:this._headers[n].element=r.clone(!0,!0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);var h={position:"absolute",overflow:"hidden",top:0,left:0,right:0,bottom:0};this._headers[n].element.css(h),this._transformMode!==!1&&this._headers[n].element.css(this._transformMode,"translateZ(0)"),this._headers[n].element.find("> ."+this.options.innerClass).length||this._headers[n].element.wrapInner('<div class="'+this.options.innerClass+'"></div>'),this._headers[n].inner=this._headers[n].element.find("> ."+this.options.innerClass),this._headers[n].inner.css(h),this._transformMode!==!1&&this._headers[n].inner.css(this._transformMode,"translateZ(0)"),this._headers[n].from="",this._headers[n].progress=0}o.each(function(){var s=t(this),i=!1;for(var n in e._headers)e._headers.hasOwnProperty(n)&&s.hasClass(n)&&(i=!0);s.find("> ."+e.options.innerClass).length||s.wrapInner('<div class="'+e.options.innerClass+'"></div>'),i?s.show():s.hide()})},_recalculateHeaders:function(){this._scrollTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,this._scrollTop=Math.max(this._scrollTop,0),this._scrollTop=Math.min(this._scrollTop,this._documentHeight);var t=this._headerInfo.height,e=this._scrollTop+this._headerInfo.top,s=e+t;if("function"==typeof window.getComputedStyle){var i=window.getComputedStyle(this.element[0],null),n=0,o=0;if(this._transformMode!==!1&&"string"==typeof i.transform){var r=i.transform.match(/(-?[0-9\.]+)/g);null!==r&&r.length>=6&&!isNaN(parseFloat(r[5]))&&(o=parseFloat(r[5]))}i.top.indexOf("px")>=0&&!isNaN(parseFloat(i.top))&&(n=parseFloat(i.top)),e+=n+o,s+=n+o}for(var a in this._headers)this._headers.hasOwnProperty(a)&&(this._headers[a].from="",this._headers[a].progress=0);for(var h=0;h<this._sections.length;h++)s>=this._sections[h].start&&e<=this._sections[h].end&&(this._headers[this._sections[h].className].visible=!0,e>=this._sections[h].start&&s<=this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress+=1):s>this._sections[h].end&&e<this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress=1-(s-this._sections[h].end)/t):s>this._sections[h].start&&e<this._sections[h].start&&("top"===this._headers[this._sections[h].className].from?this._headers[this._sections[h].className].progress+=(s-this._sections[h].start)/t:(this._headers[this._sections[h].className].from="bottom",this._headers[this._sections[h].className].progress=(s-this._sections[h].start)/t)))},_updateHeaders:function(){if("undefined"!=typeof this._headers[this.options.defaultClass]){var t=0,e="";for(var s in this._headers)this._headers.hasOwnProperty(s)&&""!==!this._headers[s].from&&(t+=this._headers[s].progress,e=s);t<1&&(""===this._headers[this.options.defaultClass].from?(this._headers[this.options.defaultClass].from="top"===this._headers[e].from?"bottom":"top",this._headers[this.options.defaultClass].progress=1-t):this._headers[this.options.defaultClass].progress+=1-t);for(var i in this._headers)if(this._headers.hasOwnProperty(i)&&""!==!this._headers[i].from){var n=100*(1-this._headers[i].progress);n>=100&&(n=110),n<=-100&&(n=-110),"top"===this._headers[i].from?this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="-"+n+"%",this._headers[i].inner[0].style.top="+"+n+"%"):this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="+"+n+"%",this._headers[i].inner[0].style.top="-"+n+"%")}}},_recalculateSections:function(){this._documentHeight=t(document).height(),this._sections=[];for(var e=0;e<this._$sections.length;e++){var s=t(this._$sections[e]);this._sections.push({element:s,className:s.data(this.options.sectionSelector),start:s.offset().top,end:s.offset().top+s.outerHeight()})}},_updateHeaderHeight:function(){this._headerInfo.height=this._getContainerHeight(),this.element.css("height",this._headerInfo.height+"px")},_updateHeadersLoop:function(){var t=this;this._requestAnimationFrame(function(){t._updateHeadersLoop()}),this._recalculateHeaders(),this._updateHeaders()},_requestAnimationFrame:function(t){var e=e||function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();e(t)}})}(jQuery);
body{font-family: 'Inter', sans-serif; font-size: 16px;}
/* base style */
a{text-decoration: none}
h1,h2,h3,h4,h5,h6,p,i{color: #000; padding-bottom: 30px;}
p{line-height: 28px; font-weight: 300px; color: #666;}
.big-text{ font-size: 70px; font-weight: 900;}
.medium-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px}
.intro-text{ text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{ background: #316bff; padding: 18px 28px; color: #fff; display: inline-block; border-radius: 4px;}
.subtitle{color: #000; text-decoration: underline;}
/* header */
.header{
width: 100%;
position:fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default{; color: #000;}
.white{ color: red;}
.menu{width: 100%; color: #fff; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.menu li{display: inline-block; }
.menu li a{;display: block; padding: 15px; color: #000; font-weight: 700;}
/* hero */
.hero{
background: linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.6)),
url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster{
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1{margin-top: 50px;}
.mt-2{margin-top: 100px;}
.mt-3{margin-top: 150px;}
.tw{color: #fff;}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default" >
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function(){
// Change this to the correct selector.
$('.menu li a').midnight();
});
</script>

If I understood correctly you can use CSS to do this:
.white ul li a {
color: white;
}
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
! function(t) {
"function" == typeof define && define.amd ? define(["jquery"], t) : t(jQuery)
}(function(t) {
var e = 0,
s = Array.prototype.slice;
t.cleanData = function(e) {
return function(s) {
var i, n, o;
for (o = 0; null != (n = s[o]); o++) try {
i = t._data(n, "events"), i && i.remove && t(n).triggerHandler("remove")
} catch (r) {}
e(s)
}
}(t.cleanData), t.widget = function(e, s, i) {
var n, o, r, a, h = {},
d = e.split(".")[0];
return e = e.split(".")[1], n = d + "-" + e, i || (i = s, s = t.Widget), t.expr[":"][n.toLowerCase()] = function(e) {
return !!t.data(e, n)
}, t[d] = t[d] || {}, o = t[d][e], r = t[d][e] = function(t, e) {
return this._createWidget ? void(arguments.length && this._createWidget(t, e)) : new r(t, e)
}, t.extend(r, o, {
version: i.version,
_proto: t.extend({}, i),
_childConstructors: []
}), a = new s, a.options = t.widget.extend({}, a.options), t.each(i, function(e, i) {
return t.isFunction(i) ? void(h[e] = function() {
var t = function() {
return s.prototype[e].apply(this, arguments)
},
n = function(t) {
return s.prototype[e].apply(this, t)
};
return function() {
var e, s = this._super,
o = this._superApply;
return this._super = t, this._superApply = n, e = i.apply(this, arguments), this._super = s, this._superApply = o, e
}
}()) : void(h[e] = i)
}), r.prototype = t.widget.extend(a, {
widgetEventPrefix: o ? a.widgetEventPrefix || e : e
}, h, {
constructor: r,
namespace: d,
widgetName: e,
widgetFullName: n
}), o ? (t.each(o._childConstructors, function(e, s) {
var i = s.prototype;
t.widget(i.namespace + "." + i.widgetName, r, s._proto)
}), delete o._childConstructors) : s._childConstructors.push(r), t.widget.bridge(e, r), r
}, t.widget.extend = function(e) {
for (var i, n, o = s.call(arguments, 1), r = 0, a = o.length; a > r; r++)
for (i in o[r]) n = o[r][i], o[r].hasOwnProperty(i) && void 0 !== n && (e[i] = t.isPlainObject(n) ? t.isPlainObject(e[i]) ? t.widget.extend({}, e[i], n) : t.widget.extend({}, n) : n);
return e
}, t.widget.bridge = function(e, i) {
var n = i.prototype.widgetFullName || e;
t.fn[e] = function(o) {
var r = "string" == typeof o,
a = s.call(arguments, 1),
h = this;
return o = !r && a.length ? t.widget.extend.apply(null, [o].concat(a)) : o, r ? this.each(function() {
var s, i = t.data(this, n);
return "instance" === o ? (h = i, !1) : i ? t.isFunction(i[o]) && "_" !== o.charAt(0) ? (s = i[o].apply(i, a), s !== i && void 0 !== s ? (h = s && s.jquery ? h.pushStack(s.get()) : s, !1) : void 0) : t.error("no such method '" + o + "' for " + e + " widget instance") : t.error("cannot call methods on " + e + " prior to initialization; attempted to call method '" + o + "'")
}) : this.each(function() {
var e = t.data(this, n);
e ? (e.option(o || {}), e._init && e._init()) : t.data(this, n, new i(o, this))
}), h
}
}, t.Widget = function() {}, t.Widget._childConstructors = [], t.Widget.prototype = {
widgetName: "widget",
widgetEventPrefix: "",
defaultElement: "<div>",
options: {
disabled: !1,
create: null
},
_createWidget: function(s, i) {
i = t(i || this.defaultElement || this)[0], this.element = t(i), this.uuid = e++, this.eventNamespace = "." + this.widgetName + this.uuid, this.bindings = t(), this.hoverable = t(), this.focusable = t(), i !== this && (t.data(i, this.widgetFullName, this), this._on(!0, this.element, {
remove: function(t) {
t.target === i && this.destroy()
}
}), this.document = t(i.style ? i.ownerDocument : i.document || i), this.window = t(this.document[0].defaultView || this.document[0].parentWindow)), this.options = t.widget.extend({}, this.options, this._getCreateOptions(), s), this._create(), this._trigger("create", null, this._getCreateEventData()), this._init()
},
_getCreateOptions: t.noop,
_getCreateEventData: t.noop,
_create: t.noop,
_init: t.noop,
destroy: function() {
this._destroy(), this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)), this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName + "-disabled ui-state-disabled"), this.bindings.unbind(this.eventNamespace), this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus")
},
_destroy: t.noop,
widget: function() {
return this.element
},
option: function(e, s) {
var i, n, o, r = e;
if (0 === arguments.length) return t.widget.extend({}, this.options);
if ("string" == typeof e)
if (r = {}, i = e.split("."), e = i.shift(), i.length) {
for (n = r[e] = t.widget.extend({}, this.options[e]), o = 0; i.length - 1 > o; o++) n[i[o]] = n[i[o]] || {}, n = n[i[o]];
if (e = i.pop(), 1 === arguments.length) return void 0 === n[e] ? null : n[e];
n[e] = s
} else {
if (1 === arguments.length) return void 0 === this.options[e] ? null : this.options[e];
r[e] = s
}
return this._setOptions(r), this
},
_setOptions: function(t) {
var e;
for (e in t) this._setOption(e, t[e]);
return this
},
_setOption: function(t, e) {
return this.options[t] = e, "disabled" === t && (this.widget().toggleClass(this.widgetFullName + "-disabled", !!e), e && (this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus"))), this
},
enable: function() {
return this._setOptions({
disabled: !1
})
},
disable: function() {
return this._setOptions({
disabled: !0
})
},
_on: function(e, s, i) {
var n, o = this;
"boolean" != typeof e && (i = s, s = e, e = !1), i ? (s = n = t(s), this.bindings = this.bindings.add(s)) : (i = s, s = this.element, n = this.widget()), t.each(i, function(i, r) {
function a() {
return e || o.options.disabled !== !0 && !t(this).hasClass("ui-state-disabled") ? ("string" == typeof r ? o[r] : r).apply(o, arguments) : void 0
}
"string" != typeof r && (a.guid = r.guid = r.guid || a.guid || t.guid++);
var h = i.match(/^([\w:-]*)\s*(.*)$/),
d = h[1] + o.eventNamespace,
l = h[2];
l ? n.delegate(l, d, a) : s.bind(d, a)
})
},
_off: function(e, s) {
s = (s || "").split(" ").join(this.eventNamespace + " ") + this.eventNamespace, e.unbind(s).undelegate(s), this.bindings = t(this.bindings.not(e).get()), this.focusable = t(this.focusable.not(e).get()), this.hoverable = t(this.hoverable.not(e).get())
},
_delay: function(t, e) {
function s() {
return ("string" == typeof t ? i[t] : t).apply(i, arguments)
}
var i = this;
return setTimeout(s, e || 0)
},
_hoverable: function(e) {
this.hoverable = this.hoverable.add(e), this._on(e, {
mouseenter: function(e) {
t(e.currentTarget).addClass("ui-state-hover")
},
mouseleave: function(e) {
t(e.currentTarget).removeClass("ui-state-hover")
}
})
},
_focusable: function(e) {
this.focusable = this.focusable.add(e), this._on(e, {
focusin: function(e) {
t(e.currentTarget).addClass("ui-state-focus")
},
focusout: function(e) {
t(e.currentTarget).removeClass("ui-state-focus")
}
})
},
_trigger: function(e, s, i) {
var n, o, r = this.options[e];
if (i = i || {}, s = t.Event(s), s.type = (e === this.widgetEventPrefix ? e : this.widgetEventPrefix + e).toLowerCase(), s.target = this.element[0], o = s.originalEvent)
for (n in o) n in s || (s[n] = o[n]);
return this.element.trigger(s, i), !(t.isFunction(r) && r.apply(this.element[0], [s].concat(i)) === !1 || s.isDefaultPrevented())
}
}, t.each({
show: "fadeIn",
hide: "fadeOut"
}, function(e, s) {
t.Widget.prototype["_" + e] = function(i, n, o) {
"string" == typeof n && (n = {
effect: n
});
var r, a = n ? n === !0 || "number" == typeof n ? s : n.effect || s : e;
n = n || {}, "number" == typeof n && (n = {
duration: n
}), r = !t.isEmptyObject(n), n.complete = o, n.delay && i.delay(n.delay), r && t.effects && t.effects.effect[a] ? i[e](n) : a !== e && i[a] ? i[a](n.duration, n.easing, o) : i.queue(function(s) {
t(this)[e](), o && o.call(i[0]), s()
})
}
}), t.widget
}),
function(t) {
"use strict";
t.widget("aerolab.midnight", {
options: {
headerClass: "midnightHeader",
innerClass: "midnightInner",
defaultClass: "default",
classPrefix: "",
sectionSelector: "midnight"
},
_headers: {},
_headerInfo: {
top: 0,
height: 0
},
_$sections: [],
_sections: [],
_scrollTop: 0,
_documentHeight: 0,
_transformMode: !1,
refresh: function() {
this._headerInfo = {
top: 0,
height: this.element.outerHeight()
}, this._$sections = t("[data-" + this.options.sectionSelector + "]:not(:hidden)"), this._sections = [], this._setupHeaders(), this.recalculate()
},
_create: function() {
var e = this;
this._scrollTop = window.pageYOffset || document.documentElement.scrollTop, this._documentHeight = t(document).height(), this._headers = {}, this._transformMode = this._getSupportedTransform(), this.refresh(), setInterval(function() {
e._recalculateSections()
}, 1e3), e.recalculate(), t(window).resize(function() {
e.recalculate()
}), this._updateHeadersLoop()
},
recalculate: function() {
this._recalculateSections(), this._updateHeaderHeight(), this._recalculateHeaders(), this._updateHeaders()
},
_getSupportedTransform: function() {
for (var t = ["transform", "WebkitTransform", "MozTransform", "OTransform", "msTransform"], e = 0; e < t.length; e++)
if (void 0 !== document.createElement("div").style[t[e]]) return t[e];
return !1
},
_getContainerHeight: function() {
var e = this.element.find("> ." + this.options.headerClass),
s = 0,
i = 0,
n = this;
return e.length ? e.each(function() {
var e = t(this),
o = e.find("> ." + n.options.innerClass);
o.length ? (o.css("bottom", "auto").css("overflow", "auto"), i = o.outerHeight(), o.css("bottom", "0")) : (e.css("bottom", "auto"), i = e.outerHeight(), e.css("bottom", "0")), s = i > s ? i : s
}) : s = i = this.element.outerHeight(), s
},
_setupHeaders: function() {
var e = this;
this._headers[this.options.defaultClass] = {};
for (var s = 0; s < this._$sections.length; s++) {
var i = t(this._$sections[s]),
n = i.data(this.options.sectionSelector);
"string" == typeof n && (n = n.trim(), "" !== n && (e._headers[n] = {}))
}({
top: this.element.css("padding-top"),
right: this.element.css("padding-right"),
bottom: this.element.css("padding-bottom"),
left: this.element.css("padding-left")
});
this.element.css({
position: "fixed",
top: 0,
left: 0,
right: 0,
overflow: "hidden"
}), this._updateHeaderHeight();
var o = this.element.find("> ." + this.options.headerClass);
o.length ? o.filter("." + this.options.defaultClass).length || o.filter("." + this.options.headerClass + ":first").clone(!0, !0).attr("class", this.options.headerClass + " " + this.options.defaultClass) : this.element.wrapInner('<div class="' + this.options.headerClass + " " + this.options.defaultClass + '"></div>');
var o = this.element.find("> ." + this.options.headerClass),
r = o.filter("." + this.options.defaultClass).clone(!0, !0);
for (var n in this._headers)
if (this._headers.hasOwnProperty(n) && "undefined" == typeof this._headers[n].element) {
var a = o.filter("." + n);
a.length ? this._headers[n].element = a : this._headers[n].element = r.clone(!0, !0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);
var h = {
position: "absolute",
overflow: "hidden",
top: 0,
left: 0,
right: 0,
bottom: 0
};
this._headers[n].element.css(h), this._transformMode !== !1 && this._headers[n].element.css(this._transformMode, "translateZ(0)"), this._headers[n].element.find("> ." + this.options.innerClass).length || this._headers[n].element.wrapInner('<div class="' + this.options.innerClass + '"></div>'), this._headers[n].inner = this._headers[n].element.find("> ." + this.options.innerClass), this._headers[n].inner.css(h), this._transformMode !== !1 && this._headers[n].inner.css(this._transformMode, "translateZ(0)"), this._headers[n].from = "", this._headers[n].progress = 0
}
o.each(function() {
var s = t(this),
i = !1;
for (var n in e._headers) e._headers.hasOwnProperty(n) && s.hasClass(n) && (i = !0);
s.find("> ." + e.options.innerClass).length || s.wrapInner('<div class="' + e.options.innerClass + '"></div>'), i ? s.show() : s.hide()
})
},
_recalculateHeaders: function() {
this._scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, this._scrollTop = Math.max(this._scrollTop, 0), this._scrollTop = Math.min(this._scrollTop, this._documentHeight);
var t = this._headerInfo.height,
e = this._scrollTop + this._headerInfo.top,
s = e + t;
if ("function" == typeof window.getComputedStyle) {
var i = window.getComputedStyle(this.element[0], null),
n = 0,
o = 0;
if (this._transformMode !== !1 && "string" == typeof i.transform) {
var r = i.transform.match(/(-?[0-9\.]+)/g);
null !== r && r.length >= 6 && !isNaN(parseFloat(r[5])) && (o = parseFloat(r[5]))
}
i.top.indexOf("px") >= 0 && !isNaN(parseFloat(i.top)) && (n = parseFloat(i.top)), e += n + o, s += n + o
}
for (var a in this._headers) this._headers.hasOwnProperty(a) && (this._headers[a].from = "", this._headers[a].progress = 0);
for (var h = 0; h < this._sections.length; h++) s >= this._sections[h].start && e <= this._sections[h].end && (this._headers[this._sections[h].className].visible = !0, e >= this._sections[h].start && s <= this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress += 1) : s > this._sections[h].end && e < this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress = 1 - (s - this._sections[h].end) / t) : s > this._sections[h].start && e < this._sections[h].start && ("top" === this._headers[this._sections[h].className].from ? this._headers[this._sections[h].className].progress += (s - this._sections[h].start) / t : (this._headers[this._sections[h].className].from = "bottom", this._headers[this._sections[h].className].progress = (s - this._sections[h].start) / t)))
},
_updateHeaders: function() {
if ("undefined" != typeof this._headers[this.options.defaultClass]) {
var t = 0,
e = "";
for (var s in this._headers) this._headers.hasOwnProperty(s) && "" !== !this._headers[s].from && (t += this._headers[s].progress, e = s);
t < 1 && ("" === this._headers[this.options.defaultClass].from ? (this._headers[this.options.defaultClass].from = "top" === this._headers[e].from ? "bottom" : "top", this._headers[this.options.defaultClass].progress = 1 - t) : this._headers[this.options.defaultClass].progress += 1 - t);
for (var i in this._headers)
if (this._headers.hasOwnProperty(i) && "" !== !this._headers[i].from) {
var n = 100 * (1 - this._headers[i].progress);
n >= 100 && (n = 110), n <= -100 && (n = -110), "top" === this._headers[i].from ? this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "-" + n + "%", this._headers[i].inner[0].style.top = "+" + n + "%") : this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "+" + n + "%", this._headers[i].inner[0].style.top = "-" + n + "%")
}
}
},
_recalculateSections: function() {
this._documentHeight = t(document).height(), this._sections = [];
for (var e = 0; e < this._$sections.length; e++) {
var s = t(this._$sections[e]);
this._sections.push({
element: s,
className: s.data(this.options.sectionSelector),
start: s.offset().top,
end: s.offset().top + s.outerHeight()
})
}
},
_updateHeaderHeight: function() {
this._headerInfo.height = this._getContainerHeight(), this.element.css("height", this._headerInfo.height + "px")
},
_updateHeadersLoop: function() {
var t = this;
this._requestAnimationFrame(function() {
t._updateHeadersLoop()
}), this._recalculateHeaders(), this._updateHeaders()
},
_requestAnimationFrame: function(t) {
var e = e || function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(t) {
window.setTimeout(t, 1e3 / 60)
}
}();
e(t)
}
})
}(jQuery);
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
}
/* base style */
a {
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
i {
color: #000;
padding-bottom: 30px;
}
p {
line-height: 28px;
font-weight: 300px;
color: #666;
}
.big-text {
font-size: 70px;
font-weight: 900;
}
.medium-text {
font-size: 40px;
}
.normal-text {
font-size: 20px;
}
.small-text {
font-size: 14px
}
.intro-text {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.button {
background: #316bff;
padding: 18px 28px;
color: #fff;
display: inline-block;
border-radius: 4px;
}
.subtitle {
color: #000;
text-decoration: underline;
}
/* header */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default {
background: #316bff;
color: #000;
}
.white {
background: red;
color: red;
}
.white ul li a{
color: white;
}
.menu {
width: 100%;
color: #fff;
transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.menu li {
display: inline-block;
}
.menu li a {
;
display: block;
padding: 15px;
color: #000;
font-weight: 700;
}
/* hero */
.hero {
background: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)), url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex;
width: 100%;
align-items: center;
}
.hero__content {
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1 {
margin-top: 50px;
}
.mt-2 {
margin-top: 100px;
}
.mt-3 {
margin-top: 150px;
}
.tw {
color: #fff;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default">
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le
guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function() {
// Change this to the correct selector.
$('nav.header').midnight();
});
</script>

swipeLeft and swipeRight not working...?

on dekstop this example is working perfect.
in mobile, When i swipeLeft next div should come but previous div comes. It means swipeleft and swiperight doesn't work.
i'm tired.Please can.Thanks in advance.
function Swipe(t, n) {
"use strict";
function e() {
//h = All Div //w = All Div Length //m = 500 //t.offsetWidth = 500 //E.style.width = "" //h.length * m + "px" = 2000px
h = E.children, w = Array(h.length), m = t.getBoundingClientRect().width || t.offsetWidth, E.style.width = h.length * m + "px";
for (var n = h.length; n--;) {
var e = h[n]; //e = Total Particular Div
e.style.width = m + "px", e.setAttribute("data-index", n), f.transitions && (e.style.left = n * -m + "px", a(n, b > n ? -m : n > b ? m : 0, 0))
}
f.transitions || (E.style.left = b * -m + "px"), t.style.visibility = "visible"
}
function i() {
b ? r(b - 1) : n.continuous && r(h.length - 1)
}
function o() {
h.length - 1 > b ? r(b + 1) : n.continuous && r(0)
}
function r(t, e) {
//alert(t);
//alert($('.swipe-wrap').find('div').eq(t).text());
if (b != t) {
if (f.transitions) {
for (var i = Math.abs(b - t) - 1, o = Math.abs(b - t) / (b - t); i--;) a((t > b ? t : b) - i - 1, m * o, 0);
a(b, m * o, e || T), a(t, 0, e || T)
} else d(b * -m, t * -m, e || T);
b = t, v(n.callback && n.callback(b, h[b]))
}
}
function a(t, n, e) {
s(t, n, e), w[t] = n
}
function s(t, n, e) {
var i = h[t],
o = i && i.style;
o && (o.webkitTransitionDuration = o.MozTransitionDuration = o.msTransitionDuration = o.OTransitionDuration = o.transitionDuration = e + "ms", o.webkitTransform = "translate(" + -n + "px,0)" + "translateZ(0)", o.msTransform = o.MozTransform = o.OTransform = "translateX(" + -n + "px)")
}
function d(t, e, i) {
if (!i) return E.style.left = e + "px", void 0;
var o = +new Date,
r = setInterval(function() {
var a = +new Date - o;
return a > i ? (E.style.left = e + "px", y && c(), n.transitionEnd && n.transitionEnd.call(event, b, h[b]), clearInterval(r), void 0) : (E.style.left = (e - t) * (Math.floor(100 * (a / i)) / 100) + t + "px", void 0)
}, 4)
}
function c() {
p = setTimeout(o, y)
}
function u() {
y = 0, clearTimeout(p)
}
var l = function() {},
v = function(t) {
setTimeout(t || l, 0)
},
f = {
addEventListener: !!window.addEventListener,
touch: "ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch,
transitions: function(t) {
var n = ["transformProperty", "WebkitTransform", "MozTransform", "OTransform", "msTransform"];
for (var e in n)
if (void 0 !== t.style[n[e]]) return !0;
return !1
}(document.createElement("swipe"))
};
if (t) {
var h, w, m, E = t.children[0];
n = n || {};
var p, x, b = parseInt(n.startSlide, 10) || 0,
T = n.speed || 300,
y = n.auto || 0,
L = {},
g = {},
k = {
handleEvent: function(t) {
switch (t.type) {
case "touchstart":
this.start(t);
break;
case "touchmove":
this.move(t);
break;
case "touchend":
v(this.end(t));
break;
case "webkitTransitionEnd":
case "msTransitionEnd":
case "oTransitionEnd":
case "otransitionend":
case "transitionend":
v(this.transitionEnd(t));
break;
case "resize":
v(e.call())
}
n.stopPropagation && t.stopPropagation()
},
start: function(t) {
var n = t.touches[0];
L = {
x: n.pageX,
y: n.pageY,
time: +new Date
}, x = void 0, g = {}, E.addEventListener("touchmove", this, !1), E.addEventListener("touchend", this, !1)
},
move: function(t) {
if (!(t.touches.length > 1 || t.scale && 1 !== t.scale)) {
n.disableScroll && t.preventDefault();
var e = t.touches[0];
g = {
x: e.pageX - L.x,
y: e.pageY - L.y
}, x === void 0 && (x = !!(x || Math.abs(g.x) < Math.abs(g.y))), x || (t.preventDefault(), u(), g.x = g.x / (!b && g.x > 0 || b == h.length - 1 && 0 > g.x ? Math.abs(g.x) / m + 1 : 1), s(b - 1, g.x + w[b - 1], 0), s(b, g.x + w[b], 0), s(b + 1, g.x + w[b + 1], 0))
}
},
end: function() {
var t = +new Date - L.time,
e = 250 > Number(t) && Math.abs(g.x) > 20 || Math.abs(g.x) > m / 2,
i = !b && g.x > 0 || b == h.length - 1 && 0 > g.x,
o = 0 > g.x;
x || (e && !i ? (o ? (a(b - 1, -m, 0), a(b, w[b] - m, T), a(b + 1, w[b + 1] - m, T), b += 1) : (a(b + 1, m, 0), a(b, w[b] + m, T), a(b - 1, w[b - 1] + m, T), b += -1), n.callback && n.callback(b, h[b])) : (a(b - 1, -m, T), a(b, 0, T), a(b + 1, m, T))), E.removeEventListener("touchmove", k, !1), E.removeEventListener("touchend", k, !1)
},
transitionEnd: function(t) {
parseInt(t.target.getAttribute("data-index"), 10) == b && (y && c(), n.transitionEnd && n.transitionEnd.call(t, b, h[b]))
}
};
return e(), y && c(), f.addEventListener ? (f.touch && E.addEventListener("touchstart", k, !1), f.transitions && (E.addEventListener("webkitTransitionEnd", k, !1), E.addEventListener("msTransitionEnd", k, !1), E.addEventListener("oTransitionEnd", k, !1), E.addEventListener("otransitionend", k, !1), E.addEventListener("transitionend", k, !1)), window.addEventListener("resize", k, !1)) : window.onresize = function() {
e()
}, {
setup: function() {
e()
},
slide: function(t, n) {
r(t, n)
},
prev: function() {
u(), i()
},
next: function() {
u(), o()
},
getPos: function() {
return b
},
kill: function() {
u(), E.style.width = "auto", E.style.left = 0;
for (var t = h.length; t--;) {
var n = h[t];
n.style.width = "100%", n.style.left = 0, f.transitions && s(t, 0, 0)
}
f.addEventListener ? (E.removeEventListener("touchstart", k, !1), E.removeEventListener("webkitTransitionEnd", k, !1), E.removeEventListener("msTransitionEnd", k, !1), E.removeEventListener("oTransitionEnd", k, !1), E.removeEventListener("otransitionend", k, !1), E.removeEventListener("transitionend", k, !1), window.removeEventListener("resize", k, !1)) : window.onresize = null
}
}
}
}(window.jQuery || window.Zepto) && function(t) {
t.fn.Swipe = function(n) {
return this.each(function() {
t(this).data("Swipe", new Swipe(t(this)[0], n))
})
}
}(window.jQuery || window.Zepto);
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;
min-height:416px;
}
h1 {
font-size:33px;
margin:50px 0 15px;
text-align:center;
color:#212121;
}
h2 {
font-size:14px;
font-weight:bold;
color:#3c3c3c;
margin:20px 10px 10px;
}
small {
margin:0 10px 30px;
display:block;
font-size:12px;
}
a {
margin:0 0 0 10px;
font-size:12px;
color:#3c3c3c;
}
html, body {
background: #f3f3f3;
}
#console {
font-size: 12px;
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color: #999;
line-height: 18px;
margin-top: 20px;
max-height: 150px;
overflow: auto;
}
#mySwipe div b {
display:block;
font-weight:bold;
color:#14ADE5;
font-size:20px;
text-align:center;
margin:10px;
padding:100px 10px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width: 20px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Swipe 2</h1>
<link rel="stylesheet" href="css/SwipeTest.css">
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button id="Prv">prev</button>
<button id="Nxt">next</button>
</div>
<script type="text/javascript" src='js/SwipeTest.js'></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#Prv").click(function(){
mySwipe.next();
});
$("#Nxt").click(function(){
mySwipe.prev();
});
$('.swipe-wrap').append('<div><b>A</b></div>');
$('.swipe-wrap').append('<div><b>B</b></div>');
$('.swipe-wrap').append('<div><b>C</b></div>');
$('.swipe-wrap').append('<div><b>D</b></div>');
$('.swipe-wrap').append('<div><b>De</b></div>');
$('.swipe-wrap').append('<div><b>Do</b></div>');
$('.swipe-wrap').append('<div><b>Di</b></div>');
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
});
});
</script>

i want my div to come from left side in touch swipe js

Im using #mr_alien touch swipe.min.js.
In this example, my div comes from the right side on page load and in the mobile my touch swipe is going fine but i want my div to come from the left side.
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
});
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;
min-height:416px;
}
h1 {
font-size:33px;
margin:50px 0 15px;
text-align:center;
color:#212121;
}
h2 {
font-size:14px;
font-weight:bold;
color:#3c3c3c;
margin:20px 10px 10px;
}
small {
margin:0 10px 30px;
display:block;
font-size:12px;
}
a {
margin:0 0 0 10px;
font-size:12px;
color:#3c3c3c;
}
html, body {
background: #f3f3f3;
}
#console {
font-size: 12px;
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color: #999;
line-height: 18px;
margin-top: 20px;
max-height: 150px;
overflow: auto;
}
#mySwipe div b {
display:block;
font-weight:bold;
color:#14ADE5;
font-size:20px;
text-align:center;
margin:10px;
padding:100px 10px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width: 20px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Swipe 2</h1>
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<div><b>10</b></div>
<div><b>11</b></div>
<div><b>12</b></div>
<div><b>13</b></div>
<div><b>14</b></div>
<div><b>15</b></div>
<div><b>16</b></div>
<div><b>17</b></div>
<div><b>18</b></div>
<div><b>19</b></div>
<div><b>20</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/swipe/2.0/swipe.min.js'></script>
swipe.min.js
function Swipe(t, n) {
"use strict";
function e() {
h = E.children, w = Array(h.length), m = t.getBoundingClientRect().width || t.offsetWidth, E.style.width = h.length * m + "px";
for (var n = h.length; n--;) {
var e = h[n];
e.style.width = m + "px", e.setAttribute("data-index", n), f.transitions && (e.style.left = n * -m + "px", a(n, b > n ? -m : n > b ? m : 0, 0))
}
f.transitions || (E.style.left = b * -m + "px"), t.style.visibility = "visible"
}
function i() {
b ? r(b - 1) : n.continuous && r(h.length - 1)
}
function o() {
h.length - 1 > b ? r(b + 1) : n.continuous && r(0)
}
function r(t, e) {
if (b != t) {
if (f.transitions) {
for (var i = Math.abs(b - t) - 1, o = Math.abs(b - t) / (b - t); i--;) a((t > b ? t : b) - i - 1, m * o, 0);
a(b, m * o, e || T), a(t, 0, e || T)
} else d(b * -m, t * -m, e || T);
b = t, v(n.callback && n.callback(b, h[b]))
}
}
function a(t, n, e) {
s(t, n, e), w[t] = n
}
function s(t, n, e) {
var i = h[t],
o = i && i.style;
o && (o.webkitTransitionDuration = o.MozTransitionDuration = o.msTransitionDuration = o.OTransitionDuration = o.transitionDuration = e + "ms", o.webkitTransform = "translate(" + n + "px,0)" + "translateZ(0)", o.msTransform = o.MozTransform = o.OTransform = "translateX(" + n + "px)")
}
function d(t, e, i) {
if (!i) return E.style.left = e + "px", void 0;
var o = +new Date,
r = setInterval(function() {
var a = +new Date - o;
return a > i ? (E.style.left = e + "px", y && c(), n.transitionEnd && n.transitionEnd.call(event, b, h[b]), clearInterval(r), void 0) : (E.style.left = (e - t) * (Math.floor(100 * (a / i)) / 100) + t + "px", void 0)
}, 4)
}
function c() {
p = setTimeout(o, y)
}
function u() {
y = 0, clearTimeout(p)
}
var l = function() {},
v = function(t) {
setTimeout(t || l, 0)
},
f = {
addEventListener: !!window.addEventListener,
touch: "ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch,
transitions: function(t) {
var n = ["transformProperty", "WebkitTransform", "MozTransform", "OTransform", "msTransform"];
for (var e in n)
if (void 0 !== t.style[n[e]]) return !0;
return !1
}(document.createElement("swipe"))
};
if (t) {
var h, w, m, E = t.children[0];
n = n || {};
var p, x, b = parseInt(n.startSlide, 10) || 0,
T = n.speed || 300,
y = n.auto || 0,
L = {},
g = {},
k = {
handleEvent: function(t) {
switch (t.type) {
case "touchstart":
this.start(t);
break;
case "touchmove":
this.move(t);
break;
case "touchend":
v(this.end(t));
break;
case "webkitTransitionEnd":
case "msTransitionEnd":
case "oTransitionEnd":
case "otransitionend":
case "transitionend":
v(this.transitionEnd(t));
break;
case "resize":
v(e.call())
}
n.stopPropagation && t.stopPropagation()
},
start: function(t) {
var n = t.touches[0];
L = {
x: n.pageX,
y: n.pageY,
time: +new Date
}, x = void 0, g = {}, E.addEventListener("touchmove", this, !1), E.addEventListener("touchend", this, !1)
},
move: function(t) {
if (!(t.touches.length > 1 || t.scale && 1 !== t.scale)) {
n.disableScroll && t.preventDefault();
var e = t.touches[0];
g = {
x: e.pageX - L.x,
y: e.pageY - L.y
}, x === void 0 && (x = !!(x || Math.abs(g.x) < Math.abs(g.y))), x || (t.preventDefault(), u(), g.x = g.x / (!b && g.x > 0 || b == h.length - 1 && 0 > g.x ? Math.abs(g.x) / m + 1 : 1), s(b - 1, g.x + w[b - 1], 0), s(b, g.x + w[b], 0), s(b + 1, g.x + w[b + 1], 0))
}
},
end: function() {
var t = +new Date - L.time,
e = 250 > Number(t) && Math.abs(g.x) > 20 || Math.abs(g.x) > m / 2,
i = !b && g.x > 0 || b == h.length - 1 && 0 > g.x,
o = 0 > g.x;
x || (e && !i ? (o ? (a(b - 1, -m, 0), a(b, w[b] - m, T), a(b + 1, w[b + 1] - m, T), b += 1) : (a(b + 1, m, 0), a(b, w[b] + m, T), a(b - 1, w[b - 1] + m, T), b += -1), n.callback && n.callback(b, h[b])) : (a(b - 1, -m, T), a(b, 0, T), a(b + 1, m, T))), E.removeEventListener("touchmove", k, !1), E.removeEventListener("touchend", k, !1)
},
transitionEnd: function(t) {
parseInt(t.target.getAttribute("data-index"), 10) == b && (y && c(), n.transitionEnd && n.transitionEnd.call(t, b, h[b]))
}
};
return e(), y && c(), f.addEventListener ? (f.touch && E.addEventListener("touchstart", k, !1), f.transitions && (E.addEventListener("webkitTransitionEnd", k, !1), E.addEventListener("msTransitionEnd", k, !1), E.addEventListener("oTransitionEnd", k, !1), E.addEventListener("otransitionend", k, !1), E.addEventListener("transitionend", k, !1)), window.addEventListener("resize", k, !1)) : window.onresize = function() {
e()
}, {
setup: function() {
e()
},
slide: function(t, n) {
r(t, n)
},
prev: function() {
u(), i()
},
next: function() {
u(), o()
},
getPos: function() {
return b
},
kill: function() {
u(), E.style.width = "auto", E.style.left = 0;
for (var t = h.length; t--;) {
var n = h[t];
n.style.width = "100%", n.style.left = 0, f.transitions && s(t, 0, 0)
}
f.addEventListener ? (E.removeEventListener("touchstart", k, !1), E.removeEventListener("webkitTransitionEnd", k, !1), E.removeEventListener("msTransitionEnd", k, !1), E.removeEventListener("oTransitionEnd", k, !1), E.removeEventListener("otransitionend", k, !1), E.removeEventListener("transitionend", k, !1), window.removeEventListener("resize", k, !1)) : window.onresize = null
}
}
}
}(window.jQuery || window.Zepto) && function(t) {
t.fn.Swipe = function(n) {
return this.each(function() {
t(this).data("Swipe", new Swipe(t(this)[0], n))
})
}
}(window.jQuery || window.Zepto);
Thanks in advance.

Mouseleave delay

I'd like to delay the zoomed image disappearing by a X seconds so I can fade out the image rather than it simply disappearing.
Can I simply add .delay(1000) somewhere to the mouseleave / hide lines of code?
I've tried that but unfortunately doesn't seem to work. I've also tried to wrap a setTimeout( ... , 1000); around various parts of the code, but couldn't make that work either.
Any help much appreciated!
Here is the Jsfiddle https://jsfiddle.net/mr_antlers/nh5jw5tb/2/
This is the original 'EasyZoom' .js code.
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});

You can pass in beforeShow and beforeHide argument into easyZoom when you instantiate them.
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function(a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function() {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function(a) {
a.preventDefault()
})
}, b.prototype.show = function(a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function() {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function(a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function(a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function() {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function(a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function() {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function() {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function(b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function(a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function() {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function(b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function() {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function(c) {
return this.each(function() {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function() {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {
vertical-align: bottom;
}
.easyzoom.is-loading img {
cursor: progress;
}
.easyzoom.is-ready img {
cursor: default;
}
.easyzoom.is-error img {
cursor: not-allowed;
}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 0;
transition: 0.2s;
}
.easyzoom-flyout:hover {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 1;
transition: 0.8s;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>
You can refer the flyout zoomed image using this.$flyout in the functions.
Return false if you want to stop the default hide or show function. Just remember to add the default behavior into your function if you are doing that.
In the example I did above, I do a fadeOut on the zoomed image and stop the flyout from detaching (default behavior is detach() the zoomed image element). Then, as the flyout element was faded out, I have to use $.show() or the element will be stuck at display: none and nothing will be shown on mouseover.
Hope this helps.

'mouseleave' trigger _onLeave() which fire hide() which cause the zoomed div with image is removed from the DOM so any CSS transition or $().fadeOut() does not work. I removed hide() firing when mouseleave and change opacity in CSS and it seems to work now and anything else seems to be broken. Change opacity time as you wish.
fiddle
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {vertical-align: bottom;}
.easyzoom.is-loading img {cursor: progress;}
.easyzoom.is-ready img {cursor: default;}
.easyzoom.is-error img {cursor: not-allowed;}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:0;
transition: opacity 1s ease-in-out;
}
.easyzoom-flyout:hover {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:1;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>

jQuery background slideshow

I'm trying to create a background slideshow with fade effect, I've found this script which does this beautifully: http://srobbin.com/jquery-plugins/backstretch/
The problem that I encounter is that it re-sizes the image, which I would like to disable / remove.
This is the code:
/*! Backstretch - v2.0.3 - 2012-11-30
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */ (function (e, t, n) {
"use strict";
e.fn.backstretch = function (r, s) {
return (r === n || r.length === 0) && e.error("No images were supplied for Backstretch"), e(t).scrollTop() === 0 && t.scrollTo(0, 0), this.each(function () {
var t = e(this),
n = t.data("backstretch");
n && (s = e.extend(n.options, s), n.destroy(!0)), n = new i(this, r, s), t.data("backstretch", n)
})
}, e.backstretch = function (t, n) {
return e("body").backstretch(t, n).data("backstretch")
}, e.expr[":"].backstretch = function (t) {
return e(t).data("backstretch") !== n
}, e.fn.backstretch.defaults = {
centeredX: !0,
centeredY: !0,
duration: 5e3,
fade: 0
};
var r = {
wrap: {
left: 0,
top: 0,
overflow: "hidden",
margin: 0,
padding: 0,
height: "100%",
width: "100%",
zIndex: -999999
},
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "auto",
height: "auto",
maxWidth: "none",
zIndex: -999999
}
}, i = function (n, i, o) {
this.options = e.extend({}, e.fn.backstretch.defaults, o || {}), this.images = e.isArray(i) ? i : [i], e.each(this.images, function () {
e("<img />")[0].src = this
}), this.isBody = n === document.body, this.$container = e(n), this.$wrap = e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container), this.$root = this.isBody ? s ? e(t) : e(document) : this.$container;
if (!this.isBody) {
var u = this.$container.css("position"),
a = this.$container.css("zIndex");
this.$container.css({
position: u === "static" ? "relative" : u,
zIndex: a === "auto" ? 0 : a,
background: "none"
}), this.$wrap.css({
zIndex: -999998
})
}
this.$wrap.css({
position: this.isBody && s ? "fixed" : "absolute"
}), this.index = 0, this.show(this.index), e(t).on("resize.backstretch", e.proxy(this.resize, this)).on("orientationchange.backstretch", e.proxy(function () {
this.isBody && t.pageYOffset === 0 && (t.scrollTo(0, 1), this.resize())
}, this))
};
i.prototype = {
resize: function () {
try {
var e = {
left: 0,
top: 0
}, n = this.isBody ? this.$root.width() : this.$root.innerWidth(),
r = n,
i = this.isBody ? t.innerHeight ? t.innerHeight : this.$root.height() : this.$root.innerHeight(),
s = r / this.$img.data("ratio"),
o;
s >= i ? (o = (s - i) / 2, this.options.centeredY && (e.top = "-" + o + "px")) : (s = i, r = s * this.$img.data("ratio"), o = (r - n) / 2, this.options.centeredX && (e.left = "-" + o + "px")), this.$wrap.css({
width: n,
height: i
}).find("img:not(.deleteable)").css({
width: r,
height: s
}).css(e)
} catch (u) {}
return this
},
show: function (t) {
if (Math.abs(t) > this.images.length - 1) return;
this.index = t;
var n = this,
i = n.$wrap.find("img").addClass("deleteable"),
s = e.Event("backstretch.show", {
relatedTarget: n.$container[0]
});
return clearInterval(n.interval), n.$img = e("<img />").css(r.img).bind("load", function (t) {
var r = this.width || e(t.target).width(),
o = this.height || e(t.target).height();
e(this).data("ratio", r / o), e(this).fadeIn(n.options.speed || n.options.fade, function () {
i.remove(), n.paused || n.cycle(), n.$container.trigger(s, n)
}), n.resize()
}).appendTo(n.$wrap), n.$img.attr("src", n.images[t]), n
},
next: function () {
return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0)
},
prev: function () {
return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1)
},
pause: function () {
return this.paused = !0, this
},
resume: function () {
return this.paused = !1, this.next(), this
},
cycle: function () {
return this.images.length > 1 && (clearInterval(this.interval), this.interval = setInterval(e.proxy(function () {
this.paused || this.next()
}, this), this.options.duration)), this
},
destroy: function (n) {
e(t).off("resize.backstretch orientationchange.backstretch"), clearInterval(this.interval), n || this.$wrap.remove(), this.$container.removeData("backstretch")
}
};
var s = function () {
var e = navigator.userAgent,
n = navigator.platform,
r = e.match(/AppleWebKit\/([0-9]+)/),
i = !! r && r[1],
s = e.match(/Fennec\/([0-9]+)/),
o = !! s && s[1],
u = e.match(/Opera Mobi\/([0-9]+)/),
a = !! u && u[1],
f = e.match(/MSIE ([0-9]+)/),
l = !! f && f[1];
return !((n.indexOf("iPhone") > -1 || n.indexOf("iPad") > -1 || n.indexOf("iPod") > -1) && i && i < 534 || t.operamini && {}.toString.call(t.operamini) === "[object OperaMini]" || u && a < 7458 || e.indexOf("Android") > -1 && i && i < 533 || o && o < 6 || "palmGetResource" in t && i && i < 534 || e.indexOf("MeeGo") > -1 && e.indexOf("NokiaBrowser/8.5.0") > -1 || l && l <= 6)
}()
})(jQuery, window);
I randomly tried renaming "resize" but that didn't work out too well.

I tried hardly to understand your question but I'm still not sure if I understood your question correctly, anyway my solution if you are looking to keep all the images in the same size always for every image is adding min width and min-height values to the css style of the image, if the style of the image is "img: { }" so:
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "value",
height: "value",
min-width: "same value",
min-height: "same value",
maxWidth: "none",
zIndex: -999999
}
Not sure but that's the solution for what I understood.

We Keep Coding

JavaScript is the programming language of the Web.

Placing jquery navigation buttons over slider - javascript

Add this to your Stylesheet #slides .slidesjs-previous { position: absolute; top: 45%; left: 10%; z-index:999; } #slides .slidesjs-next{ position: absolute; top: 45%; right: 10%; z-index:999; }

Bring some changes in the next previous css classes according to your requirement. That is: z index margin-top/top.

Related

how to change header color with midnight.js

swipeLeft and swipeRight not working...?

i want my div to come from left side in touch swipe js

Mouseleave delay

jQuery background slideshow

Categories

Resources