21 октября 2015

• joomla  
• wordpress  
• css  
• jquery  

Часто вид блочной верстки портится из-за разной высоты блоков (контейнеров) соседних колонок.

Упростить задачу по выравниванию высоты контейнеров и призван jQuery плагин Simple EQH.

Возможности плагина

1. Автоматическое выравнивание высоты указанных блоков по наиболее заполненному блоку, подобно тому как это происходило бы в табличной вёрстке.

2. Настраиваемые слекторы (классы) для указания блоков.

Установка

1. Подключаем плагин после подключения библиотеки jQuery

<script src="//simpleeqh.js" type="text/javascript"></script>

 2. Активируем плагин добавив следующий код в тело вашей страницы, или добавив его в ваш скрипт файл:

$(window).load(function(){ 
$(".auto-height").simpleEQH();
});

Этот код выравняет высоту всех блоков с классом auto-height.

Если необходимо привести блоки с разными классами к одной высоте, то необходимо использовать следующий код:

$(window).load(function(){ 
$(".auto-height, .auto-height2").simpleEQH();
});

Этот код выравняет высоту блоков с классами auto-height и auto-height2 по наиболее заполненному блоку.

Если необходимо выравнять блоки с разными классами, каждый по наибольшему блоку своего класса, используем следующий код:

$(window).load(function(){ 
$(".auto-height").simpleEQH();
$(".auto-height2").simpleEQH();
});

Скачать

11 октября 2015

• joomla  
• wordpress  
• html  
• youtube  

В данной статье описаны все параметры встроенного проигрывателя YouTube. Добавив эти параметры к URL SWF-файла, можно задать цвет и границы,  автовоспроизведение и пр.

Все следующие параметры являются необязательными. Официально они поддерживаются только встроенным проигрывателем, однако подмножество этих параметров может работать и с другими проигрывателями, например с проигрывателем плейлистов или пользовательским проигрывателем.

rel Пример: http://www.youtube.com/v/VIDEO_ID?rel=0

Значения: 0 или 1. Значение по умолчанию: 1. Определяет, загружает ли проигрыватель похожие видео после запуска воспроизведения исходного. Похожие видео отображаются в джинн-меню, вызываемом по нажатию кнопки меню. Функция поиска проигрывателя будет отключена, если параметр rel имеет значение 0.

autoplay Пример: http://www.youtube.com/v/VIDEO_ID?autoplay=1

Значения: 0 или 1. Значение по умолчанию: 0. Определяет, начинается ли воспроизведение исходного видео сразу после загрузки проигрывателя.

loop Пример: http://www.youtube.com/v/VIDEO_ID?loop=1

Значения: 0 или 1. Значение по умолчанию: 0. Если значение равно 1, то одиночный проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле. Проигрыватель плейлистов (или пользовательский проигрыватель) воспроизводит по кругу содержимое плейлиста.

enablejsapi

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает API Javascript. Дополнительные сведения об API Javascript и его использовании см. в документации по API JavaScript.

playerapiid

Значением может быть любая буквенно-цифровая строка. Этот параметр используется в сочетании с API JavaScript. Дополнительные сведения см. в документации по API JavaScript .

controls

Значения: 0, 1 или 2. Значение по умолчанию: 1. Этот параметр определяет, будут ли отображаться элементы управления проигрывателем. При встраивании IFrame с загрузкой проигрывателя Flash он также определяет, когда элементы управления отображаются в проигрывателе и когда загружается проигрыватель:

• controls=0 – элементы управления не отображаются в проигрывателе. При встраивании IFrame проигрыватель Flash загружается немедленно.
• controls=1 – элементы управления отображаются в проигрывателе. При встраивании IFrame элементы управления отображаются немедленно и сразу же загружается проигрыватель Flash.
• controls=2 – элементы управления отображаются в проигрывателе. При встраивании IFrame отображаются элементы управления, а проигрыватель Flash загружается после того, как пользователь начнет воспроизведение видео.

Примечание. Значения параметра 1 и 2 одинаково работают с точки зрения пользователя, однако значение controls=2 обеспечивает увеличение производительности по сравнению со значением controls=1 при встраивании IFrame. В настоящее время эти два значения все еще имеют некоторые визуальные различия в проигрывателе, такие как размер шрифта заголовка видео. Однако если разница между двумя значениями станет очевидной для пользователя, значение параметра по умолчанию может измениться с 1 на 2. 

disablekb

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 отключает клавиши управления проигрывателем. Предусмотрены следующие клавиши управления.

