Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
	background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

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

• оригинальное изображение;
• предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

.directions .direction a.open-modal{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: grayscale(1); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

1. размещаем несколько блок-ссылок с фоном;
2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

Посмотреть в живую | Скачать демо

Подводя итог хочется сказать что остается загадкой для чего Microsoft отключила по-умолчанию фильтры в своем браузере, когда IE только их начал поддерживать, но видимо на это были свои причины. Надеюсь данная статья вам помогла и вы уже поставили лайк и подписались на паблики. Желаю вам поменьше Клиентов-пользователей IE.

В ввиду данных обстоятельств, хочу представить вам свеженький плагин для jQuery — Selection Slider, который позволит вам создать слайдшоу, состоящее из нескольких частей и настроить каждую часть отдельно!

Слайдшоу обладает стандартным набором входных параметров:

• время задержки;
• время анимации;
• автопроигрывание;
• пауза при наведении на селектор.

Основной особенностью слайдшоу является безлимитное количество частей (селекторов), которые вы можете создать в рамках одного слайдера. Каждый селектор может быть настроен отдельно, используя параметры «data-название_опции».

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

Если у вас есть предложения и пожелания по улучшению данного плагина — пишите в комментариях, или воспользуйтесь формой обратной связи в разделе «Контакты».

Надеюсь данный плагин — это то что вы искали и не забывайте ставить лайки, делиться в соц. сетях, писать комментарии — это очень важно для меня. Спасибо

Посмотреть jQuery плагин Selection Slider: Demo livepage

Скачать jQuery плагин Selection Slider: selectionSlider

Один из моих читателей, оказался внимательнее чем все остальные, за что ему отдельная благодарность! И по его просьбе и в благодарность за внимательность, я представляю вам плагин ShadowSlider адаптированный под jQuery версии 1.1.

Пункты навигации, которые раньше не были особо востребованы оказались не докрученными, т.к. для пользования слайдером обычно использовались стрелки навигации (вперед/назад).

В новой же версии я устранил данную ошибку, и теперь это полнофункциональная простая карусель во всю ширину вашего сайта, с кнопками навигации, а также пагинацией! ДЕМО

Вам остается только оформить карусель как вам хочется и вуаля! Если у вас есть пожелания или предложения по улучшению данного плагина, то вы можете написать об этом в комментариях! Не забывайте ставить лайк!

Скачать ShadowSlider for jQuery: jquery-slideshow-1.1

Вот в очередной раз и я столкнулся с данным вопросом. Необходим был слайдер во всю ширину экрана, который бы прокручивался в цикле. И я нашел такой, но я приверженец jQuery, а слайдер — плагин под Mootools. Что делать? Я попробовал найти ресурсы, которые помогают перевести плагины с одной библиотеки под другую, но в конечном счете понял, что сделать это придется мне самому.

Таким образом, представляю вашему вниманию оригинал слайдера на Mootools от Constantin Boiangiu, и свою скромную копию, адаптированную под jQuery. Посмотреть демо слайдера во вся страницу адаптированного под jQuery. Думаю что ссылки следующего и предыдущего слайда и остальные стили вы сами подберете и оформите слайдер по вкусу.

Скачать jquery-ShadowSlider
Скачать mootools-ShadowSlider

ВНИМАНИЕ! слайдер был обновлен, скачать новую версию слайдера для jQuery

Пользуйтесь на здоровье и не забывайте ставить «Лайк» и рассказывать друзьям!
Удачного оформления сайта!

Сегодня я порадую Вас несложным решением, которое, в дальнейшем, поможет остальным разработчикам оперативно и легко исправить недочеты, которые существуют в модуле для 1С Битрикс Energosoft.Slider!

Итак, проблема заключалась в том, что после установки, на битрикс 12.5.10, данного модуля проявлялись следующие баги:

1. Исчезновение стандартного многоуровневого меню
2. Не рабочая карусель (сам модуль)

Решение достаточно простое:

1. Для того чтобы пофиксить меню вам необходимо просто еще раз его настроить! Не известно как, но модуль сбрасывает настройки данного компонента. (переходим в режим правки, наводим на меню и нажимаем шестеренку)
2. Для правильной работы карусели Energosoft Slider нужен jQuery, jQuery.Easing и jQuery.jCarousel. Я использовал последнюю версию jQuery и карусель не хотела работать. Я нашел последние версии jQuery.Easing и jQuery.jCarousel и заменил файлы в папке bitrix/js/energosoft/ с переименовыванием. (скачать файлы — energosoft.slider.js.fix). При этом в настройках модуля я ставлю галочки на подключении только jQuery.Easing и jQuery.jCarousel т.к. jQuery подключаю общий в шаблоне. Если вы подключаете его в компоненте, то обновите и jQuery в папке bitrix/js/energosoft/!

Ребята с поддержки так же рекомендуют убирать галочки в настройках главного модуля (Админ часть -> настройки -> Настройки продукта -> настройка модулей -> Главный модуль) с пунктов «Объединять CSS файлы», «Объединять JS файлы», но это не нужно, как показал опыт

Конечно, такой фикс не совсем корректный, т.к. при первом обновлении модуля файлы заменятся на новые, если разработчики, конечно, обновят компонент и заменят эти файлы, но к этому времени я думаю они прочтут либо эту статью, либо сами поймут причину всех невзгод. Более того! Если вы подключаете свой jQuery в шаблоне, то напоминаю о необходимости его подключать перед скриптами использующими библиотеку jQuery!

На чистой установке битрикса <head> в header.php будет выглядеть так:

	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<?$APPLICATION->ShowHead();?>
		<title><?$APPLICATION->ShowTitle();?></title>
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
	</head>

Обращаю ваше внимание на то что подключение jQuery идет перед подключение скриптов компонентов битрикса!

В целом мы получаем вполне рабочую карусельку Если у вас появились вопросы — пишите в комментариях или в соответствующем разделе (Вопросы и ответы)
Удачного кодинга, господа и дамы!

Сегодня я расскажу как добиться в jQuery-плагине слайдшоу jqFancyTransitions полного эффекта смены жалюзи. Пример

Итак, для этого нам потребуется сама библиотека jQuery, и сам плагин jqFancyTransitions. Все это можно получить по ссылкам:

• jQuery
• jqFancyTransitions

1) Установка плагина:
Установка данного плагина проста:
Подключаем между <head> и </head> наши скрипты:

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

И указываем наши изображения:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Инициализируем наш плагин следующим кодом, в head после подключения скриптов:

<script>
$(document).ready( function(){
$('#slideshowHolder').jqFancyTransitions({
width: 400, height: 300
});
});
</script>

Подробнее о подключении и настройке

2) Настройка вида анимации «жалюзи»
После того, как мы поставим себе на страничку обычную галерейку, нам нужно теперь сделать вид жалюзи. Как тут.

Для этого мы открываем файл jqFancyTransitions.x.x.js, (где x.x — версия), и ищем строку

<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'></div>

она у меня под номером 22. И заменяем style на слудующий:

style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'

Грубо говоря мы просто добавляем border для наших «кусочков» анимации. Но в целом создает впечатление перелистывания жалюзи.
Надеюсь что я вам помог, удачного кодинга!

Скачать исходники