Не могу разобраться в коде
(function(c) {
c.fn.darkbox = function() {
function j() {
clearInterval(m);
d.css("background-position", "24px 24px")
}
function h() {
j();
k.animate({
opacity: 0
}, q, function() {
b.removeClass(r);
d.stop();
l.unbind("error", n).attr("src", "")
})
}
function o(a) {
if (27 === a.which || 32 === a.which)
if (0 === c("div.darkbox:hidden").length) {
a.preventDefault();
h()
}
}
function n() {
j();
b.addClass("darkbox-error");
setTimeout(h, s)
}
c('<div class="darkbox"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><img alt=""><div class="darkbox-button" title="Close"></div></div></div>').appendTo("body");
var q = 100,
s = 800,
r = "darkbox-on darkbox-done darkbox-loaded darkbox-error",
t = /mac/i.test(navigator.platform) ? "darkbox-button-left" : "darkbox-button-right",
b = c("div.darkbox"),
k = b.children("div.darkbox-shadow"),
d = b.children("div.darkbox-canvas"),
l = d.children("img"),
u = d.children("div.darkbox-button"),
m = 0,
i = 0;
k.css({
opacity: 0
}).click(h);
u.addClass(t).click(h);
l.load(function() {
j();
var a = c(this),
g = 1,
e = a.width(),
f = a.height();
g = b.width();
var p = b.height();
if (0 === e && 0 === f) setTimeout(function() {
a.load()
}, 10);
else {
if (e > g - 50 || f > p - 50) {
g = Math.min((g - 50) / e, (p - 50) / f);
e = Math.round(e * g);
f = Math.round(f * g)
}
b.addClass("darkbox-loaded");
d.animate({
width: e,
marginLeft: -e / 2,
height: f,
marginTop: -f / 2,
opacity: 1
}, 400, function() {
b.addClass("darkbox-done")
})
}
});
c(document).keypress(o).keydown(o);
this.click(function(a) {
a.preventDefault();
a = c(this);
b.addClass("darkbox-on");
d.css({
width: "",
marginLeft: "",
height: "",
marginTop: "",
opacity: 0.5
});
m = setInterval(function() {
d.css("background-position", "24px " + (24 - 56 * i) + "px");
i = 7 <= i ? 0 :
i + 1
}, 90);
l.one("error", n).css({
width: "",
height: ""
}).attr("src", a.attr("href")).attr("alt", a.attr("title"));
k.animate({
opacity: 0.6
}, 200)
});
return this
}
})(jQuery);
Код открывает изобраение в увеличенном размере. В заблуждения вводит следующее 1:
[JS](function(c) {
c.fn.darkbox = function() {
Почему с, а не $ 2:
c('<div class="darkbox"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><img alt=""><div class="darkbox-button" title="Close"></div></div></div>').appendTo("body");
Читал в документации, но не нашел такой метод создания объекта, как я понимаю создается элемент "c" так? или что иное? 3: var a = c(this) Эту карамбу я вообще не понимаю, что в итоге "a"? |
Карбонат,
с = jQuery |
(function (trololo) {alert(trololo)})("ololo")
a - объект jQuery |
1. c - это ссылка на jQuery
2. методами жквери (а на него ссылается переменная с) создается див согласно тегам в строке и добавляется в боди |
Спасибо, все понял!
|
t = /mac/i.test(navigator.platform)В чем смысл этой строчки? |
"Не мак ли у тебя случаем", вроде очевидно даже если не знать js.
|
Ага, спасибо. Понял.
k.css({
opacity: 0
}).click(h);
Тут же такой порядок действий: мы элементу k меняем css свойство opacity на 0 и ждем, пока кто-нибудь щелкнет по нему? |
нет, передаем обработчик вероятно
|
а зачем тогда css({
opacity: 0 }) |
чтобы был прозрачным, вероятно :)
|
this.click(function(a) {
Чем здесь является а, мы ведь потом используем как элемент DOM модели |
И можно ли здесь с this работать как с массивом, ведь он jquery объект, тобишь набор
|
Еще такой вопрос. Из страницы я получаю запросом $( 'a[rel=darkbox]' ).darkbox();
DOM элементы, которые в итоге у меня составляют элемент this в плагине. Если в самом начале написать alert(this.lenght), то он к примеру, выведет 3 элемента. Обработка у меня происходит по клику по одному из них, могу я узнать по какому именно: 1-ому, 2-ому или 3-ему, произошел клик, то есть узнать порядок 0, 1 или 2. Я ведь могу воспользоваться методом this.eq(1) и выбрать средний. Но могу ли я к примеру кликнуть по нему и узнать его номер? |
оно?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
background: yellow;
margin: 5px;
}
span {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
$( "div" ).click(function() {
// `this` is the DOM element that was clicked
var index = $( "div" ).index( this );
$( "span" ).text( "That was div index #" + index );
});
</script>
</body>
</html>
|
Интересная идея, спасибо! Сейчас опробую.
|
А что с a? Это же сначала событие событие, а потом jquery объект
|
А нет, потом DOM-элемент, просто для экономии переменных написали?
|
| Часовой пояс GMT +3, время: 07:52. |