·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
var
ulike = {
numberEnd:
function
(num, expressions) {
var
result;
count = num %
100
;
if
(count >=
5
&& count <=
20
) {
result = expressions[
'2'
];
}
else
{
count = count %
10
;
if
(count ==
1
) {
result = expressions[
'0'
];
}
else
if
(count >=
2
&& count <=
4
) {
result = expressions[
'1'
];
}
else
{
result = expressions[
'2'
];
}
}
return
result;
},
showLikeTooltip:
function
(id,c){
if
(c!=
0
){
var
like_count =
'Понравилось '
+c+
' '
+ulike.numberEnd(c,[
'человеку'
,
'людям'
,
'людям'
]);
var
offset = $(
'#clike'
+id).offset();
var
left = offset.left -
40
;
var
top = offset.top -
85
;
if
(!$(
'#likeTooltip'
+id).html()){
$(
'body'
).append(
'<div class="tt rich like_tt bottom" id="likeTooltip'
+id+
'" style="position: absolute; left: '
+left+
'px; top: '
+top+
'px;opacity:0;display:none"><table cellspacing="0" cellpadding="0" class="toup1"><tbody><tr><td colspan="3" class="tt_top"><div class="top_pointer" style="margin-left: 74px"></div></td></tr><tr><td class="side_sh"></td><td class="outer"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="side_sh"></td><td class="wrapped"><div class="header"><div class="like_head_wrap"><span id="like_title_wall22490772_592">'
+like_count+
'</span></div></div><div class="wrap"><input type="hidden" id="like_real_count_wall22490772_592" value="1"><div class="content"><div class="hider"><table cellspacing="0" cellpadding="0" class="like_stats'
+id+
'" style="left: 0px"><tbody><tr><td></td></tr></tbody></table></div></div></div></td><td class="side_sh"></td></tr><tr><td colspan="3"><div class="bottom_sh"></div></td></tr></tbody></table></td><td class="side_sh"></td></tr><tr><td colspan="3" class="tt_bottom"><div class="bottom_sh"></div><div class="bottom_pointer" style="margin-left: 74px"></div></td></tr></tbody></table></div>'
);
$(
'#likeTooltip'
+id).stop().animate({
'top'
:
'+=10px'
,
'opacity'
:
'3'
},
"slow"
).show();
}
else
if
($(
'#likeTooltip'
+id).html() && $(
'#likeTooltip'
+id).css(
'display'
)==
'none'
){
$(
'#likeTooltip'
+id).show();
}
if
($(
'.like_stats'
+id).find(
'td'
).html()==
''
){
$(
'.like_stats'
+id).find(
'td'
).hide().before(
'<p class="loading-spinner"><img src="http://allfor.ucoz.net/images/pixel-vfl3z5WfW.gif" alt="">Загрузка...</p>'
);
setTimeout
(
function
() {
$.ajax({
type:
"POST"
,
url:
'/php/ulike/like.php?act=loadliked&cid='
+id+
'&u=1'
,
dataType:
"json"
,
success:
function
(response) {
$(
'.loading-spinner'
).hide();
for
(
var
i=
0
; i<response[
0
].users.length; i++){
$(
'.like_stats'
+id).find(
'td'
).before(
'<td><a title="'
+response[
0
].users[i].username+
'" href="/index/8-'
+response[
0
].users[i].id+
'" ><img class="like_tt_stats_photo" src="'
+response[
0
].users[i].photo+
'" width="30" height="30"></a></td>'
);
}
}
}); },
500
);
}
}
},
hide:
function
(id){
$(
'#likeTooltip'
+id).stop().fadeOut(
200
);
},
show:
function
(id,count){
var
likeTimeout;
if
(!count){count_l = $(
'#clike'
+id).find(
'#liked'
).html();}
else
{count_l = count;}
clearTimeout(likeTimeout);
ulike.showLikeTooltip(id,count_l);
$(
'#likeTooltip'
+id).mouseenter(
function
(){
clearTimeout(likeTimeout);
});
$(
'#clike'
+id).mouseleave(
function
(){
likeTimeout =
setTimeout
(
function
() {ulike.hide(id)},
500
);
});
$(
'#likeTooltip'
+id).mouseleave(
function
(){
likeTimeout =
setTimeout
(
function
() {ulike.hide(id)},
500
);
});
},
liked:
function
(id){
if
(!$(
'#clike'
+id).find(
'#liked'
).html()){c_l =
1
;}
else
{c_l =
parseInt
($(
'#clike'
+id).find(
'#liked'
).html());}
$(
'#clike'
+id).find(
'#liked'
).html(c_l+
1
);
ulike.show(id,c_l);
$(
'.like_stats'
+id).find(
'td'
).hide().before(
'<p class="loading-spinner"><img src="http://allfor.ucoz.net/images/pixel-vfl3z5WfW.gif" alt="">Загрузка...</p>'
);
$.ajax({
type:
"POST"
,
url:
'/php/ulike/like.php?act=add_user&cid='
+id,
dataType:
"text"
,
success:
function
(data) {
if
(data==
1
){
ulike.show(id,c_l);
}
else
{
$(
'#clike'
+id).find(
'#liked'
).html(c_l);
_uWnd.
alert
(
'Вы уже оставили свой лайк ранее'
,
'Ошибка!'
,{w:
300
, h:
70
});
}
$(
'.like_stats'
+id).find(
'td'
).show();
$(
'.loading-spinner'
).hide();
}
});
}
}
$(
document
).ready(
function
() {
var
idc =
''
;
$(
'body'
).find(
'#comlike'
).each(
function
(){
idc += $(
this
).find(
'div'
).attr(
'id'
).replace(
'clike'
,
''
) +
','
;
});
$.ajax({
type:
"POST"
,
url:
'/php/ulike/like.php?act=loadliked&cid='
+idc,
dataType:
"json"
,
success:
function
(data) {
for
(
var
i=
0
; i<data.length; i++) {
var
id = data[i].id;
$(
'#clike'
+id).find(
'#liked'
).html(data[i].liked);
}
}
});
});
001.
002.
003.
004.
005.
006.
007.
008.
009.
010.
011.
012.
013.
014.
015.
016.
017.
018.
019.
020.
021.
022.
023.
024.
025.
026.
027.
028.
029.
030.
031.
032.
033.
034.
035.
036.
037.
038.
039.
040.
041.
042.
043.
044.
045.
046.
047.
048.
049.
050.
051.
052.
053.
054.
055.
056.
057.
058.
059.
060.
061.
062.
063.
064.
065.
066.
067.
068.
069.
070.
071.
072.
073.
074.
075.
076.
077.
078.
079.
080.
081.
082.
083.
084.
085.
086.
087.
088.
089.
090.
091.
092.
093.
094.
095.
096.
097.
098.
099.
100.
101.
102.
103.
104.
105.
106.
В файле "like.class.php" можно изменить некоторые переменные:
$str_m_2 - Кол-во пользователей на стр. в модальном окне
$no_photo - url ссылка на no-photo Пожалуй с самой лёгкой частью скрипта мы разобрались, теперь осталось поставить css)
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
.yt-spinner-img, .loading-spinner img {
background: url(
"http://allfor.ucoz.net/images/icn_loading_animated-vflff1Mjj.gif"
)
50
%
50
% no-repeat transparent;
height: 20px;
vertical-align: middle;
width: 20px;
}
p.yt-spinner, p.loading-spinner {
line-height: 20px;
margin: 0px;
padding: 1em;
text-align: center;
font-size: 11px;color:
#fff;margin-top:-5px
}
.like_tt, .mention_tt {
opacity:
1
;
background: rgba(
0
,
0
,
0
,
0
.702
);
border-radius: 5px;
box-shadow: 0px 1px 3px rgba(
0
,
0
,
0
,
0
.275
);
color:
#FFFFFF;
cursor: pointer;
text-shadow: 0px 1px 0px
#262626;
}
.tt, .ttb {
cursor:
default
;
position: absolute;
z-index:
2000
;
}
.like_tt, .mention_tt {
color:
#FFFFFF;
cursor: pointer;
text-shadow: 0px 1px 0px
#262626;
}
.tt.rich .side_sh {
display: table-cell;
}
.tt .side_sh {
background:
#000000;
display: none;
opacity:
0
.05
;
overflow: hidden;
width: 1px;
}
.tt .outer .side_sh {
opacity:
0
.12
;
}
.wrapped {
overflow: hidden;
word-wrap:
break
-word;
}
.like_tt .header {
cursor: pointer;
}
.like_tt .header .like_head_wrap {
font-size: 11px;
color:
#FFFFFF;
font-weight:
700
;
padding: 8px 9px 3px;
}
.like_tt .content {
padding: 5px 10px 7px;
width: 210px;
}
.like_tt .content .hider {
height: 33px;
overflow: hidden;
position: relative;
width: 210px;
}
.like_tt .content table {
position: relative;
}
.like_tt .content a {
border-radius: 3px;
box-shadow: 0px 1px 1px rgba(
0
,
0
,
0
,
0
.298
);
display: block;
height: 30px;
margin-right: 6px;
overflow: hidden;
width: 30px;
}
.like_tt .like_tt_stats_photo {
border-radius: 3px;
}
.like_tt table.toup1 .bottom_pointer, .mention_tt table.toup1 .bottom_pointer {
background: url(
"http://allfor.ucoz.net/images/like_icons_bl.png"
) -2px -47px no-repeat transparent;
bottom: -7px;
display: block;
height: 7px;
margin-left: 64px;
margin-right: 0px;
position: absolute;
top: auto;
width: 13px;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<div style=
"float:right;margin-right:5px"
id=
"comlike"
>
<div id=
"clike$ID$"
onclick=
"ulike.liked($ID$)"
onmouseover=
"ulike.show($ID$)"
style=
"color: #37506E;font-size: 8.5pt;text-decoration: none;cursor: pointer"
>
Мне нравится: <span id=
"liked"
>
0
</span>
</div>
</div>
1.
2.
3.
4.
5.