Инициирован он вопросом пользователя форума, не сумевшего установить на своем web-сайте под управлением Joomla 3 - модуль слайдшоу, посредством которого картинки слайдера эффектно перелистываются, имитируя 3D-эффект. Бог знает, в чем там дело, возможно, и модуль барахлит, а может и нет; только... только данный модуль ведь так и эдак использует флэш; давайте подумаем, нужен ли он нам сегодня? Почему бы не использовать на нашей страничке иной принцип работы... в самом деле, не хотите же вы, чтоб ваш сайт работал под девизом "flash умер - да здравствует flash"... короче говоря - ок, поехали, начинаем. Уверен, вам понравится.
Да, на скорую руку у меня получилось примерно вот так, как вы это здесь видите. Оговорюсь сразу - подробные инструкции по установке ImpulseSlider вы можете прочесть на страничке разработчика; данное руководство, повторюсь, предназначено тем, кто только-только открывает для себя увлекательнейший мир jQuery.
Что же, все когда-либо бывает в первый раз. Для начала все-таки давайте кликнем кнопку Download и скачаем архив, содержащий плагин и несколько демок. В распакованной директории мы находим четыре файла, название каждого из которых содержит словечко jquery, плюс еще несколько папок. Чтоб не запутаться - удалите сейчас все вложенные каталоги, кроме одного, который называется three.
Отлично, начало положено и все очень несложно на самом деле. Зайдя в директорию three и недолго думая - открываем единственный находящийся там индексный файл в любом браузере, запросто кликнув по нему... и сразу же имеем удовольствие полюбоваться на вполне уже работающий слайдер. Поверьте, далее все будет еще проще.
Каталог fonts я сразу же удалил; в демке, которую вы видите на этой странице - его содержимое не используется. Теперь - создаем где-либо в public_html вашего сайта новый каталог, обзываем его как вам будет угодно и размещаем в нем:
- 4 файла, название которых содержит слово jquery
- каталог css
- каталог 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, либо напрямую вставив все это в страничку. Не забудьте только внимательнейшим образом прописать путь к каталогу слайдера; как видите, вам придется это сделать аж целых шесть раз.
Что же, на сегодня это все, позвольте откланяться. Дальнейших вам успехов! Главное, что начало положено.
