Слайдшоу Cucle - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Скрипты для uCoz » Слайдшоу для сайта uCoz » Слайдшоу Cucle

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Слайдшоу Cucle

Слайдшоу Cucle с большим набором эффектов


Логотип Cucle



Слайд-шоу Cucle может воспроизводить большое количество эффектов с картинками, фотографиями, текстом и другими элементами. Слайдшоу работает при подключенной библиотеке jQuery и плагине jquery.cycle.all.min.js В данном материале описываются функциональные возможности слайд шоу, для создания индивидуальных дизайнов потребуются дополнительные знания. В существующих примерах ниже показаны самые примитивные способы применения слайдшоу, надеюсь в дальнейшем будут созданы более достойные экспонаты Cucle.





Команды управления Cucle

Слайдшоу может иметь элементы управления слайдами, можно дополнить кнопками переключения, а так же добавить стоп и паузу. Для элементов управления нужно создавать стили на своё усмотрение, то есть как будут выглядеть те же кнопки управления и где они будут находиться решать Вам самим. По умолчанию элеменов управления нет и после загрузки элемента включается автозапуск слайдшоу. В таблице команд используются значения по умолчанию.


Команда Описание команды
pause

Применение команды актуально при наличии элемента управления паузой, останавливает воспроизведение слайдшоу.

resume

Отмена команды pause воспроизведение возобновляется с места остановки.

toggle

Переключает состояние воспроизведения в режим pause/resume.

next

Команда перехода к следующему слайду в списке.

prev

Команда перехода к предыдущему слайду в списке.

stop

Останавливает воспроизведение слайдов.

destroy

Останавливает воспроизведение слайдов деактивируя обработчики событий.



Применение команд управления Cucle

Ниже показан пример подключения 3 кнопок в скрипте.