• Пробел: воспроизведение/пауза
• Стрелка влево: вернуться на 10% в текущем видео
• Стрелка вправо: перейти на 10% вперед в текущем видео
• Стрелка вверх: увеличить громкость
• Стрелка вниз: уменьшить громкость

egm

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает расширенное джинн-меню. В этом режиме джин-меню (если оно есть) открывается при прохождении указателя мыши над областью воспроизведения видео, а не по нажатию кнопки меню.

border

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает рамку вокруг проигрывателя. Основной цвет рамки определяется параметром color1, а дополнительный цвет – параметром color2.

color1, color2

Значения: любое значение RGB в шестнадцатеричном формате. color1 – основной цвет рамки, а color2 – фоновый цвет панели управления и дополнительный цвет рамки.

start

Значения: целое положительное число. Если этот параметр определен, то проигрыватель начинает воспроизведение видео с указанной секунды. Обратите внимание, что, как и для функции seekTo, проигрыватель начинает воспроизведение с ключевого кадра, ближайшего к указанному значению. Это означает, что в некоторых случаях воспроизведение начнется в момент, предшествующий заданному времени (обычно не более чем на 2 секунды).

fs

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает кнопку полноэкранного режима. Это не повлияет на работу Chromeless Player. Обратите внимание, что для этого в код для встраивания необходимо добавить дополнительные аргументы. В приведенном ниже примере текст, выделенный жирным шрифтом, включает функцию полноэкранного режима. 

<object width="425" height="344">
 <param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
 <param name="allowFullScreen" value="true"></param>
 <embed src="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"
 type="application/x-shockwave-flash"
 allowfullscreen="true"
 width="425" height="344">
 </embed>
 </object>

hd

Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает воспроизведение с высоким разрешением по умолчанию. Это не повлияет на работу Chromeless Player. Этот параметр не работает, если для видео нет версии с высоким разрешением. Если этот параметр включен, то следует иметь в виду, что пользователи с медленными каналами связи могут испытывать неудобства при воспроизведении, пока не отключат функцию высокого разрешения. Убедитесь в том, что проигрыватель способен показывать видео в исходном разрешении.

showsearch

Значения: 0 или 1. Значение по умолчанию: 1. Значение 0 отключает вывод окна поиска при свернутом видео. Обратите внимание, что если параметр rel имеет значение 0, то окно поиска также будет отключено независимо от значения showsearch.

showinfo

Значения: 0 или 1. Значение по умолчанию: 1. При значении 0 проигрыватель перед началом воспроизведения не выводит информацию о видео, такую как название и рейтинг.

iv_load_policy

Значения: 1 или 3. Значение по умолчанию: 1. При значении 1 аннотации видео по умолчанию будут отображаться, а при значении 3 – по умолчанию будут скрыты.

cc_load_policy

Значения: 1. Значение по умолчанию определяется настройками пользователя. При установке значения 1 закрытые субтитры будут отображаться по умолчанию даже в том случае, если титры отключены пользователем.

Ссылка на добавление подписчика на свой канал в Youtube - http://www.youtube.com/subscription_center?add_user=Ваш канал

Подписаться

Несколько параметров - http://www.youtube.com/v/VIDEO_ID?rel=0&autoplay=1

Пример вставки видеоролика с использованием нескольких параметров проигрывателя

<iframe width="420" height="315" src="http://www.youtube.com/embed/uAfRT8xj1_Y?rel=0&autoplay=1" frameborder="0" allowfullscreen=""></iframe>

Старый код встраивания выглядит так:

<object width="420" height="315">
 <param name="movie" value="http://www.youtube.com/v/uAfRT8xj1_Y?version=3&amp;hl=ru_RU&amp;rel=0&amp;autoplay=1"></param>
 <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uAfRT8xj1_Y?version=3&amp;hl=ru_RU&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
 </object>

Расширенная статья - https://developers.google.com/youtube/player_parameters

11 октября 2015

• joomla  
• wordpress  
• html  
• jquery  
• youtube  

Зачастую такая простая операция как вставка видео с сайта youtube на свой сайт вызывает трудности. Связано это с тем, что большинство редактовро сайтов с использованием CMS вырезают тег iframe, через который можно добавить видео на сайт.

Даже, если вы настроили ваш редактор и тег iframe больше не вырезается, остается проблема адаптивности видео. Так, если использовать размер iframe предлагаемый сервисом Youtube, то при просмотре на мобильных устройствах ваш ролик, скорее всего будет обрезаться по ширине.

