04.06.2011 3 662 Скрипты / Slider

Awkward Showcase - плагин слайдшоу

Ещё один плагин слайдшоу, однако его возможности не ограничиваются простым перелистыванием контента. Можно добавить всплывающие подсказки с текстом или миниатюрами изображений, активировать динамически высоту и многое другое.
Некоторые свойства плагина:

Совместимость со всеми основными браузерами.
Расширенные возможности позиционирования
Определенное положение подсказок на основе X и Y-координат.
Включение миниатюр, как горизонтально, так и вертикально.
Различные режимы просмотра.
Динамическое изменение высоты в зависимости от контента.
Простота реализации и настройки CSS.
Слайды могут показывать любой тип HTML элементов.

HTML

<div id="showcase" class="showcase">
    <!-- Идентифицируем  слайдер #showcase в div -->
    <div class="showcase-slide">
        <!-- Помещаем содержимое слайда в div с классом .showcase-content -->
        <div class="showcase-content">
            <!-- Если слайд содержит несколько элементов, то их можно поместить в div с классом
            .showcase-content-wrapper. Но лучше использовать только один элемент - просто так смотрится лучше. -->
            <div class="showcase-content-wrapper">
                <img src="images/01.jpg" alt="01" />
            </div>
        </div>
        <!--Помещаем описание контента в div с классом .showcase-caption -->
        <div class="showcase-caption">
            Описание
        </div>
        <!-- Помещаем подсказки в div с классом .showcase-tooltips. -->
            <div class="showcase-tooltips">
                <!-- Каждый якорь в .showcase-tooltips представляет собой подсказку. Атрибут coords определяет позицию подсказки по координатам -->
                <a href="#" coords="356,50">
                    <!-- Содержание тега-якорь показывается в подсказке. -->
                    Мачта
                </a>
                <a href="#" coords="240,420">
                    Норвежский фрегат «Sorlandet» был построен в 1927 году. 
                </a>
                <a href="#" coords="420, 420">
                    <!-- Можно добавить много таких тегов-якорей, чтобы они отображались ввиде подсказок. -->
                    <img src="images/sorlandet.jpg" />
                    <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
                        Палуба
                    </span>
                </a>
            </div>
    </div>
    <div class="showcase-slide">
        <div class="showcase-content">
            <div class="showcase-content-wrapper">
                Контент...
            </div>
        </div>
    </div>
</div>

CSS

Основные классы стилей, впрочем наглядней смотреть в демо:

