Хаки и Скрипты Next Generation CMS

Supersized - Фоновое слайдшоу jQuery Plugin

irbees2008 irbees2008 Опубликовано - 9 - августа Слайдшоу и анимация
5524 - 3
  • Автор: supersized
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Supersized - Фоновое слайдшоу jQuery Plugin
И так приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Распаковываем и заливаем в 4 папки в папку с шаблоном
3. Подключаем стили и скрипты в head

Код:
<link rel="stylesheet" href="{tpl_url}/css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{tpl_url}/theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="{tpl_url}/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="{tpl_url}/theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 3000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript

// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width

// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
],

// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
4.Перед закрытием тега body вот этот код
Код:
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="{tpl_url}/img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>

<!--Slide captions displayed here-->
<div id="slidecaption"></div>

<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="{tpl_url}/img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Опции
Раскрыть
autoplay
Определяет, будет ли слайд-шоу начинает играть, когда страница загружена.
Тип: Boolean
По умолчанию: 1
fit_always
Предотвращает изображений из когда-либо обрезаны. Игнорирует минимальную ширину и высоту.
Тип: Boolean
по умолчанию: 0

fit_landscape
Предотвращает изображение с его обрезке, заблокировав его на 100% ширины.
Тип: Boolean
по умолчанию: 0
fit_portrait
Предотвращает изображение с его обрезке, заблокировав его на 100% высоты.
Тип: Boolean
По умолчанию: 1

horizontal_center
Центры по горизонтали. При выключении размеры изображений / отображение с левой части страницы.
Тип: Boolean
по умолчанию: 0

image_protect
Отключение правой кнопкой мыши и перетаскивание изображений помощью JavaScript.
Тип: Boolean
По умолчанию: 1

keyboard_nav
Позволяет управлять с помощью клавиатуры.
Пробел - приостановить или возобновить воспроизведение
Стрелка вправо или Стрелка вверх - Следующий слайд
Стрелка влево или Стрелка вниз - Предыдущий слайд
Тип: Boolean
По умолчанию: 1

min_height
Минимальная высота изображения имеет право быть. Если оно выполняется, изображения не будет меняться размер вниз дальше.
Тип: Number
по умолчанию: 0

min_width
Минимальная ширина изображения имеет право быть. Если оно выполняется, изображения не будет меняться размер вниз дальше.
Тип: Number
по умолчанию: 0

new_window
Презентация ссылки открываются в новом окне.
Тип: Boolean
По умолчанию: 1

pause_hover
Пауза слайд-шоу в то время как текущее изображение окошке.
Тип: Boolean
по умолчанию: 0

performance
Использование опции рендеринга изображений в Firefox и Internet Explorer для настройки качества изображения. Это может ускорить / замедлить переходов. Webkit еще не поддерживает этих вариантов.
0 - никаких настроек
1 - Hybrid, снижает качество изображения во время переходов и восстанавливает после завершены. (По умолчанию)
2 - Более высокое качество
3 - Более быстрая скорость перехода, более низкое качество изображения
Тип: Number
По умолчанию: 1

random
Слайды показываются в случайном порядке. start_slide не учитывается.
Тип: Boolean
по умолчанию: 0

slides
Массив, содержащий все ваши изображения с изображением, название, адрес и любые пользовательские поля. Можно удалить строки, которые Вы оставляя пустыми.
Тип: Array
по умолчанию: NULL

slideshow
Включает слайдшоу вкл / выкл. Отключение навигации и переходов.
Тип: Boolean
По умолчанию: 1

slide_interval
Время между слайд изменения в миллисекундах.
Тип: Number
По умолчанию: 5000

slide_links
Формирует список ссылок, которые ведут к соответствующему слайду.
0 или ложной - отключает слайд ссылки
"Номер" - Числа (по умолчанию)
'Имя' - Название слайда
"Пустой" -. Ссылки пусты Позволяет фоне спрайтов.
Тип: String
по умолчанию: 0

start_slide
Слайд-шоу начинается. * в основной версии, которую он контролирует изображение загружается, 0 вызывает случайное изображение, которое будет загружаться каждый раз.
Тип: Number
По умолчанию: 1

stop_loop
Пауза слайд-шоу по достижении последнего слайда.
Тип: Boolean
по умолчанию: 0