Избежать этих проблем и призван, созданный нами jQuery плагин SimpleYT.

Возможности плагина

1. Автоматическое определение ссылок на видео с сервиса Youtube. Вы можете просто вставить сгенерированную Youtube ссылку в ваш текст.

2. Настраиваемые селекторы для выбора видео. Вы можете указать класс блока или элемента, где находится ссылка на видео.

3. Обработка коротких (пример - https://youtu.be/qyLzu22baNY) и длинных (пример - http://www.youtube.com/watch?v=qyLzu22baNY) ссылок.

4. Возможность передать параметры проигрывателя в ссылке (пример - https://youtu.be/qyLzu22baNY?t=11s). Подробнее о параметрах можно прочитать в статье "Параметры проигрывателя Youtube".

5. Адаптивный дизайн. Размер видео подстраивается под ширину экрана.

Установка

1. Подключаем плагин после подключения библиотеки jQuery

<script src="//simpleyt.js" type="text/javascript"></script>

2. Активируем плагин добавив следующий код в тело вашей страницы, или добавив его в ваш скрипт файл:

С настройками по умолчанию: 

jQuery("body").simpleYT();

С измененными настройками:

jQuery("body").simpleYT({
 ytselector:'a[href*="youtube.com/watch"], span:contains("youtu.be"), a[href*="youtu.be"]', // селектор поиска ссылок на видео
 exclude:'.popup-youtube', // исключение
 lento:11, // длина id (по умолчанию ссылка имеет длину - 11 символов. Если вы используете ссылки с параметрами, впишите в данное поле - "")
 width:560, // ширина проигрывателя Youtube
 height:316, //высота проигрывателя Youtube
 maxwidth:560, // максимальная ширина блока, в который автоматически помещается iframe с видео
 maxheight:316 // максимальная высота блока, в который автоматически помещается iframe с видео
 });

В нижеприведенном тексте все ссылки на видео будут показаны в проигрывателе, кроме первой, т.к. она имеет класс, который добавлен в исключение

<p>Ваш очень инетересный текст.............</p>
<p><a class="popup-youtube" href="http://www.youtube.com/watch?v=qyLzu22baNY">YouTube video 1</a></p>
<p>Еще один не мене интеесный текст <a href="http://www.youtube.com/watch?v=qyLzu22baNY">YouTube video 2</a></p>
<p>И еще один не мене интеесный текст <a href="https://youtu.be/qyLzu22baNY">YouTube video 3</a></p>
<p>И еще один не мене интеесный текст <span>https://youtu.be/qyLzu22baNY</span></p>

Демо

Скачать плагин

09 октября 2015

• joomla  
• jquery  
• javascript  

Часто бывает, что модули используют различные библиотеки (mootools и jquery) и различные версии библиотек, что приводит к конфликту, и как следствие, неправильной работе модулей или компонентов. Посмотреть ошибки можно в консоле Firebug для FireFox и Google Chrome. Для этого нажмите клавишу F12, откройте ваш сайт и выберите вкладку (Консоль) Сonsole.

Первое, что необходимо проверить - это очередность загрузки скриптов. Сделать это можно, нажав правую кнопку мыши на странице вашего сайта, и выбрав пункт "Просмотр кода страницы" (Google Chrome). Скрипты должны находится между тегами <head>...</head> и иметь следующую очередность загрузки:

1. Javascript библиотека JQuery.

2. Файл с конструкцией jQuery.noConflict();

3. Javascript библиотека Mootools.

4. Остальные скрипты, использующие библиотеки Mootools и JQuery.

Вторым немаловажным моментом, приводящим к неправильной работе скриптов, является двойная загрузка JQuery. Так, если у вас будет следующая очередность загрузки: Библиотека JQuery->Исполняемый скрипт->Библиотека JQuery, то, скорее всего, это приведет к ошибке и ваш исполняемый скрипт не выполнится.

Третье. Если внешне все кажется правильным, а скрипты все равно не работают, необходимо открыть и проверить другие скрипты (файлы с расширением js), т.к. бывает что библиотека JQuery уже "вшита" внутрь этих скриптов, что опять приводит к двойной загрузке этой библиотеки.

Если вы не можете устранить конфликт самостоятельно, можно воспользоваться специальным плагином для Joomla JB Library от Joomlabamboo. Плагин имеет множество настроек, касающихся использования mootools и jquery (выбор версии и способа загрузки jQuery, удаление дублей JQuery и пр.)