Пятница, 18 октября 2013 00:00

jQuery 3D Image slider. Для Joomla и не только

Оцените материал
(0 голосов)

Сегодня в программе - небольшой урок для самых-самых начинающих.

Инициирован он вопросом пользователя форума, не сумевшего установить на своем web-сайте под управлением Joomla 3 - модуль слайдшоу, посредством которого картинки слайдера эффектно перелистываются, имитируя 3D-эффект. Бог знает, в чем там дело, возможно, и модуль барахлит, а может и нет; только... только данный модуль ведь так и эдак использует флэш; давайте подумаем, нужен ли он нам сегодня? Почему бы не использовать на нашей страничке иной принцип работы... в самом деле, не хотите же вы, чтоб ваш сайт работал под девизом "flash умер - да здравствует flash"... короче говоря - ок, поехали, начинаем. Уверен, вам понравится.

 

 

 

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

Dev banner 1

Что же, все когда-либо бывает в первый раз. Для начала все-таки давайте кликнем кнопку Download и скачаем архив, содержащий плагин и несколько демок. В распакованной директории мы находим четыре файла, название каждого из которых содержит словечко jquery, плюс еще несколько папок. Чтоб не запутаться - удалите сейчас все вложенные каталоги, кроме одного, который называется three.

Отлично, начало положено и все очень несложно на самом деле. Зайдя в директорию three и недолго думая - открываем единственный находящийся там индексный файл в любом браузере, запросто кликнув по нему... и сразу же имеем удовольствие полюбоваться на вполне уже работающий слайдер. Поверьте, далее все будет еще проще.

Каталог fonts я сразу же удалил; в демке, которую вы видите на этой странице - его содержимое не используется. Теперь - создаем где-либо в public_html вашего сайта новый каталог, обзываем его как вам будет угодно и размещаем в нем:

  1. 4 файла, название которых содержит слово jquery
  2. каталог css
  3. каталог img

В img, разумеется, лежат наши картинки, и более ничего... директория же css - содержит один-единственный файл стилей, который в данном случае выглядит следующим образом (разумеется, всегда возможны варианты):

 

#slider-container {
-webkit-perspective: 800;
-moz-perspective: 800px;
-o-perspective: 800;
perspective: 800px;
margin: 50px 0px 0px 80px;
border-style: dotted;
border-width: 1px;
}
#slider-container #slider {
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#slider-container .face {
position: absolute;
padding: 0px;
}

 

Отлично, сделали? Это было несложно. Что же, нам предстоит теперь самый последний рывок.

На страничке, которой предназначено демонстрация нашего нового 3D-слайдера - мы размещаем код, который я привожу ниже... div-класс nav я, как видите (сравните с оригиналом), удалил, кнопки навигации мне в данном случае не нужны. И вот что у меня получилось (весь приведенный на этой страничке код можно попросту скопировать):

 

<link rel="stylesheet" href="/путь_к_каталогу_слайдера/css/impulseslider.css" type="text/css" media="screen"/>
<div class="container">
<div id="slider-container">
<div id="slider">
<div class="face one">
<img class="img_slider active" src="/путь_к_каталогу_слайдера/img/1.jpg">
</div>
<div class="face two">
<img class="img_slider" src="/путь_к_каталогу_слайдера/img/4.jpg">
</div>
<div class="face three">
<img class="img_slider" src="/путь_к_каталогу_слайдера/img/3.jpg">
</div>
</div>
</div>
</div>
<script src="/путь_к_каталогу_слайдера/jquery-1.8.2.min.js"></script>
<script src="/путь_к_каталогу_слайдера/jquery.impulse.slider-0.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').impulseslider({
height: 150,
width: 300,
depth:150,
perspective:1600,
pauseTime: 2000,
transitionDuration: 1000,
transitionEffect: "ease-in-out",
autostart: true,
rightSelector: ".right",
leftSelector: ".left",
pauseSelector: ".pause",
directionRight: true,
containerSelector: "#slider-container",
spinnerSelector: "#slider"
});
});
</script>

 

Рекомендую загрузить и установить sourcerer, плагин от nonumber, чтобы без проблем (редакторы Joomla обладают неприятным свойством срезать ненужную, по их мнению, часть кода; возможно, они в чем-то и правы, но в урезанном виде - оставшаяся часть кода, поверьте, работать никоим образом у вас не будет) разместить на сайте этот, или подобный этому, код. Вы можете создать таким образом новый HTML-модуль, разместив его затем на страничке посредством module_anywhere, либо напрямую вставив все это в страничку. Не забудьте только внимательнейшим образом прописать путь к каталогу слайдера; как видите, вам придется это сделать аж целых шесть раз.

Что же, на сегодня это все, позвольте откланяться. Дальнейших вам успехов! Главное, что начало положено.

Последнее изменениеПятница, 19 августа 2016 11:52

2 комментарии

  • Комментировать serge Среда, 17 декабря 2014 15:42 написал serge

    Opera 26.0.1656.60 - отлично работает, попробовал.Обновляйтесь. Под Linux пока нет свежих версий, это да. Жаль, но это уже вопрос к разработчикам Opera.

  • Комментировать Бил Понедельник, 06 января 2014 10:56 написал Бил

    Opera 12.16 - не работает.

Оставить комментарий

Добавьте ваш комментарий

Linux для вас. Аутсорсинг и консультации

Линукс для вас. Аутсорсинг и консультации.

SEO-оптимизация. SEO-услуги

Заказать сайт

Веб-разработка. Заказать сайт

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