» »

Рабочий рейтинг с KinoPoisk и IMDb для uCoz

Рабочий рейтинг с KinoPoisk и IMDb для uCoz

Новый в красивом оформление рабочий скрипт рейтинга, где также выводит IMDb, который создан совместно с внутренним рейтингом для сайта uCoz. Также нужно заметить, что в материале присутствует совершенно отдельно рейтинга, что идет от кино поиска и IMDb, где не присутствует уже внутренние операторы, которые выводят свой внутренний рейтинг и аналогично с ним IMDb.

Такой набор отличное решение как для кино сайтов, также если взять внутренний рейтинг, то он более обширен по тематическому направлению. Что веб-разработчик может выбрать тот вариант, который больше подходит, как по дизайну и функционалу, что присутствует с выводом информации

Также если касаться стилистики, то все оформление на CSS заточено, если что-то по цветовой гамме изменять, то не нужно лести в код, так как там все уже настроено и проверено на сайте, где изображение можете посмотреть, как приему на темном формате такой рейтинг выглядит.

В рабочем виде:

Вывод рейтинга с кинопоиска

1. Набор из внутреннего рейтинга и рейтингов KinoPoisk и IMDb

Установка скрипта:

Туда где хотим видеть вывод рейтинга ставим код/

JS

Код
<script>  
var KP_SITE_ID = $OTHER1$;  
var getFilmRatingDataPAGE = function getFilmRatingDataPAGE(element, idt, callback) {  
var id = element ? element.data('filmid') : idt;  
$.ajax({ method: 'GET', url: 'https://cors-anywhere.herokuapp.com/https://rating.kinopoisk.ru/' + id + '.xml', success: function success(data) { callback(element, data); }, error: function error() {  
$.ajax({ url: 'http://query.yahooapis.com/v1/public/yql', jsonp: "callback", dataType: "jsonp", data: { q: 'select * from xml where url="https://rating.kinopoisk.ru/' + id + '.xml"', format: 'xml' }, success: function success(data) {  
if (data.results[0]) { callback(element, data.results[0]); } } }); } }); };  
var renderFilmPageRatingDataPAGE = function(element, data) {  
$('#imdb_num_vote').text($(data).find('imdb_rating').attr('num_vote').replace(/(\d)(?=(\d{3})+$)/g, '$1 '));  
$('#imdb-page-rating').text($(data).find('imdb_rating').text()).prop('title', 'Голосов: ' + $(data).find('imdb_rating').attr('num_vote').replace(/(\d)(?=(\d{3})+$)/g, '$1 ')); };  
if (KP_SITE_ID) { getFilmRatingDataPAGE(false, KP_SITE_ID, renderFilmPageRatingDataPAGE); }  
var renderFilmPageRatingDataPAGE = function(element, data) {  
$('#kp_num_vote').text($(data).find('kp_rating').attr('num_vote').replace(/(\d)(?=(\d{3})+$)/g, '$1 '));  
$('#kp-page-rating').text($(data).find('kp_rating').text()).prop('title', 'Голосов: ' + $(data).find('kp_rating').attr('num_vote').replace(/(\d)(?=(\d{3})+$)/g, '$1 ')); };  
if (KP_SITE_ID) { getFilmRatingDataPAGE(false, KP_SITE_ID, renderFilmPageRatingDataPAGE); }  
</script>

HTML

Код
<div class="relatedi rates">  
<div class="rating">  
<div class="rat" data-count="$RATING$" data-name="Рейтинг"></div>  
<span class="ret">  
<script src="http://makecs.ru/js/libs.js"></script>  
<?$RSTARS$('24','http://zornet.ru/ABVUN/Abas/rating_star_03.png','1','float')?>  
<span class="vote-num">Всего проголосовали: $RATED$</span>  
</span>  
</div>  
<div class="rating-right">  
<span class="rating_type_text rating_size_l">  
<div class="rating__source"><i class="fa fa-imdb" style="font-size:24px" aria-hidden="true"></i> IMDb</div>  
<span class="rating__value" id="imdb-page-rating">Загрузка...</span> (<span id="imdb_num_vote">Загрузка...</span>)</span>  
<span class="rating_type_text rating_size_l rating__kp">  
<div class="rating__source"><i class="fa fa-video-camera" style="font-size:24px" aria-hidden="true"></i> КиноПоиск</div>  
<span class="rating__value" id="kp-page-rating">Загрузка...</span> (<span id="kp_num_vote">Загрузка...</span>)</span>  
</div>  
</div>

