Слайдер с функцией увеличения изображения

Сегодня представляю вам Blueprint — это простой слайдер контента с функцией зума глубины. Каждый слайд имеет области масштабирования, которые будут использоваться для расчета соответствующего значения масштаба для полноэкранной заливки.
После того, как значок увеличения нажат, область увеличения, а также страница масштабируются , создавая иллюзию, что зритель приближается деталь. После того, как вся страница раскрыта, мы показываем некоторые подробности.
В слайдере используется CSS переходы и dymanic.js для перемещения элементов слайдов и Dymanic.js является библиотекой JavaScript для создания анимации.
И так приступим к установке его на наш сайт
1.Скачиваем исходники [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.[/isnt-logged][is-logged]

[/is-logged]
,распаковываем заливаем папки JS,CSS,Font в папку с вашим шаблоном.
2.В head подключаем стили и скрипт подключения шрифтов

Код:
 <link rel="stylesheet" type="text/css" href="{{ tpl_url }}/fonts/feather/style.css">
<!-- Component styles -->
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}css/component.css" />
<script src="{{ tpl_url }}js/modernizr.custom.js"></script>

3.Перед закрытием тега body подключаем скрипты

Код:
 <script src="{{ tpl_url }}js/classie.js"></script>
<script src="{{ tpl_url }}js/dynamics.min.js"></script>
<script src="{{ tpl_url }}js/main.js"></script>

4.Ну и сам слайдер

Код:
 
<!-- Blueprint header -->
<header class="bp-header cf">
<!-- Page title etc. -->
</header>
<!-- Grid -->
<section class="slider">
<div class="slide slide--current" data-content="content-1">
<div class="slide__mover">
<div class="zoomer flex-center">
<img class="zoomer__image" src="Здесь адрес вашей картинки" alt="" />
<div class="preview">
<img src="Здесь адрес вашей картинки" alt="" />
<div class="zoomer__area zoomer__area--size-2"></div>
</div>
</div>
</div>
<h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
</div>
<div class="slide" data-content="content-2">
<div class="slide__mover">
<div class="zoomer flex-center">
<img class="Здесь адрес вашей картинки" alt="" />
<div class="preview">
<img src="Здесь адрес вашей картинки" alt="" />
<div class="zoomer__area zoomer__area--size-4"></div>
</div>
</div>
</div>
<h2 class="slide__title"><span>The Fantastic</span> iPad Mini</h2>
</div>
<!-- ... -->
<nav class="slider__nav">
<button class="button button--nav-prev">
<i class="icon icon--arrow-left"></i>
<span class="text-hidden">Предыдущий слайд</span>
</button>
<button class="button button--zoom">
<i class="icon icon--zoom"></i>
<span class="text-hidden">Просмотр деталей</span>
</button>
<button class="button button--nav-next">
<i class="icon icon--arrow-right"></i>
<span class="text-hidden">Следующий слайд</span>
</button>
</nav>
</section>
<!-- /slider-->
<!-- content -->
<section class="content">
<div class="content__item" id="content-1">
<img class="content__item-img rounded-right" src="Здесь адрес вашей картинки" alt="" />
<div class="content__item-inner">
<h2>The iPhone 6</h2>
<h3>Incredible performance for powerful apps</h3>
<p>Здесь описание ...</p>
</div>
</div>
<div class="content__item" id="content-2">
<!-- ... -->
</div>
<!-- ... -->
<button class="button button--close">
<i class="icon icon--circle-cross"></i>
<span class="text-hidden">Закрыть</span>
</button>
</section>

5.Более подробно можно посмотреть в исходниках и в источнике,ну у меня все ,если что пишите в комментах ,постараюсь обьяснить подробнее

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

5 + 9 =