Backstretch - Динамический Background

Всем привет! Представляю вашему вниманию плагин BACKSTRETCH.

Как гласит описание на сайте автора: Простой JQuery плагин, позволяющий добавлять слайд-шоу фонового изображения на любую страницу или элемент. (как то так)

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

Использование плагина очень простое. Для начала
скачаем его
и скопируем в папку шаблона (templates/YOURTEMPLATE/js/)

Подключим в head (можно конечно и в тело шаблона):

<script src="{THEME}/js/jquery.backstretch.min.js"></script>

И непосредственно его использование:

Тут я хотел бы выделить 4 варианта:

1. Изображение на бэкграунд

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

2. Несколько меняющихся изображений на бэкграунд

$.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

где duration: 3000 - это время показа одного изображения, fade: 750 - скорость смены слайда.

3. Смена изображений по клику:

$("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });
 
  $("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
  });

где outside и cheers - это id ссылок.

Пример ссылки:

<button id="outside" class="btn btn-info" style="display: inline-block;">Показать 1 изображение</button>

4. Бэкграунд элементу

 $("#element").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

Как вы поняли element - id элемента, которому присваивается бэкграунд.

Так же ко всем типам доступны настройки: centeredY и centeredX, по умолчанию = true. Сменив на false изображение будет показываться от левого верхнего угла.

Чем мне понравился данный плагин - так это простотой использования и маленьким весом (3.85 кб).

-----------------------------------------------------

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

1. Скачиваем и заливаем на сервер.

Внимание! У вас нет прав для просмотра скрытого текста.

2. В main.tpl вставляем

{ include file="engine/modules/show.catbackground.php"}

3. Заливаем в папку /templates/YOURTEMPLATE/images/backgrounds/ бэкграунды для категорий, у которых имя = альтернативному_имени_категории.jpg и наслаждаемся работой.

С вами был Дмитрий aka Dark5ider. Будут вопросы - пишите. Всем спасибо.

Чууууть не забыл:
демо
:)

Источник:Dmitry Dark5ider, DLE

Перейти на сайт

Backstretch - Динамический Background

Похожие новости