Develop Reference

the search bar does not display result

in the home page the search bar doesn't work by entering a keyword it goes into a loop and we don't display the list of search results from the console we display these errors advice to solve the problem, below is the code where we find the error if it helps
we think this is the code related to the problem, we await feedback and suggestions to solve the problem
try {
r.send(i.hasContent && i.data || null)
} catch (e) {
if (o) throw e
}
}, abort: function() {
o && o()
}
}
}), S.ajaxPrefilter(function(e) {
e.crossDomain && (e.contents.script = !1)
}), S.ajaxSetup({
accepts: {
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
},
contents: {
script: /\b(?:java|ecma)script\b/
},
converters: {
"text script": function(e) {
return S.globalEval(e), e
}
}
}), S.ajaxPrefilter("script", function(e) {
void 0 === e.cache && (e.cache = !1), e.crossDomain && (e.type = "GET")
}), S.ajaxTransport("script", function(n) {
var r, i;
if (n.crossDomain || n.scriptAttrs) return {
send: function(e, t) {
r = S("<script>").attr(n.scriptAttrs || {}).prop({
charset: n.scriptCharset,
src: n.url
}).on("load error", i = function(e) {
r.remove(), i = null, e && t("error" === e.type ? 404 : 200, e.type)
}), E.head.appendChild(r[0])
},
abort: function() {
i && i()
}
}
});
var Ut, Xt = [],
Vt = /(=)\?(?=&|$)|\?\?/;
S.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var e = Xt.pop() || S.expando + "_" + Ct.guid++;
return this[e] = !0, e
}
}), S.ajaxPrefilter("json jsonp", function(e, t, n) {
var r, i, o, a = !1 !== e.jsonp && (Vt.test(e.url) ? "url" : "string" == typeof e.data && 0 === (e.contentType || "").indexOf("application/x-www-form-urlencoded") && Vt.test(e.data) && "data");
if (a || "jsonp" === e.dataTypes[0]) return r = e.jsonpCallback = m(e.jsonpCallback) ? e.jsonpCallback() : e.jsonpCallback, a ? e[a] = e[a].replace(Vt, "$1" + r) : !1 !== e.jsonp && (e.url += (Et.test(e.url) ? "&" : "?") + e.jsonp + "=" + r), e.converters["script json"] = function() {
return o || S.error(r + " was not called"), o[0]
}, e.dataTypes[0] = "json", i = C[r], C[r] = function() {
o = arguments
}, n.always(function() {
void 0 === i ? S(C).removeProp(r) : C[r] = i, e[r] && (e.jsonpCallback = t.jsonpCallback, Xt.push(r)), o && m(i) && i(o[0]), o = i = void 0
}), "script"
}), v.createHTMLDocument = ((Ut = E.implementation.createHTMLDocument("").body).innerHTML = "<form></form><form></form>", 2 === Ut.childNodes.length), S.parseHTML = function(e, t, n) {
return "string" != typeof e ? [] : ("boolean" == typeof t && (n = t, t = !1), t || (v.createHTMLDocument ? ((r = (t = E.implementation.createHTMLDocument("")).createElement("base")).href = E.location.href, t.head.appendChild(r)) : t = E), o = !n && [], (i = N.exec(e)) ? [t.createElement(i[1])] : (i = xe([e], t, o), o && o.length && S(o).remove(), S.merge([], i.childNodes)));
var r, i, o
}, S.fn.load = function(e, t, n) {
var r, i, o, a = this,
s = e.indexOf(" ");
return -1 < s && (r = yt(e.slice(s)), e = e.slice(0, s)), m(t) ? (n = t, t = void 0) : t && "object" == typeof t && (i = "POST"), 0 < a.length && S.ajax({
url: e,
type: i || "GET",
dataType: "html",
data: t
}).done(function(e) {
o = arguments, a.html(r ? S("<div>").append(S.parseHTML(e)).find(r) : e)
}).always(n && function(e, t) {
a.each(function() {
n.apply(this, o || [e.responseText, t, e])
})
}), this
}, S.expr.pseudos.animated = function(t) {
return S.grep(S.timers, function(e) {
return t === e.elem
}).length
}, S.offset = {
setOffset: function(e, t, n) {
var r, i, o, a, s, u, l = S.css(e, "position"),
c = S(e),
f = {};
"static" === l && (e.style.position = "relative"), s = c.offset(), o = S.css(e, "top"), u = S.css(e, "left"), ("absolute" === l || "fixed" === l) && -1 < (o + u).indexOf("auto") ? (a = (r = c.position()).top, i = r.left) : (a = parseFloat(o) || 0, i = parseFloat(u) || 0), m(t) && (t = t.call(e, n, S.extend({}, s))), null != t.top && (f.top = t.top - s.top + a), null != t.left && (f.left = t.left - s.left + i), "using" in t ? t.using.call(e, f) : c.css(f)
}
}, S.fn.extend({
offset: function(t) {
if (arguments.length) return void 0 === t ? this : this.each(function(e) {
S.offset.setOffset(this, t, e)
});
var e, n, r = this[0];
return r ? r.getClientRects().length ? (e = r.getBoundingClientRect(), n = r.ownerDocument.defaultView, {
top: e.top + n.pageYOffset,
left: e.left + n.pageXOffset
}) : {
top: 0,
left: 0
} : void 0
},
position: function() {
if (this[0]) {
var e, t, n, r = this[0],
i = {
top: 0,
left: 0
};
if ("fixed" === S.css(r, "position")) t = r.getBoundingClientRect();
else {
t = this.offset(), n = r.ownerDocument, e = r.offsetParent || n.documentElement;
while (e && (e === n.body || e === n.documentElement) && "static" === S.css(e, "position")) e = e.parentNode;
e && e !== r && 1 === e.nodeType && ((i = S(e).offset()).top += S.css(e, "borderTopWidth", !0), i.left += S.css(e, "borderLeftWidth", !0))
}
return {
top: t.top - i.top - S.css(r, "marginTop", !0),
left: t.left - i.left - S.css(r, "marginLeft", !0)
}
}
},
offsetParent: function() {
return this.map(function() {
var e = this.offsetParent;
while (e && "static" === S.css(e, "position")) e = e.offsetParent;
return e || re
})
}
}), S.each({
scrollLeft: "pageXOffset",
scrollTop: "pageYOffset"
}, function(t, i) {
var o = "pageYOffset" === i;
S.fn[t] = function(e) {
return B(this, function(e, t, n) {
var r;
if (x(e) ? r = e : 9 === e.nodeType && (r = e.defaultView), void 0 === n) return r ? r[i] : e[t];
r ? r.scrollTo(o ? r.pageXOffset : n, o ? n : r.pageYOffset) : e[t] = n
}, t, e, arguments.length)
}
}), S.each(["top", "left"], function(e, n) {
S.cssHooks[n] = _e(v.pixelPosition, function(e, t) {
if (t) return t = Be(e, n), Pe.test(t) ? S(e).position()[n] + "px" : t
})
}), S.each({
Height: "height",
Width: "width"
}, function(a, s) {
S.each({
padding: "inner" + a,
content: s,
"": "outer" + a
}, function(r, o) {
S.fn[o] = function(e, t) {
var n = arguments.length && (r || "boolean" != typeof e),
i = r || (!0 === e || !0 === t ? "margin" : "border");
return B(this, function(e, t, n) {
var r;
return x(e) ? 0 === o.indexOf("outer") ? e["inner" + a] : e.document.documentElement["client" + a] : 9 === e.nodeType ? (r = e.documentElement, Math.max(e.body["scroll" + a], r["scroll" + a], e.body["offset" + a], r["offset" + a], r["client" + a])) : void 0 === n ? S.css(e, t, i) : S.style(e, t, n, i)
}, s, n ? e : void 0, n)
}
})
}), S.each(["ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend"], function(e, t) {
S.fn[t] = function(e) {
return this.on(t, e)
}
}), S.fn.extend({
bind: function(e, t, n) {
return this.on(e, null, t, n)
},
unbind: function(e, t) {
return this.off(e, null, t)
},
delegate: function(e, t, n, r) {
return this.on(t, e, n, r)
},
undelegate: function(e, t, n) {
return 1 === arguments.length ? this.off(e, "**") : this.off(t, e || "**", n)
},
hover: function(e, t) {
return this.mouseenter(e).mouseleave(t || e)
}
}), S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "), function(e, n) {
S.fn[n] = function(e, t) {
return 0 < arguments.length ? this.on(n, null, e, t) : this.trigger(n)
}
});
var Gt = /^[\s\uFEFF\xA0]+|([^\s\uFEFF\xA0])[\s\uFEFF\xA0]+$/g;
S.proxy = function(e, t) {
var n, r, i;
if ("string" == typeof t && (n = e[t], t = e, e = n), m(e)) return r = s.call(arguments, 2), (i = function() {
return e.apply(t || this, r.concat(s.call(arguments)))
}).guid = e.guid = e.guid || S.guid++, i
}, S.holdReady = function(e) {
e ? S.readyWait++ : S.ready(!0)
}, S.isArray = Array.isArray, S.parseJSON = JSON.parse, S.nodeName = A, S.isFunction = m, S.isWindow = x, S.camelCase = X, S.type = w, S.now = Date.now, S.isNumeric = function(e) {
var t = S.type(e);
return ("number" === t || "string" === t) && !isNaN(e - parseFloat(e))
}, S.trim = function(e) {
return null == e ? "" : (e + "").replace(Gt, "$1")
}, "function" == typeof define && define.amd && define("jquery", [], function() {
return S
});
var Yt = C.jQuery,
Qt = C.$;
return S.noConflict = function(e) {
return C.$ === S && (C.$ = Qt), e && C.jQuery === S && (C.jQuery = Yt), S
}, "undefined" == typeof e && (C.jQuery = C.$ = S), S
});
jQuery.noConflict();