CSS

Код
<style>  
.relatedi {background-color:#242c3a;padding:10px 15px 0px 15px;margin-bottom:20px;border-radius:7px;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;}  
.rating {}  
.rates > div {display:inline-block;vertical-align:middle;margin-bottom:10px;}  
.ret {float:left;margin-left:10px;margin-top:4px;}  
.rat {position:relative;float:left;width:55px;height:55px;border-radius:50%;box-shadow:inset 0 0 0 2px #354052;}  
.vote-num {font-size:11px}  
.rat > div {position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;color:#e2e2e2;display:block;text-align:center;font-size:19px;font-weight:500;padding-top:16px;}  
.rat > div div {display:none;}  
.rating_type_text {display:inline-block;color:#969696;font-size:12px;}  
.rating__source {margin-bottom:5px;color:#88b669;font-size:14px;font-weight:500;}  
.rating_size_l .rating__value {font-size:19px;font-weight:500;color:#d8d8d8;cursor: pointer;}  
.rating__kp {margin-left:20px;}  
</style>

На этом все, где переходим на второй вариант.

2. Только рейтинг KinoPoisk и IMDb

Красивый рейтинг от сайта кино поиск

- Для начало устанавливаем JS - тот же что и выше прописан.

Устанавливаем по месту

HTML

Код
<div class="rating">  
<span class="rating_type_text rating_size_l">  
<div class="rating__source"><i class="fa fa-imdb" style="font-size:24px" aria-hidden="true"></i> IMDb</div>  
<span class="rating__value" id="imdb-page-rating">загрузка...</span></span>  
<span class="rating_type_text rating_size_l rating__kp"><div class="rating__source"><i class="fa fa-video-camera" style="font-size:24px" aria-hidden="true"></i> КиноПоиск</div>  
<span class="rating__value" id="kp-page-rating">Загрузка...</span></span>  
</div>

CSS

Код
<style>  
.rating {float:right}  
.rating_type_text {display:inline-block;color:#969696;font-size:12px;}  
.rating__source {margin-bottom:5px;color:#88b669;font-size:16px;font-weight:500;}  
.rating_size_l .rating__value {font-size:19px;font-weight:500;color:#d8d8d8;cursor: pointer;}  
.rating__kp {margin-left:40px;}  
</style>


Здесь используется дополнительное поле 1, можно использовать любое другое, заменив в скрипте $OTHER1$ на свой оператор.



Как добавляем материал в поле вписываем ID фильма с кинопоиса, где последние цифры с поисковой строки фильма.
2019-01-12 Просмотров: 323 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Kosten
Kosten 2019-01-12 22:561
0
Изначально про рейтинг на форме тема поднялась, где он в первые появился для установки, это на тот момент, если что то можете почерпнуть с темы Рейтинг Kinopoisk и iMDB, так как там аналогично размещено.
Kosten
Kosten 2019-01-17 01:522
0
First, а можешь разместить чисто рейтинг, которые от конструктора, просто стильно смотрится, многим думаю понравится.
First
First 2019-01-17 21:463
+1
Ссылки если хочешь можешь заменить. Я просто взял с своего

Kosten
Kosten 2019-01-17 22:264
0
First, от души, круто, в таком случай вообще отдельным материалом сделаю.
Kosten
Kosten 2019-01-18 03:285
0
Еще один момент, просто нет тестового ресурса проверить, это по звездочкам, как понимаю здесь можно поставить любые знаки, не только звездочки, но и лайки.

Как пример:
avatar