Всем привет! Решил написать рецепт к своему элементу YouTubeApi - получить и вывести всю информацию о ролике
В общем наткнулся тут на JS очень интересный: PreViewTube
Эффект можно сделать по наведению или постоянный, но лучше наверно оставить по умолчанию - при :hover.
Прикрутить довольно просто:
В элементе youtubeapi.php 43 строку изменяем (класс добавим):
echo "<a class='thumb' href='".$itemurl."'><img class='preViewTube' src=".$smallimg."></a><br>";
Ну и немного изменим код, т.к. по умолчанию тумбы получают по API среднее качество - а нужно цифровое значение.
$smallimg = $details['snippet']['thumbnails']['medium']['url'];
$smallimgzero = "https://i.ytimg.com/vi/".$videoID."/0.jpg";
Ну и вывод конечно:
echo "<a class='thumb' href='".$itemurl."'><img class='preViewTube' src=".$smallimgzero."></a><br>";
Полный код класса (кому лень):
Spoiler
<?php
/**
* @package com_zoo
* @author YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
// register ElementRepeatable class
App::getInstance('zoo')->loader->register('ElementRepeatable', 'elements:repeatable/repeatable.php');
class ElementYoutubeApi extends ElementRepeatable implements iRepeatSubmittable {
protected function _hasValue($params = array()) {
$videoID = $this->get('value');
$videoID = rtrim($videoID);
if (!empty($videoID)) {
$itemurl = JRoute::_($this->app->route->item($this->_item, false), false, 2);
$apikey = "AIzaSyCXm61STw4LWa-TjVrT9PhqXGHzgoARtHI";
$reservedimg ="http://img.youtube.com/vi/".$videoID."/mqdefault.jpg";
// https://console.developers.google.com/project?pli=1
$get_video = file_get_contents("https://www.googleapis.com/youtube/v3/videos?id=$videoID&key=$apikey&part=statistics,contentDetails,snippet");
$content = json_decode($get_video, true);
// echo "<pre>";
// var_dump($content);
// echo "</pre>";
foreach ($content['items'] as $details) {
$title = $details['snippet']['title'];
$datevideo = $details['snippet']['publishedAt'];
$video_date = date('d.m.y', strtotime($datevideo));
$smallimg = $details['snippet']['thumbnails']['medium']['url'];
$smallimgzero = "https://i.ytimg.com/vi/".$videoID."/0.jpg";
$viewCount = $details['statistics']['viewCount'];
$likeCount = $details['statistics']['likeCount'];
$duration = $details['contentDetails']['duration'];
$duration = new DateInterval($duration);
$duration = $duration->format('%H:%i:%s');
$duration = str_replace("00:", "", $duration);
echo "<a class='thumb' href='".$itemurl."'><img class='preViewTube' src=".$smallimgzero."></a><br>";
echo("<a class='titlelink' href='".$itemurl."'>"."<h3>".$title."</h3></a>" . "<span class='videodate'>". $video_date. "</span> —" . "<span class='viewcount'>".$viewCount." просмотров </span> "." <span class='likeCount'>".$likeCount."</span>");
// do readmore for like 30px
echo "<div class='durationvideo'>".$duration."</div>";
}
// $value = '';
// return !empty($value) || $value === '0';
}
}
protected function _getSearchData() {
return $this->get('value', $this->config->get('default'));
}
protected function _edit() {
return $this->app->html->_('control.text', $this->getControlName('value'), $this->get('value', $this->config->get('default')), 'size="60" maxlength="255"');
}
public function _renderSubmission($params = array()) {
return $this->_edit();
}
}
Далее где удобно подключаем JS - например в template.js (J!Blank):
Мой сжатый вариант библиотеки:
!function(t){t.fn.PreViewTube=function(e){var n=t.extend({interval:500,mode:"hover"},e);return this.each(function(){var e,r=t(this),a=r.attr("src"),c=a.match(/(\w*)\.jpg$/);if("default"==c[1])var i=1;else var i=parseInt(c[1]);"constant"==n.mode?e=setInterval(function(){3==i?i=0:i++,r.attr("src",a.replace(/(\d\.jpg|\w*\.jpg)$/,+i+".jpg"))},n.interval):r.hover(function(){e=setInterval(function(){3==i?i=1:i++,r.attr("src",a.replace(/(\d\.jpg|\w*\.jpg)$/,+i+".jpg"))},n.interval)},function(){clearInterval(e)})})}}(jQuery);
$('.someSelector').PreViewTube();
Пример:
P.S. Комментарий жены - ух ты ... эффект такой же как у хмнушных сайтов 
Edited by CB9TOIIIA, 18 February 2016 - 13:59.
Answered