thumb_links
Генерирует список пальцем ссылки, которые ведут к соответствующему слайду. Если "пальца" поле для слайд пуст, он будет просто свернуть в полный размер, который может привести к снижению производительности.
Тип: Boolean
по умолчанию: 0

thumbnail_navigation
Переключение вперед / назад с миниатюрами навигации. При включении миниатюр из следующему / предыдущему сообщения генерируются и может быть нажата, чтобы ориентироваться. Если "пальца" поле для слайд пуст, он будет просто свернуть в полный размер.
Тип: Boolean
по умолчанию: 0

transition
Управляет тем, какая эффект используется для перехода между слайдами.
0 или "None" - Эффект перехода не используется
1 или 'исчезать' - Fade эффект (по умолчанию)
2 или 'slideTop' - Вставьте сверху
3 или 'slideRight " - слайд появляется справа
4 или 'slideBottom' - Вставьте снизу
5 или 'slideLeft " - Презентация в слева
6 или 'carouselRight' - Карусель справа налево
7 или 'carouselLeft' - Карусель слева направо
Тип: число или строка
По умолчанию: 1

transition_speed
Скорость перехода в миллисекундах.
Тип: Number
По умолчанию: 750

vertical_center
Центры изображения по вертикали. При выключении размеры изображений / отображение из верхней части страницы.
Тип: Boolean
По умолчанию: 1

API

There are a number of core functions which are accessible via API calls. For theme specific calls, check the Themes API section.
api.nextSlide( )
api.prevSlide( )
api.goTo( )
api.playToggle( )
api.getField( )
api.options
api.nextSlide( )
Triggers transition to the next slide.
$(element).click(function(){
api.nextSlide();
});
api.prevSlide( )
Triggers transition to the previous slide.
$(element).click(function(){
api.prevSlide();
});
api.goTo( targetSlide )
Triggers transition to target slide number.
// Goes to slide #5
$(element).click(function(){
api.goTo(5);
});
api.playToggle( )
Toggles between pause/play states. Changes the vars.is_paused variable to true/false accordingly.
$(element).click(function(){
api.playToggle();
});
api.getField( field )
Returns the value of the specified field for the slide (from the slide array)
$(document).ready(function(){
var slideTitle = api.getField('title');
alert(slideTitle);
});
api.options.some_option
Allows access to all options (theme and base combined).
$(document).ready(function(){
if (api.options.auto_play){
alert('Autoplay is enabled!');
}
});
Variables

In addition to API functions, you can also access a number of variables, the key ones are listed below.
vars.current_slide
Stores the current slide number.
type : number
vars.is_paused
If the slideshow is paused, this value will be true.
type : boolean
vars.in_animation
This variable is true whenever slides are transitioning. Prevents buildup.
type : boolean
Theme API

Since the release of version 3.2.0, the core functionality of Supersized has been separated from the styles, which is where themes come in. The Shutter Theme is included as the default theme, but as you develop it out for your own purposes, you'll likely want to make a theme file all your own.

Aside from the above API calls, there are select theme.someFunction() functions to help you with your theming (highlighted below). You define these from within your theme.
theme._init( )
theme.beforeAnimation( )
theme.afterAnimation( )
theme.playToggle( )
theme.goTo( )
theme._init( )
Houses the majority of your theme functionality, as it is the first theme function called once the initial slide loads.
trigger : first image loaded
theme.beforeAnimation( direction )
Runs prior to each slide transition and when the slideshow first loads. Passed either 'next' or 'prev'. This is a good place to update fields such as caption and slide number using the api.getField() function.
trigger : slideshow start / before each slide transition
theme.afterAnimation( )
Runs each time a slide transition is completed.
trigger : after each slide transition
theme.playToggle( state )
Called each time the slideshow swaps between pause/play. The current state, 'pause' or 'play' is passed in accordingly.
trigger : api.playToggle()
theme.goTo( )
Runs when api.goTo() is used.
trigger : api.goTo()

вот и все

Можешь почитать и вот эту статейку "Стильное адаптивное меню с поддержкой retina"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4613 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [12]
  • Гости: [12]
  • SQL запросов: 22
  • Генерация страницы: 0.351сек
  • Потребление памяти: 5.166 Mb 
  •   Яндекс.Метрика