#awOnePageButton .view-slide {
  display: none;
}
/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load {
  height: 470px;
  /* Same as showcase jаvascript option */
  overflow: hidden;
}
/* Container when content is shown as one page */
.showcase-onepage {
}
/* Container when content is shown in slider */
.showcase {
  position: relative;
  margin: auto;
}
.showcase-content-container {
  background-color: #000;
}
/* Navigation arrows */
.showcase-arrow-previous, .showcase-arrow-next {
  position: absolute;
  background: url('/images/arrows.png');
  width: 33px;
  height: 33px;
  top: 220px;
  cursor: pointer;
}
.showcase-arrow-previous {
  left: -60px;
}
.showcase-arrow-previous:hover {
  background-position: 0px -34px;
}
.showcase-arrow-next {
  right: -56px;
  background-position: -34px 0;
}
.showcase-arrow-next:hover {
  background-position: -34px -34px;
}
/* Content */
.showcase-content {
  background-color: #000;
  text-align: center;
}
.showcase-content-wrapper {
  text-align: center;
  height: 470px;
  width: 700px;
  display: table-cell;
  vertical-align: middle;
}
/* Styling the tooltips */
.showcase-plus-anchor {
  background-image: url('/images/plus.png');
  background-repeat: no-repeat;
}
.showcase-plus-anchor:hover {
  background-position: -32px 0;
}
div.showcase-tooltip {
  background-color: #fff;
  color: #000;
  text-align: left;
  padding: 5px 8px;
  background-image: url(/images/white-opacity-80.png);
}
/* Styling the caption */
.showcase-caption {
  color: #000;
  padding: 8px 15px;
  text-align: left;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: none;
  background-image: url(/images/white-opacity-80.png);
}
.showcase-onepage .showcase-content {
  margin-bottom: 10px;
}
/* Button Wrapper */
.showcase-button-wrapper {
  clear: both;
  margin-top: 10px;
  text-align: center;
}
.showcase-button-wrapper span {
  margin-right: 3px;
  padding: 2px 5px 0px 5px;
  cursor: pointer;
  font-size: 12px;
  color: #444444;
}
.showcase-button-wrapper span.active {
  color: #fff;
}
/* Thumbnails */
.showcase-thumbnail-container
/* Used for backgrounds, no other styling!!! */
{
  background-color: #000;
}
.showcase-thumbnail-wrapper {
  overflow: hidden;
}
.showcase-thumbnail {
  width: 120px;
  height: 90px;
  cursor: pointer;
  border: solid 1px #333;
  position: relative;
}
.showcase-thumbnail-caption {
  position: absolute;
  bottom: 2px;
  padding-left: 10px;
  padding-bottom: 5px;
}
.showcase-thumbnail-content {
  padding: 10px;
  text-align: center;
  padding-top: 25px;
}
.showcase-thumbnail-cover {
  background-image: url(/images/black-opacity-40.png);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.showcase-thumbnail:hover {
  border: solid 1px #999;
}
.showcase-thumbnail:hover .showcase-thumbnail-cover {
  display: none;
}
.showcase-thumbnail.active {
  border: solid 1px #999;
}
.showcase-thumbnail.active .showcase-thumbnail-cover {
  display: none;
}
.showcase-thumbnail-wrapper-horizontal {
  padding: 10px;
}
.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail {
  margin-right: 10px;
  width: 116px;
}
.showcase-thumbnail-wrapper-vertical {
  padding: 10px;
}
.showcase-thumbnail-wrapper-vertical .showcase-thumbnail {
  margin-bottom: 10px;
}
.showcase-thumbnail-button-backward, .showcase-thumbnail-button-forward {
  padding: 7px;
  cursor: pointer;
}
.showcase-thumbnail-button-backward {
  padding-bottom: 0px;
  padding-right: 0px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal {
  background-image: url(/images/arrows-small.png);
  background-repeat: no-repeat;
  display: block;
  width: 17px;
  height: 17px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical {
  background-position: 0 -51px;
  margin-left: 55px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical {
  background-position: -17px -51px;
}
.showcase-thumbnail-button-forward .showcase-thumbnail-vertical {
  background-position: 0 -34px;
  margin-left: 55px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical {
  background-position: -17px -34px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal {
  background-position: 0 -17px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal {
  background-position: -17px -17px;
}
.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal {
  background-position: 0 0;
  margin-top: 40px;
  margin-bottom: 40px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal {
  background-position: -17px 0;
}
/* Hide button text */
.showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span {
  display: none;
}

JS

Подключаем jQuery и плагин:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="jquery.aw-showcase.min.js"></script>

Инициализируем плагин:

<script type="text/jаvascript">
$(document).ready(function()
{
    $("#showcase").awShowcase(
    {
        content_width:  700,
        content_height: 470
    });
});
</script>

Настройки

content_width (default: 700)
content_height (default: 400)
hundred_percent (default: false)
auto (default: false)
interval (default: 3000)
continuous (default: false)
loading (default: true)
tooltip_width (default: 200)
tooltip_icon_width (default: 32)
tooltip_icon_height (default :32)
tooltip_offsetx (default: 18)
tooltip_offsety (default: 0)
arrows (default: true)
buttons (default: true)
btn_numbers (default: false)
keybord_keys (default: false)
mousetrace (default: false)
pauseonover (default: true)
transition: (default: ‘vslide’) (options: ‘vslide’, ‘hslide’ или ‘fade’)
transition_delay: (default: 300)
transition_speed: (default: 500)
show_caption: (default: ‘onload’) (options: ‘onload’, ‘onhover’ или ‘show’)
thumbnails: (default: false)
thumbnails_position: (default: ‘outside-last’) (options: ‘outside-last’, ‘outside-first’, ‘inside-last’ или ‘inside-first’)
thumbnails_direction: (default: ‘vertical’) (options: ‘vertical’ или ‘horizontal’)
thumbnails_slidex: (default: 0) (options: 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc.)
dynamic_height: (default: false)
speed_change: (default: false)
viewline: (default: false)

Скачать 1052Загрузок 629,32 Kb

Демо

Ссылки

Awkward Showcase - плагин слайдшоу

HTML

CSS

JS

Настройки

Комментарии

Похожие статьи