0
Ваша корзина пуста
Товаров в корзине 0 на сумму 0 руб. Перейти в корзину Оформить заказ
0
Ваш список пожеланий пуст
Товаров в списке пожеланий 0 на сумму 0 руб. Перейти в список пожеланий
Выравнивание блоков по высоте

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

Упростить задачу по выравниванию высоты контейнеров и призван 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();
});

Скачать

Как вставить видео с 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>

Демо

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

Как устранить конфликт jQuery

Часто бывает, что модули используют различные библиотеки (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 и пр.)

Параметры проигрывателя 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

Оптимизация сайта на Joomla

Для того, чтобы ускорить загрузку сайта на Jommla необходимо:

1. Использовать легкий шаблон (меньше скриптов, меньше графики).

2. Оптимизировать графические иображения, используемые на сайте .

3. Оптимизировать CSS и JS коды,объединенить различныe CSS в один файл.

4. Уменьшить количество запросов, путем объединения изображений в спрайты, объединения различных CSS в один файл.

5. Минимизировать использование сторонних расширений.

6. Включение встроенного кэша (на вкладке "Общие настройки" + активировать плагин). Включит кэш в настройках модулей.

7. Отключить, а еще лучше удалить, не используемые модули и плагины. Удалить не используемые компоненты.

8. Код старниц не должен содержать ошибок.

9. Размещать сайты на хорошем, быстром хостинге.

Разберем каждый пункт подробнее

1. Думаю, что здесь все ясно. От веса страницы значительно зависит скорость ее загрузки. Старайтесь не использовать тяжелые бэкграунды и шапки сайта. Вес главной страницы 200кб - это уже многовато.

2. Уменьшить вес изображений можно с помощью графических редакторов.

3. Для оптимизации CSS и JS файлов можно воспользоваться либо сторонними расширениями, либо сделать это самостоятельно при помощи инструмента PageSpeed в браузере FireFox. А можно использовать оба метода - это даст наилучший результат. В первом случае рекомендую использовать плагин CssJsCompress. С его помощью можно объединить различные CSS файлы в один, JS файлы в один файл, минимизировать HTML файлы, сжать файлы Gzip. Во втором случае нам понадобится браузер FireFox и приложение для него PageSpeed. Заходим в Firefox, открываем сайт, запускаем приложение PageSpeed и видим оценку нашего сайта со всеми недостатками и способами их исправления. Так, например, предложение сократить CSS и JS с указанием конкретных файлов. Откроем оптимизированный, предложенный PageSpeed код, скопируем его. Теперь открываем наш файл с неоптимизированным кодом и просто заменим его скопированным. Это процедуру необходимо проделать, по возможности со всеми CSS и JS файлами используемыми на вашем сайте.

4. Про объединение изображений в спрайты можно прочитать здесь.

5. Зачастую при создании сайта, начинающие разработчики стараются воспользоваться всеми возможностями, которые предоставляют сторонние разработчики, путем установки новых плагинов, модулей, компонентов, что существенно увеличивает нагрузку на сайт. В большенстве же случаев необходимости в использовании сторонних разработок нет, достаточно стандартного потенциала Joomla.

6. Включение встроенного кэша Joomla значительно ускоряет загрузку сайта, но бывают такие моенты, когда кэшировать страницу не надо, а возможности отключить кэш отдельно для каждой страницы или компонента во встроенном механизме кэширования нет. Что делать? Есть неплохое решение в виде компонента Jotcache и плагина Jotcache, после установки которых вы можете более гибко управлять кэшированием (отключать кэш у отдельных страниц, модулей, компонентов). Подробнее о использовании и настройке Jotcache можно прочитать на сайте webmastermix.ru. Хочу заметить, что при сипользовании компонента Jotcache могут возникнуть проблеммы совместимости с некоторыми сторонними расширениями, так перестает работать модуль randomtags такого популярного компонента, как Tags for Joomla. И не забывайте, что размещать плагин jotcache необходимо последним в списке системных плагинов, впрочем это касается и стандартного плагина кэширования.

7. Многие плагины и модули входящие в состав дистрибьютива Joomla можно смело оключить: - Плагины поиска. Лучше встроить поиск от Yandex или Google. - Система отладка. - Система запомнить меня - Содержимое Рейтинг - Содержимое подсветка кода (GeSHi) - Система - Поддержка старых расширений (Legacy). Этот плагин лучше вообще никогда не включать. На данном сайте включены только четыре модуля: mod_mainmenu, breadcrumbs и два модуля, использующиеся в этой статье mod_wrapper. Из стандартных компонентов остался только компонент Контактов, все остальные удалены, и как видите, сайт все еще рабоатет :)

