Галерея PikaChoose и навигация интегрированного Fancybox

Ну что, начнемс. По запросу PikaChoose (не путать с Pok?mon-ом) в google.com или yandex.ru, вы, мои дорогие (я меня паранойя, что блог читают еще люди окромя меня), так вот, по этому запросу вы найдете много всякого полезного. И то, что это плагин для слайд-шоу с массой возможностей, и то что он интегрируется с Fancybox, и то что можно прикрутить jCarousel и ваще — сказка, а не плагин для обыкновенных задач.

Все это хорошо, но вот я добавлю все таки отсебятины, ну не совсем отсебятины, но все же.

Узнать больше


Проблемы с прозрачными изображениями в Nivo Slider

В одном из проектов я использовал Nivo Slider и столкнулся с такой проблемкой, как прозрачные изображения (png).  То есть, при смене одного изображения на другое, у нас оставалось предыдущее… как бы наслоение предыдущего на следующее. К сути. Открываем файл jquery.nivo.slider.js и ищем кусок кода:

if(!nudge){
	slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
} else {
	if(nudge == 'prev'){
		slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
	}
	if(nudge == 'next'){
		slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
	}
}

Узнать больше


Исправить YouTube IFrame Overlay и Z-Index

По умолчанию код для вставки, который предлагает YouTube выглядит следующим образом:

<iframe title="YouTube video player" src="http://www.youtube.com/embed/lZqrG1bdGtg" frameborder="0" width="640" height="390"></iframe>

Немного его модифицируем и получим желанный результатос:

<iframe title="YouTube video player" src="http://www.youtube.com/embed/lZqrG1bdGtg?wmode=opaque" frameborder="0" width="640" height="390"></iframe>

Мы просто добавили небольшой фрагмент «?wmode=opaque» в конец URL-адреса и все прекрасно заработало.
Узнать больше


Выдвигающаяся с любой стороны панель

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

1. CSS

.panel {
	padding: 20px;
	width: 250px;
	background: #eeeeee;
	border: #282828 2px solid;
	font-family: Georgia;
}

2. Подключение jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

3. Подключение jQuery TabSlideOut

Узнать больше


jQuery плагин ограничения количества вводимых символов в textarea

Пример как ограничить количество вводимых символов в TEXTAREA, т.е. используя JavaScript (и библиотеку jQuery) эмитировать действие атрибута maxlength.

Нам понадобится использовать библиотеку jQuery. Как обычно:

<script src="путь/к/jquery.js" type="text/javascript"></script>

Код плагина с небольшими комментариями:

<script type="text/javascript">
// создаём плагин maxlength
jQuery.fn.maxlength = function(options) {
  // определяем параметры по умолчанию и прописываем указанные при обращении
  var settings = jQuery.extend({
    maxChars: 10, // максимальное колличество символов
    leftChars: "character left" // текст в конце строки информера
  }, options);
  // выполняем плагин для каждого объекта
  return this.each(function() {
    // определяем объект
    var me = $(this);
    // определяем динамическую переменную колличества оставшихся для ввода символов
    var l = settings.maxChars;
    // определяем события на которые нужно реагировать
    me.bind('keydown keypress keyup',function(e) {
      // если строка больше maxChars урезаем её
      if(me.val().length>settings.maxChars) me.val(me.val().substr(0,settings.maxChars));
      // определяем колличество оставшихся для ввода сиволов
      l = settings.maxChars - me.val().length;
      // отображаем значение в информере
      me.next('div').html(l + ' ' + settings.leftChars);
    });
    // вставка информера после объекта
    me.after('<div class="maxlen">' + settings.maxChars + ' ' + settings.leftChars + '</div>');
  });
};
</script>

Узнать больше