Sign in

Зарегистрируйтесь, чтобы стать полноправным участником сообщества Masterpro.ws.

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

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

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

 

 

 

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

Что же, все когда-либо бывает в первый раз. Для начала все-таки давайте кликнем кнопку 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, либо напрямую вставив все это в страничку. Не забудьте только внимательнейшим образом прописать путь к каталогу слайдера; как видите, вам придется это сделать аж целых шесть раз.

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

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

  • serge

    написал serge

    Среда, 17 декабря 2014 15:42

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

  • Бил

    написал Бил

    Понедельник, 06 января 2014 10:56

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

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

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