8. Проверяйте код страниц вашего сайта с помощью валидаторов. Это поможет избежать ошибок в коде, что зачастую также может притормаживать сайт при загрузке.

9. Ну, и конечно же хостинг. От него очень многое зависит. Данный сайт расположен на хостинге spaceweb, нареканий к нему нет. Кроме вышеперечисленных, существую конечно же и другие методы ускорения сайта созданного на Joomla, такие как уменьшение запросов к самой базе данных с помощью компонента Qcache, грамотная структура самого сайта и др. Но даже, если Вы огрничетесь только мерами, перечисленными в данной статье, вы заметно ускорите свой сайт.

Записи блога
  • Выравнивание блоков по высоте Выравнивание блоков по высоте

    (Блог) 2015-10-21

    Часто вид блочной верстки портится из-за разной высоты блоков (контейнеров) соседних колонок. Упростить задачу по выравниванию высоты контейнеров и призван jQuery плагин Simple EQH. Возможности плагина 1. Автоматическое выравнивание высоты...

  • Как вставить видео с youtube на сайт Как вставить видео с youtube на сайт

    (Блог) 2015-10-11

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

  • Параметры проигрывателя Youtube Параметры проигрывателя Youtube

    (Блог) 2015-10-11

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

  • Как устранить конфликт jQuery Как устранить конфликт jQuery

    (Блог) 2015-10-09

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

  • Оптимизация сайта на Joomla Оптимизация сайта на Joomla

    (Блог) 2015-10-08

    Для того, чтобы ускорить загрузку сайта на Jommla необходимо: 1. Использовать легкий шаблон (меньше скриптов, меньше графики). 2. Оптимизировать графические иображения, используемые на сайте . 3. Оптимизировать CSS и JS коды,объединенить различныe CSS в...

  • Калькулятор для сайта Калькулятор для сайта

    (Архив) 2015-10-01

    Калькулятор для сайта на JavaScript. Данный пример простого онлайн клькулятора, который предназначен для расчета стоимости создания сайта, но при желании и с помощью небольшой переделки может быть использован для любых расчетов. В коде калькулятора используется только...

  • Группы пользователей, права доступа Группы пользователей, права доступа

    (Архив) 2015-09-28

    В панели управления Joomla 1.5 можно добавлять, удалять и редактировать пользователей, а также управлять правами пользователей, назначая им различные группы. Пользователи могут быть размещены в нескольких группах с различным уровнем доступа.Группы с доступом к лицевой...

  • Начальная настройка Joomla (1.5) Начальная настройка Joomla (1.5)

    (Архив) 2015-09-28

    После установки Joomla ее необходимо настроить. Для ввода начальных настроек Joomla заходим в админпанель и выбираем пункт "Общие настройки". Попадаем на страницу с названием «Общие настройки» Joomla, которая состоит из трех вкладок: «Сайт»,...

  • Создание сайта на Joomla Создание сайта на Joomla

    (Архив) 2015-09-28

    И так мы установили Joomla локально, создав с помощью Denwer подобие сервера из Вашего компьютера и определились с начальными настройками для нашего сайта. Если во время установки вы выбрали пункт установить демо-данные, то зайдя на свой сайт, вы...

  • Установка Joomla Установка Joomla

    (Архив) 2015-09-27

    Для того, что бы установить Joomla на локальный компьютер необходимо из нашего компьютера создать подобие сервера, и в этом нам поможет Denwer - Джентльменский набор Web-разработчика («Д.н.w.р», читается «Денвер») — проект Дмитрия Котерова, набор...

Последние комментарии

  • JoomShopping атрибуты в списке товаров

    • admin 13.10.2017 15:35
      К сожалению, пока только не помещать атрибуты типа select в скрытый блок.
  • JoomShopping карусель товаров

    • admin 19.10.2017 15:15
      Поддержка языка с "фронта" будет добавлена в следующей версии. Если не хотите ждать выхода новой версии, можно в файле mod_jshopping_dop_products.php ...
       
    • Moltchan 19.10.2017 11:24
      Доброго дня. Подскажите, пожалуйста, при переключении языка сайта (с морды) название все равно отображается по русски. http://grave.moltchan.online/en/Описание ...
  • JoomShopping шаблон

    • admin 13.10.2017 19:03
      Обновите плагин вывода атрибутов в списке товаров.
  • Шаблон для Joomla 3

    • masterbos 23.10.2017 13:11
      Добрый день! Небольшое уточнение. Меню полностью стандартного исполнения? Если надо сделать меню с мультиколонками, надо свой код дописывать?

 

Наши платежные реквизиты

WMR R189734255107
WMU 102469349120
Яндекс деньги - 41001160794290
Master card - 5106 2140 0068 6856