KoCTuK.ru — шаблоны dle DataLife Engine, WordPress, скрипты

Приветствую.

Этим образцом желаю представить Dle youtube, как обычный рейтинг DLE как на YOUTUBE «нравится-никак не нравится» зрительно изменить в любой увлекательный разряд на образце рейтинга Youtube. Наиболее основное — данный метод никак не затрагивает файлы отметка, вполне совместим с ним, сообразно-сущности наверное и имеется обычный перечень возможностей DLE.

Тут я применю поэтапный подсчет лайков, зрительную шкалу пропорций лайков, процентное соответствие лайков. С поддержкою js мы сочтем все наверное, применяя rating и vote-num, и используем. Живое голосование станем работать на базе незначительно модифицированной обычной функции DLE. В итоге мы получим таковой супер рейтинг.

Подробно не буду разъяснять, что к чему, элементарно выложу.

1. в fullstory.tpl в нужное место ставим (замечу, что можно и в shortstory.tpl)

[rating-type-3]
<div class="frate ignore-select" id="frate-{news-id}">
<div class="rate-plus" id="pluss-{news-id}" onclick="doRateLD('plus', '{news-id}');"><img src="{THEME}/images/thumb-up.png" alt="нравится" /><span>0</span></div>
<div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><img src="{THEME}/images/thumb-down.png" alt="не нравится" /><span>0</span></div>
<div class="rate-data">{rating}{vote-num}</div>
</div>
[/rating-type-3]

2. в ваш css файл в конец

.frate {display:inline-block; white-space:nowrap; height:30px; line-height:20px; position:relative;}
.rate-data {display:none;}
.rate-plus, .rate-minus {display:inline-block; vertical-align:top; cursor:pointer; min-width:40px; color:#a0a0a0;}
.rate-minus {margin-left:20px;}
.frate img {opacity:0.3; margin-right:7px; display:inline-block; vertical-align:top;}
.frate div:hover img {opacity:1;}
.frate div:hover {color:#000;}
.rbar {height:3px; overflow:hidden; background-color:#cfcfcf; border-radius:1px; position:absolute; left:0; top:100%; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#2692e6; transition:width 1s linear;}

3. в ваш js файл в конец

$(document).ready(function(){

	$('.frate').each(function(){
        var rate = $(this),
			rdata = rate.find('.rate-data'),
			rrate = parseInt(rdata.find('.ratingtypeplusminus').text(), 10),
			rvote = parseInt(rdata.find('span[id*=vote]').text(), 10);
			rate.append('<div class="rbar"><div class="rfill"></div></div>');
		if ( rvote >= rrate && rvote > 0 ) {
			var m = (rvote - rrate)/2, 
				p = rvote - m,
				perc = Math.round(p/rvote*100);
			rate.find('.rate-plus span').html(p);
			rate.find('.rate-minus span').html(m);
			rate.find('.rfill').css({'width':''+perc+'%'});
		};
    });
	
});

	function doRateLD( rate, id ) {
		ShowLoading('');
		$.get(dle_root + "engine/ajax/rating.php", { go_rate: rate, news_id: id, skin: dle_skin, user_hash: dle_login_hash }, function(data){
			HideLoading('');
			if ( data.success ) {
				var rating = data.rating;
				rating = rating.replace(/&lt;/g, "<");
				rating = rating.replace(/&gt;/g, ">");
				rating = rating.replace(/&amp;/g, "&");
				$("#ratig-layer-" + id).html(rating);
				$("#vote-num-id-" + id).html(data.votenum);
				var rt = parseInt($(rating).text()),
					m = (data.votenum - rt)/2,
					p = data.votenum - m,
					perc = Math.round(p/data.votenum*100),
					fRate = $("#frate-" + id);
				fRate.find('.rate-plus span').html(p);
				fRate.find('.rate-minus span').html(m);
				fRate.find('.rfill').css({'width':''+perc+'%'});
			} else if (data.error) {DLEalert ( data.errorinfo, dle_info );}
		}, "json");
	};

4. закачиваем картинки лайков в папку images шаблона

Есть нюанс: работает, если был всегда нравится-не нравится или с нуля. Если ранее были звезды или просто один лайк и там наставили оценок, то работать не будет (цифры будут нули), надо обнулять все.

В архиве вы найдете все написанное выше, раскиданное по папкам и файлам.

Dle youtubeСкачать