<script>
$(document).ready(function() {
$("#prev_button").click(function(){
$('.slideshow').cycle('prev');
});
$("#up_button").click(function(){
$('.slideshow').cycle('toggle');
});
$("#next_button").click(function(){
$('.slideshow').cycle('next');
});
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>


Пример работы слайд шоу Cucle с управлением



Функциональные комманды слайд-шоу Cucle

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


Команда Описание команды
activePagerClass: "activeSlide",

Имя селектора в виде class="name" инициализирующее активный элемент управления навигацией слайд шоу. По умолчанию используется (activePagerClass: "activeSlide").

after: null,

Можно вызвать функцию после демонстрации слайда, по умолчанию (null), не задействована. Используемые функции:
function(currSlideElement, nextSlideElement, options, forwardFlag).
Если задействована одна из функций, нужно указать номер слайда в виде числа, например:
(after: 3,)
После указанного слайда будет задействована одна из вышеперечисленных функций.

allowPagerClickBubble: false,

Можно разрешить использовать событие (click) пришедшее по принципу (pager anchors from bubbling). По умолчанию запрещено, чтобы разрешить используйте true.

animIn: null,

Можно указать тип анимации для появляющегося слайда, по умолчанию отключено, используется эффект перехода.

animOut: null,

Можно указать тип анимации для пропадающего слайда, по умолчанию отключено, используется эффект перехода.

autostop: 0,

Смена слайдов будет остановлена если применить значение true.

autostopCount: 0,

Команда актуальна если (autostop: true,). Нужно указать количество слайдов в виде числового значения, например:
autostopCount: 4,
После показа 4 слайдов включится автостоп.

backwards: false,

Показ слайдов будет производится в обратном направлении, начиная с последнего. По умолчанию отключено, чтобы включить используйте true.

before: null,

Можно вызвать функцию до демонстрации слайда, по умолчанию (null), не задействована. Используемые функции:
function(currSlideElement, nextSlideElement, options, forwardFlag).
Если задействована одна из функций, нужно указать номер слайда в виде числа, например:
(after: 3,)
Перед показом указанного слайда будет задействована одна из вышеперечисленных функций.

containerResize: 1,

Размер контейнера слайдов может изменяться в зависимости от размеров самих изображений. По умолчанию включено на изменение самого большого изображения, для отключения используйте ноль.

continuous: 0,

Возможность использования изменение эффекта воспроизведения. По умолчанию отключено, чтобы включить измените на true.

cssAfter: null,

Использование свойств CSS для определения состояния слайдшоу после перехода него.

cssBefore: null,

Использование свойств CSS для определения состояния слайдшоу до перехода него.

delay: 0,

Можно использовать числовое значение в миллисекундах для перехода слайдов при первой загрузке. Могут использоваться отрицательные значения.

easeIn: null,

Переход на следующий слайд может производиться с использованием функции:

  • jQuery UI Easing

  • По умолчанию отключено, для применения выберите функцию.

    easeOut: null,

    Уход со слайда может тоже дополнен использованием функции:

  • jQuery UI Easing

  • По умолчанию отключено, для применения выберите функцию.

    easing: null,

    Использование функции:

  • jQuery UI Easing

  • Для появляющегося и уходящего слайда одновременно, по умолчанию отключено, для применения выберите функцию.

    fastOnEvent: 0,

    При использовании ручной навигации можно установить числовое значение в миллисекундах, для ускорения или замедления перехода.

    fit: 0,

    Слайды будут соответствовать размеру контейнера в который они помещены. По умолчанию отключено, чтобы включить измените на true.

    fx: "fade",

    Основная команда в которой Вы можете выбрать 28 эффектов. Применяемые эффекты:
    blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom
    Можете посмотреть работу эффектов в действии:

  • Эффекты перехода Cucle

  • Можно использовать одновременно несколько эффектов прописывая их через запятую.

    fxFn: null,

    Вы можете использовать функцию для перехода. По умолчанию отключено, чтобы задействовать выберите:
    function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag).

    height: "auto",

    Высота контейнера слайдов, актуальность применения команды зависит от значения команды (fit: true,). Числовое значение будет соответствовать px.

    metaAttr: "cycle",

    Слайдшоу может содержать опции (data) атрибута.

    next: null,

    Команда определяет имя селектора применённого к управлению следующим слайдом. По умолчанию слайдшоу не оборудовано навигацией слайдов.

    pager: null,

    Команда определяет имя селектора применённого к контейнеру навигации. По умолчанию слайдшоу не оборудовано навигацией слайдов.

    pagerEvent: "click.cycle",

    Команда определяет имя события для переключения постраничной навигации.

    pause: 0,

    Команда управления паузой при наведении на слайд. Не имеет отношения к навигации элементов управления слайдами.

    prev: null,

    Команда определяет имя селектора применённого к управлению предыдущим слайдом. По умолчанию слайдшоу не оборудовано навигацией слайдов.

    prevNextEvent: "click.cycle",

    Используется в качестве события устанавливающего пренудительный переход предыдущий\следующий слайд.

    random: 0,

    Команда порядка показа слайдов, по умолчанию отключена. Чтобы включить случайный переход измените на true, для последовательного показа используйте false.

    randomizeEffects: 1,

    Если Вы применяете несколько эффектов и хотите чтобы они применялись в случайном порядке, измените значение на true.

    requeueOnImageNotLoaded: true,

    Команда запрашивает готовность слайдшоу при неполной загрузке всех слайдов. По умолчанию включено, чтобы отключить измените на false

    requeueTimeout: 250,

    Используемая задержка в миллисекундах для отправления запроса. Можно изменить значение по умолчанию на любое числовое значение.

    rev: 0,

    Реверсивный вызов анимации для поддерживающих эффектов.

    shuffle: null,

    Добавляет возможность использование координат для анимации.

    slideResize: 1,

    Команда фиксирует слайды по ширине и высоте при переходе.

    speed: 1000,

    Оределяет скорость перехода анимации в миллисекундах.

    speedIn: null,

    Определяет скорость перехода на слайд в миллисекундах. По умолчанию отключена, чтобы включить используйте числовое значение.

    speedOut: null,

    Определяет скорость перехода со слайда в миллисекундах. По умолчанию отключена, чтобы включить используйте числовое значение.

    startingSlide: 0,

    Определяет индекс первого слайда, по умолчанию отсчёт начинается с нулевого.

    sync: 1,

    Команда устанавливает переход слайдов. Чтобы переход был одновременным, измените значение на true. Для многих эффектов команда является плавностью перехода.

    timeout: 4000,

    Задержка для автоматической смены слайдов в миллисекундах. Изменяйте время задержки числовым значением.

    timeoutFn: null,

    Возможность использования функций обратного вызова для значения послайдово. Применяемые функции:
    function(currSlideElement, nextSlideElement, options, forwardFlag)

    width: null,

    Команда устанавливает ширину контейнера слайдшоу, актуальность применения команды зависит от значения команды (fit: true,).



    Готовые слайдшоу Cucle

    Будьте внимательны!!! В каждом примере есть скрипт jQuery выделенный красным цветом. Он нужен только для проверки работоспособности кода для установки и испытания с настройками. Устанавливая на свой сайт, если он на uCoz скрипт нужно удалить из кода установки.


    Текстовое слайдшоу Cucle

    В примере показана возможность использования в качестве слайдов текстовые элементы. Этот код из примера можно проверить в редакторе или установить себе. Если будете устанавливать на свой сайт не забудьте удалить скрипт библиотеки jQuery выделенный красным цветом, если она у Вас подключена.



    <script type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="//delaisait.ucoz.ru/jquery/slideshow/cucle/js/jquery.cycle.all.min.js"></script>
    <style type="text/css">
    @import url("//delaisait.ucoz.ru/jquery/slideshow/cucle/css/text-effect-cucle.css");
    </style>
    <div id="block-cucle">
    <a id="prev" href="#" title="Назад">&laquo;&laquo;</a> <a id="next" href="#" title="Вперёд">&raquo;&raquo;</a>
    <div id="block-text-cucle">
    <div class="text-cucle">
    <p><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image1.jpg" width="230" height="150" alt="Девушка эльф в слайдшоу Cucle" />В текстовом слайдшоу применено изображение девушки эльфа из коллекции "Девушки Фэнтези"</p> <p>Большая коллекция подобных изображений находится <a href="//img-fantasygirl.ucoz.ru/" title="Девушки эльфы для слайдшоу" target="_blank">здесь</a>.</p>
    </div>
    <div class="text-cucle">
    <p><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image2.jpg" width="230" height="150" alt="Девушка фентези в слайдшоу Cucle" />Как видите текстовое слайдшоу может кроме картинки дополняться текстом.</p>
    <p>Смотрите коллекцию подобных изображений для слайдшоу <a href="//img-fantasygirl.ucoz.ru/" title="Девушки Фэнтези для слайдшоу" target="_blank">здесь</a>.</p>
    </div>
    <div class="text-cucle">
    <p>Разумеется можно использовать только один текст, без применения изображений.</p>
    <p>Слайдшоу Cucle настраивается на любой вкус и цвет.</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#block-text-cucle').cycle({
    fx: 'fade',
    prev: '#prev',
    next: '#next',
    height: 250,
    timeout: 0
    });
    });
    </script>



    Текстовое слайдшоу Cucle в работе



    Слайдшоу Cucle с кнопками

    При наведении на слайды появляются кнопки навигации, в качестве примера. Этот код из примера Вы можете проверить в редакторе или установить себе. Если будете устанавливать на свой сайт не забудьте удалить скрипт библиотеки jQuery выделенный красным цветом, если она у Вас подключена.



    <script type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="//delaisait.ucoz.ru/jquery/slideshow/cucle/js/jquery.cycle.all.min.js"></script>
    <style type="text/css">
    @import url("//delaisait.ucoz.ru/jquery/slideshow/cucle/css/text-effect-cucle.css");
    </style>
    <div id="slideshow">
    <ul id="nav">
    <li id="prev"><a href="#"></a></li>
    <li id="next"><a href="#"></a></li>
    </ul>
    <ul id="cucle-up">
    <li><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image1.jpg" alt="Слайдшоу Cucle 1" /></li>
    <li><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image2.jpg" alt="Слайдшоу Cucle 2" /></li>
    <li><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image3.jpg" alt="Слайдшоу Cucle 3" /></li>
    <li><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image4.jpg" alt="Слайдшоу Cucle 4" /></li>
    <li><img src="//delaisait.ucoz.ru/jquery/slideshow/cucle/img/circle-image5.jpg" alt="Слайдшоу Cucle 5" /></li>
    </ul>
    </div>
    <script>
    $(document).ready(function() {
    $("#slideshow").css("overflow", "hidden");
    $("ul#cucle-up").cycle({
    fx: 'fade',
    pause: 1,
    prev: '#prev',
    next: '#next'
    });
    $("#slideshow").hover(function() {
    $("ul#nav").fadeIn();
    },
    function() {
    $("ul#nav").fadeOut();
    });
    });
    </script>



    Слайдшоу Cucle с кнопками в работе



    Редактор HTML для проверки примеров

    Вставьте код примера для установки в HTML редактор и проверьте.









    Русские шрифты



    Ссылка:
    BB code:




  • ©
  • | Просмотров: 3006 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: jquery, SlideShow, Для сайта, uCoz, слайдшоу, Cycle

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]