Multiple filters Simultaneous

I have a few filters (checkbox and price filter and select option).
I want these filters to work together. But there is a problem. Filters work individually. But I want these filters to work together.
I have used this method. Group filters to work. But you can use your own method.
function rangeSlider() {
$(".range-slider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 150,
from: 0,
to: 140,
type: 'double',
step: 1,
prefix: "$",
grid: true,
onFinish: function(data) {
var _price = filters.findIndex(item => item.field === 'price');
if (_price != -1) filters[_price]['value'] = [data.from, data.to];
else addOrRemoveFilter('price', [data.from, data.to], true);
customFilter();
// console.log(addOrRemoveFilter('price', [data.from, data.to], true));
}
});
}
function customFilter() {
let filtered_list = [];
FlyList.filter(item => {
filters.forEach(function(el, i) {
let _field = el['field'];
let _value = el['value'];
// console.log(_value);
if (typeof(_value) === 'object' && _value.length) {
if (parseInt(item[_field]) >= (parseInt(_value[0] * 1000)) && parseInt(item[_field]) <= (parseInt(_value[1] * 1000))) {
filtered_list.push(item);
} else {
FlyList = [];
}
} else {
let isMulti = _value.split(',');
//RANGE PRICE SLIDER
if (isMulti.length > 1) {
let time = miliseconds(item[_field].split(':')[0], item[_field].split(':')[1])
let num1 = miliseconds(isMulti[0].split(':')[0], isMulti[0].split(':')[1]);
let num2 = miliseconds(isMulti[1].split(':')[0], isMulti[1].split(':')[1]);
if (time >= num1 && time <= num2) filtered_list.push(item);
} else {
//end RANGE PRICE SLIDER
item[_field] == _value ? filtered_list.push(item) : false;
}
}
})
});
function miliseconds(hrs, min) {
return ((hrs * 60 * 60 + min * 60) * 1000);
}
$('#flights').updateDom(filtered_list.length ? filtered_list : FlyList, {
animate: true,
});
}
let filterCheckboxes = document.querySelectorAll('.filtersAll');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field, val, e.target.checked);
customFilter();
}
}));
document.getElementById('optionAll').addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field, val, true);
for (var index = 0; index < e.target.options.length; index++) {
addOrRemoveFilter(field, e.target.options[index].value, false);
}
addOrRemoveFilter(field, val, true);
customFilter();
}
})
function addOrRemoveFilter(f, v, add) {
if (add) {
filters.push({
field: f.toLowerCase(),
value: v
});
} else {
for (let i = 0; i < filters.length; i++) {
if (filters[i].field === f.toLowerCase() && filters[i].value === v) {
filters.splice(i, 1);
}
}
}
// console.log(filters);
}
function getParents(el, parentSelector /* optional */ ) {
// If no parentSelector defined will bubble up all the way to *document*
if (parentSelector === undefined) {
parentSelector = document;
}
var parents = [];
var p = el.parentNode;
while (p && (p !== parentSelector || p.parentNode)) {
var o = p;
parents.push(o);
p = o.parentNode;
}
parents.push(parentSelector); // Push that parentSelector you wanted to stop at
return parents;
}
function findFilterTypeElement(el) {
var result = null;
var parents = getParents(el);
parents.forEach((item) => {
if (hasClass(item, 'filter_type') && result == null) {
result = item;
}
});
return result;
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

Javascript - Jquery not displaying values passed in a form

I have found this bootstrap script that allows the user to enter a review.
Issue: i am trying to display the comment + Name and I'm getting undefined for comment and how could i display the stars selected by the user?
Also Is there a way to save the comment and name so it will display all the time after hitting submit button. (Without a database)
Here is my code
(function(e) {
var t, o = {
className: "autosizejs",
append: "",
callback: !1,
resizeDelay: 10
},
i = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
n = ["fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform", "wordSpacing", "textIndent"],
s = e(i).data("autosize", !0)[0];
s.style.lineHeight = "99px", "99px" === e(s).css("lineHeight") && n.push("lineHeight"), s.style.lineHeight = "", e.fn.autosize = function(i) {
return this.length ? (i = e.extend({}, o, i || {}), s.parentNode !== document.body && e(document.body).append(s), this.each(function() {
function o() {
var t, o;
"getComputedStyle" in window ? (t = window.getComputedStyle(u, null), o = u.getBoundingClientRect().width, e.each(["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"], function(e, i) {
o -= parseInt(t[i], 10)
}), s.style.width = o + "px") : s.style.width = Math.max(p.width(), 0) + "px"
}
function a() {
var a = {};
if (t = u, s.className = i.className, d = parseInt(p.css("maxHeight"), 10), e.each(n, function(e, t) {
a[t] = p.css(t)
}), e(s).css(a), o(), window.chrome) {
var r = u.style.width;
u.style.width = "0px", u.offsetWidth, u.style.width = r
}
}
function r() {
var e, n;
t !== u ? a() : o(), s.value = u.value + i.append, s.style.overflowY = u.style.overflowY, n = parseInt(u.style.height, 10), s.scrollTop = 0, s.scrollTop = 9e4, e = s.scrollTop, d && e > d ? (u.style.overflowY = "scroll", e = d) : (u.style.overflowY = "hidden", c > e && (e = c)), e += w, n !== e && (u.style.height = e + "px", f && i.callback.call(u, u))
}
function l() {
clearTimeout(h), h = setTimeout(function() {
var e = p.width();
e !== g && (g = e, r())
}, parseInt(i.resizeDelay, 10))
}
var d, c, h, u = this,
p = e(u),
w = 0,
f = e.isFunction(i.callback),
z = {
height: u.style.height,
overflow: u.style.overflow,
overflowY: u.style.overflowY,
wordWrap: u.style.wordWrap,
resize: u.style.resize
},
g = p.width();
p.data("autosize") || (p.data("autosize", !0), ("border-box" === p.css("box-sizing") || "border-box" === p.css("-moz-box-sizing") || "border-box" === p.css("-webkit-box-sizing")) && (w = p.outerHeight() - p.height()), c = Math.max(parseInt(p.css("minHeight"), 10) - w || 0, p.height()), p.css({
overflow: "hidden",
overflowY: "hidden",
wordWrap: "break-word",
resize: "none" === p.css("resize") || "vertical" === p.css("resize") ? "none" : "horizontal"
}), "onpropertychange" in u ? "oninput" in u ? p.on("input.autosize keyup.autosize", r) : p.on("propertychange.autosize", function() {
"value" === event.propertyName && r()
}) : p.on("input.autosize", r), i.resizeDelay !== !1 && e(window).on("resize.autosize", l), p.on("autosize.resize", r), p.on("autosize.resizeIncludeStyle", function() {
t = null, r()
}), p.on("autosize.destroy", function() {
t = null, clearTimeout(h), e(window).off("resize", l), p.off("autosize").off(".autosize").css(z).removeData("autosize")
}), r())
})) : this
}
})(window.jQuery || window.$);
var __slice = [].slice;
(function(e, t) {
var n;
n = function() {
function t(t, n) {
var r, i, s, o = this;
this.options = e.extend({}, this.defaults, n);
this.$el = t;
s = this.defaults;
for (r in s) {
i = s[r];
if (this.$el.data(r) != null) {
this.options[r] = this.$el.data(r)
}
}
this.createStars();
this.syncRating();
this.$el.on("mouseover.starrr", "span", function(e) {
return o.syncRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("mouseout.starrr", function() {
return o.syncRating()
});
this.$el.on("click.starrr", "span", function(e) {
return o.setRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("starrr:change", this.options.change)
}
t.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, t) {}
};
t.prototype.createStars = function() {
var e, t, n;
n = [];
for (e = 1, t = this.options.numStars; 1 <= t ? e <= t : e >= t; 1 <= t ? e++ : e--) {
n.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"))
}
return n
};
t.prototype.setRating = function(e) {
if (this.options.rating === e) {
e = void 0
}
this.options.rating = e;
this.syncRating();
return this.$el.trigger("starrr:change", e)
};
t.prototype.syncRating = function(e) {
var t, n, r, i;
e || (e = this.options.rating);
if (e) {
for (t = n = 0, i = e - 1; 0 <= i ? n <= i : n >= i; t = 0 <= i ? ++n : --n) {
this.$el.find("span").eq(t).removeClass("glyphicon-star-empty").addClass("glyphicon-star")
}
}
if (e && e < 5) {
for (t = r = e; e <= 4 ? r <= 4 : r >= 4; t = e <= 4 ? ++r : --r) {
this.$el.find("span").eq(t).removeClass("glyphicon-star").addClass("glyphicon-star-empty")
}
}
if (!e) {
return this.$el.find("span").removeClass("glyphicon-star").addClass("glyphicon-star-empty")
}
};
return t
}();
return e.fn.extend({
starrr: function() {
var t, r;
r = arguments[0], t = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var i;
i = e(this).data("star-rating");
if (!i) {
e(this).data("star-rating", i = new n(e(this), r))
}
if (typeof r === "string") {
return i[r].apply(i, t)
}
})
}
})
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr()
})
$(function() {
$('#new-review').autosize({
append: "\n"
});
var reviewBox = $('#post-review-box');
var newReview = $('#new-review');
var openReviewBtn = $('#open-review-box');
var closeReviewBtn = $('#close-review-box');
var ratingsField = $('#ratings-hidden');
openReviewBtn.click(function(e) {
reviewBox.slideDown(400, function() {
$('#new-review').trigger('autosize.resize');
newReview.focus();
});
openReviewBtn.fadeOut(100);
closeReviewBtn.show();
});
closeReviewBtn.click(function(e) {
e.preventDefault();
reviewBox.slideUp(300, function() {
newReview.focus();
openReviewBtn.fadeIn(200);
});
closeReviewBtn.hide();
});
$('.starrr').on('starrr:change', function(e, value) {
ratingsField.val(value);
});
});
$(document).ready(function() {
$("#form").validate({
rules: {
firstname: "required",
comment: "required",
},
messages: {
firstname: "Please enter your first name",
comment: "Please enter your Comment",
}
});
$('#form').submit(function() {
if ($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#comment').val() + '<br />';
$('.display').append(str);
}
return false;
});
});
.animated {
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
}
.stars {
margin: 20px 0;
font-size: 24px;
color: #d17581;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<div class="container">
<div class="row" style="margin-top:40px;">
<div class="col-md-6">
<div class="well well-sm">
<div class="text-right">
<a class="btn btn-success btn-green" href="#reviews-anchor" id="open-review-box">Leave a Review</a>
</div>
<div class="row" id="post-review-box" style="display:none;">
<div class="col-md-12">
<form id="form" accept-charset="UTF-8" action="" method="post">
<input type="text" class="form-control animated" name="firstname" id="firstname" type="hidden" placeholder="Enter your Name">
<br>
<input id="ratings-hidden" name="rating" type="hidden">
<textarea class="form-control animated" cols="50" id="new-review" name="comment" placeholder="Enter your review here..." rows="5"></textarea>
<div class="text-right">
<div class="stars starrr" data-rating="0"></div>
<a class="btn btn-danger btn-sm" href="#" id="close-review-box" style="display:none; margin-right: 10px;">
<span class="glyphicon glyphicon-remove"></span>Cancel</a>
<button class="btn btn-success btn-lg" type="submit">Save</button>
</div>
</form>
<div class="display"></div>
</div>
</div>
</div>
</div>
</div>
</div>
You can check the webiste here here

Since your javascript code says to select textarea with id comment
$('#form').submit(function() {
if ($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#comment').val() + '<br />';
$('.display').append(str);
}
return false;
});
Change the id of textarea from new-review to comment
<textarea class="form-control animated" cols="50" id="comment" name="comment" placeholder="Enter your review here..." rows="5"></textarea>

adding autoplay to jquery.roundabout

I have a site I am working on that uses the roundabout from fredhq.com and I would like to make it so it auto plays, I have had a look on their website and can not work out where I need to add the relevant auto play code!
Here is the jquery.roundabout.js code:
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: 'lazySusan',
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});
jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != 'object') ? {} : arguments[0];
// set options and fill in defaults
options = {
bearing: (typeof options.bearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == 'undefined') ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == 'undefined') ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == 'undefined') ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || 'swing',
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || 'lazySusan',
debug: options.debug || false,
childSelector: options.childSelector || 'li',
startingChild: (typeof options.startingChild == 'undefined') ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == 'undefined' || options.reflect === false) ? false : true
};
// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;
// set starting styles
ref
.addClass('roundabout-holder')
.css('padding', 0)
.css('position', 'relative')
.css('z-index', options.minZ);
// set starting options
ref.data('roundabout', {
'bearing': startingBearing,
'tilt': options.tilt,
'minZ': options.minZ,
'maxZ': options.maxZ,
'minOpacity': options.minOpacity,
'maxOpacity': options.maxOpacity,
'minScale': options.minScale,
'maxScale': options.maxScale,
'duration': options.duration,
'easing': options.easing,
'clickToFocus': options.clickToFocus,
'focusBearing': options.focusBearing,
'animating': 0,
'childInFocus': -1,
'shape': options.shape,
'period': period,
'debug': options.debug,
'childSelector': options.childSelector,
'reflect': options.reflect
});
// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 - (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}
// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}
// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});
// start children
this.roundabout_startChildren();
// callback once ready
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data('roundabout');
var children = ref.children(data.childSelector);
children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 - (data.period * i) : data.period * i;
// apply classes and css first
jQuery(this)
.addClass('roundabout-moveable-item')
.css('position', 'absolute');
// then measure
jQuery(this).data('roundabout', {
'startWidth': jQuery(this).width(),
'startHeight': jQuery(this).height(),
'startFontSize': parseInt(jQuery(this).css('font-size'), 10),
'degrees': degrees
});
});
ref.roundabout_updateChildPositions();
});
return this;
};
jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt') + delta);
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == 'undefined') ? null : arguments[1];
var easingType = (typeof arguments[2] == 'undefined') ? null : arguments[2];
var passedData = (typeof arguments[3] !== 'object') ? null : arguments[3];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout'), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || 'swing';
if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime - passedData.timerStart;
if (timer < thisDuration) {
data.animating = 1;
if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing - passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);
}
ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};
jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};
jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 0) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 - jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;
bearing = (reflect === true) ? bearing % 360.0 : bearing;
if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;
// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing <= range.upper && bearing > range.lower) {
jQuery(this).roundabout_animateToDelta(bearing - range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing - range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};
jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};
jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};
// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) - target;
delta = (Math.abs(360.0 - delta) < Math.abs(0.0 - delta)) ? 360.0 - delta : 0.0 - delta;
delta = (delta > 180) ? -(360.0 - delta) : delta;
if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ - data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity - data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale - data.minScale };
// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass('roundabout-in-focus');
} else {
jQuery(this).removeClass('roundabout-in-focus');
}
});
// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, 'blur');
if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, 'focus');
}
data.childInFocus = inFocus;
}
});
return this;
};
//----------------
jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data('roundabout').bearing) % 360;
};
jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};
jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};
jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};
jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};
jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 - ref.data('roundabout').degrees) + info.bearing);
// adjust radians to be between 0 and Math.PI * 2
while (rad < 0) {
rad = rad + Math.PI * 2;
}
while (rad > Math.PI * 2) {
rad = rad - Math.PI * 2;
}
var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values
// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);
// alter item
ref
.css('left', ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(1) + 'px')
.css('top', ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 2.0).toFixed(1) + 'px')
.css('width', factors.width + 'px')
.css('height', factors.height + 'px')
.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css('z-index', Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css('font-size', (factors.adjustedScale * data.startFontSize).toFixed(2) + 'px')
.attr('current-scale', factors.adjustedScale);
if (container.data('roundabout').debug === true) {
out.push('<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ' + ref.css('width') + '; background-color: #ffc;">');
out.push('<strong style="font-size: 12px; white-space: nowrap;">Child ' + childPos + '</strong><br />');
out.push('<strong>left:</strong> ' + ref.css('left') + '<br /><strong>top:</strong> ' + ref.css('top') + '<br />');
out.push('<strong>width:</strong> ' + ref.css('width') + '<br /><strong>opacity:</strong> ' + ref.css('opacity') + '<br />');
out.push('<strong>z-index:</strong> ' + ref.css('z-index') + '<br /><strong>font-size:</strong> ' + ref.css('font-size') + '<br />');
out.push('<strong>scale:</strong> ' + ref.attr('current-scale'));
out.push('</div>');
ref.html(out.join(''));
}
return jQuery.roundabout_isInFocus(container, ref.data('roundabout').degrees);
};
Many thanks in advance for any help and advice.
Phil

