Хаки и Скрипты Next Generation CMS : Слайдшоу и анимация : Подключаем интересный вариант слайдера в новость или ваш сайт

irbees2008 Опубликовано - 1 - декабря Слайдшоу и анимация

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Вот предлагаю вам интересный слайдер для вашего сайта.Эта реализация украсит ваш сайт.
Итак приступим к установке на ваш сайт
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки в папку с ваши шаблоном.
2.В хеад main.tpl подключаем стили и шрифты

Код:

<link rel="stylesheet" type="text/css" href="{{ tpl_tpl }}/css/mockup1.css" />
		<script src="{{ tpl_tpl }}/js/modernizr.custom.js"></script>

3.Вот сам код нашего слайдера ,его помещаем туда где хотим видеть

Код:

<div class="mockup">
					<img class="mockup__img" src="img/mockup.jpg" />
					<div id="mobile" class="mobile">
						<ul id="slideshow" class="slideshow">
							<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/1.png" /></li>
							<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/2.png" /></li>
							<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/3.png" /></li>
							<li class="slideshow__item"><img src="{{ tpl_tpl }}/img/small/4.png" /></li>
						</ul>
					</div>
					<header class="codrops-header">
						<h1><span>Mockup</span> Slideshow <i>Анимированное слайдшоу</i></h1>
					</header>
				</div>

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

Код:

<script src="{{ tpl_tpl }}/js/classie.js"></script>
		<script src="{{ tpl_tpl }}/js/main.js"></script>
		<script>
			(function() {
				new Slideshow( document.getElementById( 'slideshow' ) );

				/* Mockup responsiveness */
				var body = docElem = window.document.documentElement,
					wrap = document.getElementById( 'wrap' ),
					mockup = wrap.querySelector( '.mockup' ),
					mockupWidth = mockup.offsetWidth;

				scaleMockup();

				function scaleMockup() {
					var wrapWidth = wrap.offsetWidth,
						val = wrapWidth / mockupWidth;

					mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
				}

				window.addEventListener( 'resize', resizeHandler );

				function resizeHandler() {
					function delayed() {
						resize();
						resizeTimeout = null;
					}
					if ( typeof resizeTimeout != 'undefined' ) {
						clearTimeout( resizeTimeout );
					}
					resizeTimeout = setTimeout( delayed, 50 );
				}

				function resize() {
					scaleMockup();
				}
			})();
		</script>

5.Это расписан первый вариант,остальные смотрим исходники и делаем аналогично

Можешь почитать и вот эту статейку "Вставить во всех новостях разделитель"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.