В этой теме нет ответов

[CB9TOIIIA]

Всем привет! Решил написать рецепт к своему элементу  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> &mdash;" . "<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. Комментарий жены - ух ты ... эффект такой же как у хмнушных сайтов     

Сообщение отредактировал CB9TOIIIA: 18 February 2016 - 13:59