The source you posted doesn't seem to be the latest version of Roundabout.
I just tried with the latest version, and it works perfectly:
$(document).ready(function() {
$('ul').roundabout({
autoplay: true,
autoplayDuration: 1000,
autoplayPauseOnHover: true
});
});
See http://jsfiddle.net/SfAuF/ for an example.
Download the latest version from GitHub.

Nivo Slider caption rotating half second before image

I've modified the Nivo Slider code, using a 960px container.
The image slot has a width of 50%, as does the caption, which is floated off to the left.
I mainly used z-index to make this work. But now, the caption for the NEXT image in my set is loading about .5 seconds before its image does.
How can I modify the JS to make the image and corresponding caption rotate at the exact same time? Or, at the very least, which part of the JS should I focus on?
Note: I'm rotating between 3 different images/captions.
Here is the JS:
(function(e) {
var t = function(t, n) {
var r = e.extend({}, e.fn.nivoSlider.defaults, n);
var i = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
var s = e(t);
s.data("nivo:vars", i).addClass("nivoSlider");
var o = s.children();
o.each(function() {
var t = e(this);
var n = "";
if (!t.is("img")) {
if (t.is("a")) {
t.addClass("nivo-imageLink");
n = t
}
t = t.find("img:first")
}
var r = r === 0 ? t.attr("width") : t.width(),
s = s === 0 ? t.attr("height") : t.height();
if (n !== "") {
n.css("display", "none")
}
t.css("display", "none");
i.totalSlides++
});
if (r.randomStart) {
r.startSlide = Math.floor(Math.random() * i.totalSlides)
}
if (r.startSlide > 0) {
if (r.startSlide >= i.totalSlides) {
r.startSlide = i.totalSlides - 1
}
i.currentSlide = r.startSlide
}
if (e(o[i.currentSlide]).is("img")) {
i.currentImage = e(o[i.currentSlide])
} else {
i.currentImage = e(o[i.currentSlide]).find("img:first")
} if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
var u = e("<img/>").addClass("nivo-main-image");
u.attr("src", i.currentImage.attr("src")).show();
s.append(u);
e(window).resize(function() {
s.children("img").width(s.width());
u.attr("src", i.currentImage.attr("src"));
u.stop().height("auto");
e(".nivo-slice").remove();
e(".nivo-box").remove()
});
s.append(e('<div class="nivo-caption"></div>'));
var a = function(t) {
var n = e(".nivo-caption", s);
if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
var r = i.currentImage.attr("title");
if (r.substr(0, 1) == "#") r = e(r).html();
if (n.css("display") == "block") {
setTimeout(function() {
n.html(r)
}, t.animSpeed)
} else {
n.html(r);
n.stop().fadeIn(t.animSpeed)
}
} else {
n.stop().fadeOut(t.animSpeed)
}
};
a(r);
var f = 0;
if (!r.manualAdvance && o.length > 1) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
if (r.directionNav) {
s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
e(s).on("click", "a.nivo-prevNav", function() {
if (i.running) {
return false
}
clearInterval(f);
f = "";
i.currentSlide -= 2;
d(s, o, r, "prev")
});
e(s).on("click", "a.nivo-nextNav", function() {
if (i.running) {
return false
}
clearInterval(f);
f = "";
d(s, o, r, "next")
})
}
if (r.controlNav) {
i.controlNavEl = e('<div class="nivo-controlNav"></div>');
s.after(i.controlNavEl);
for (var l = 0; l < o.length; l++) {
if (r.controlNavThumbs) {
i.controlNavEl.addClass("nivo-thumbs-enabled");
var c = o.eq(l);
if (!c.is("img")) {
c = c.find("img:first")
}
if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
} else {
i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
}
}
e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
e("a", i.controlNavEl).bind("click", function() {
if (i.running) return false;
if (e(this).hasClass("active")) return false;
clearInterval(f);
f = "";
u.attr("src", i.currentImage.attr("src"));
i.currentSlide = e(this).attr("rel") - 1;
d(s, o, r, "control")
})
}
if (r.pauseOnHover) {
s.hover(function() {
i.paused = true;
clearInterval(f);
f = ""
}, function() {
i.paused = false;
if (f === "" && !r.manualAdvance) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
})
}
s.bind("nivo:animFinished", function() {
u.attr("src", i.currentImage.attr("src"));
i.running = false;
e(o).each(function() {
if (e(this).is("a")) {
e(this).css("display", "none")
}
});
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
if (f === "" && !i.paused && !r.manualAdvance) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
r.afterChange.call(this)
});
var h = function(t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
for (var s = 0; s < n.slices; s++) {
var o = Math.round(t.width() / n.slices);
if (s === n.slices - 1) {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: t.width() - o * s + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
} else {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: o + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
}
}
e(".nivo-slice", t).height(i);
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var p = function(t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = Math.round(t.width() / n.boxCols),
s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
for (var o = 0; o < n.boxRows; o++) {
for (var a = 0; a < n.boxCols; a++) {
if (a === n.boxCols - 1) {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: t.width() - i * a + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
} else {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: i + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
}
}
}
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var d = function(t, n, r, i) {
var s = t.data("nivo:vars");
if (s && s.currentSlide === s.totalSlides - 1) {
r.lastSlide.call(this)
}
if ((!s || s.stop) && !i) {
return false
}
r.beforeChange.call(this);
if (!i) {
u.attr("src", s.currentImage.attr("src"))
} else {
if (i === "prev") {
u.attr("src", s.currentImage.attr("src"))
}
if (i === "next") {
u.attr("src", s.currentImage.attr("src"))
}
}
s.currentSlide++;
if (s.currentSlide === s.totalSlides) {
s.currentSlide = 0;
r.slideshowEnd.call(this)
}
if (s.currentSlide < 0) {
s.currentSlide = s.totalSlides - 1
}
if (e(n[s.currentSlide]).is("img")) {
s.currentImage = e(n[s.currentSlide])
} else {
s.currentImage = e(n[s.currentSlide]).find("img:first")
} if (r.controlNav) {
e("a", s.controlNavEl).removeClass("active");
e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
}
a(r);
e(".nivo-slice", t).remove();
e(".nivo-box", t).remove();
var o = r.effect,
f = "";
if (r.effect === "random") {
f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
o = f[Math.floor(Math.random() * (f.length + 1))];
if (o === undefined) {
o = "fade"
}
}
if (r.effect.indexOf(",") !== -1) {
f = r.effect.split(",");
o = f[Math.floor(Math.random() * f.length)];
if (o === undefined) {
o = "fade"
}
}
if (s.currentImage.attr("data-transition")) {
o = s.currentImage.attr("data-transition")
}
s.running = true;
var l = 0,
c = 0,
d = "",
m = "",
g = "",
y = "";
if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
n.css({
top: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
n.css({
bottom: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
h(t, r, s);
l = 0;
c = 0;
var b = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
if (c === 0) {
n.css("top", "0px");
c++
} else {
n.css("bottom", "0px");
c = 0
} if (b === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
b++
})
} else if (o === "fold") {
h(t, r, s);
l = 0;
c = 0;
e(".nivo-slice", t).each(function() {
var n = e(this);
var i = n.width();
n.css({
top: "0px",
width: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "fade") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: t.width() + "px"
});
m.animate({
opacity: "1.0"
}, r.animSpeed * 2, "", function() {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInRight") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function() {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInLeft") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function() {
m.css({
left: "0px",
right: ""
});
t.trigger("nivo:animFinished")
})
} else if (o === "boxRandom") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
y = v(e(".nivo-box", t));
y.each(function() {
var n = e(this);
if (c === g - 1) {
setTimeout(function() {
n.animate({
opacity: "1"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1"
}, r.animSpeed)
}, 100 + l)
}
l += 20;
c++
})
} else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
var w = 0;
var E = 0;
var S = [];
S[w] = [];
y = e(".nivo-box", t);
if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
y = e(".nivo-box", t)._reverse()
}
y.each(function() {
S[w][E] = e(this);
E++;
if (E === r.boxCols) {
w++;
E = 0;
S[w] = []
}
});
for (var x = 0; x < r.boxCols * 2; x++) {
var T = x;
for (var N = 0; N < r.boxRows; N++) {
if (T >= 0 && T < r.boxCols) {
(function(n, i, s, u, a) {
var f = e(S[n][i]);
var l = f.width();
var c = f.height();
if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
f.width(0).height(0)
}
if (u === a - 1) {
setTimeout(function() {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + s)
} else {
setTimeout(function() {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3)
}, 100 + s)
}
})(N, T, l, c, g);
c++
}
T--
}
l += 100
}
}
};
var v = function(e) {
for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
return e
};
var m = function(e) {
if (this.console && typeof console.log !== "undefined") {
console.log(e)
}
};
this.stop = function() {
if (!e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = true;
m("Stop Slider")
}
};
this.start = function() {
if (e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = false;
m("Start Slider")
}
};
r.afterLoad.call(this);
return this
};
e.fn.nivoSlider = function(n) {
return this.each(function(r, i) {
var s = e(this);
if (s.data("nivoslider")) {
return s.data("nivoslider")
}
var o = new t(this, n);
s.data("nivoslider", o)
})
};
e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: "Prev",
nextText: "Next",
randomStart: false,
beforeChange: function() {},
afterChange: function() {},
slideshowEnd: function() {},
lastSlide: function() {},
afterLoad: function() {}
};
e.fn._reverse = [].reverse
})(jQuery) = [].reverse
})(jQuery)