Craftyslide

Craftyslide - маленькое слайдшоу (только 2kb), построенное на jQuery. Назначение Craftyslide - обеспечивать простой, без рюшечек, вывод изображений. Поэтому получился маленький, простой и эффективный плагин.

Использование

HTML:

<div id="slideshow">
  <ul>
    <li>
      <img src="image1.jpg" title="Lorem ipsum dolor sit amet" />
    </li>
    
    <li>
      <img src="image2.jpg" title="Lorem ipsum dolor sit amet" />
    </li>
    
    <li>           
      <img src="image3.jpg" title="Lorem ipsum dolor sit amet" />
    </li>	                         
  </ul>
</div>

Использовать Craftyslide очень просто: создаем элемент div, который содержит элемент ul со списком изображений (смотрите приведнный выше код). Используйте атрибут title, если вы хотите выводить подписи к изображениям.

Используемые файлы:

<!-- CSS -->
<link rel="stylesheet" href="css/craftyslide.css" />

<!-- Бибилиотека jQuery -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<!-- Плагин Craftyslide -->
<script src="js/craftyslide.js"></script>

Инициализация плагина:

<script>
  $("#slideshow").craftyslide();
</script>

Показать CSS

#slideshow {
	margin:0;
	padding:0;
	position:relative;
	border:15px solid #fff;
	-webkit-box-shadow:0 3px 5px #999;
	-moz-box-shadow:0 3px 5px #999;
	box-shadow:0 3px 5px #999;
}

#slideshow ul {
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
}

#slideshow ul li {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	list-style:none;
}

#pagination {
	clear:both;
	width:75px;
	margin:25px auto 0;
	padding:0;
}

#pagination li {
	list-style:none;
	float:left;
	margin:0 2px;
}

#pagination li a {
	display:block;
	width:10px;
	height:10px;
	text-indent:-10000px;
	background:url(../images/pagination.png);
}

#pagination li a.active {
	background-position:0 10px;
}

.caption {
	width:100%;
	margin:0;
	padding:10px;
	position:absolute;
	left:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:lighter;
	color:#fff;
	border-top:1px solid #000;
	background:#000;
	background:rgba(0,0,0,0.6);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}

Показать jQuery

/*
* Craftyslide
* Автор: Abid Din - http://craftedpixelz.co.uk
* Версия: 1.0
* Права: Crafted Pixelz
* Лицензия: MIT
* Обновлено: 07 июня 2011
*/

(function ($) {
    $.fn.craftyslide = function (options) {

        // Значения по умолчанию
        var defaults = {
            "width": 600,
            "height": 300,
            "pagination": true,
            "fadetime": 350,
            "delay": 5000
        };

        var options = $.extend(defaults, options);

        return this.each(function () {

            // Переменные
            var $this = $(this);
            var $slides = $this.find("ul li");

            $slides.not(':first').hide();

            // Страницы
            function paginate() {
                $this.append("<ol id='pagination' />");
                
                var i = 1;
                $slides.each(function () {
                    $(this).attr("id", "slide" + i);
                    $("#pagination")
                    .append("<li><a href='#slide" + i + "'>" + i + "</a></li>");
                    i++;
                });
                
                $("#pagination li a:first").addClass("active");
            }

            // Добавляем подписи
            function captions() {
                $slides.each(function () {
                    $caption = $(this).find("img").attr("title");
                    if ($caption !== undefined) {
                        $(this).prepend("<p class='caption'>" + $caption + "</p>");
                    }
                    $slides.filter(":first").find(".caption").css("bottom", 0);
                });
            }

            // Ручной режим
            function manual() {
                var $pagination = $("#pagination li a");
                $pagination.click(function (e) {
                    e.preventDefault();
                    var $current = $(this.hash);
                    if ($current.is(":hidden")) {
                        $slides.fadeOut(options.fadetime);
                        $current.fadeIn(options.fadetime);
                        $pagination.removeClass("active");
                        $(this).addClass("active");
                        $(".caption").css("bottom", "-37px");
                        $current.find(".caption").delay(300).animate({
                            bottom: 0
                        }, 300);
                    }
                });
            }

            // Автоматический режим
            function auto() {
                setInterval(function () {
                    $slides.filter(":first-child")
                    .fadeOut(options.fadetime)
                    .next("li")
                    .fadeIn(options.fadetime)
                    .end()
                    .appendTo("#slideshow ul");

                    $slides.each(function () {
                        if ($slides.is(":visible")) {
                            $(".caption").css("bottom", "-37px");
                            $(this).find(".caption").delay(300).animate({
                                bottom: 0
                            }, 300);
                        }
                    });

                }, options.delay);
            }

            // Ширина
            $this.width(options.width);
            $this.find("ul, li img").width(options.width);

            // Высота
            $this.height(options.height);
            $this.find("ul, li").height(options.height);

            // Проверка 
            if (options.pagination === true) {
                paginate();
            } else {
                auto();
            }

            captions(); manual();

        });
    };
})(jQuery);

Опции

width (число)

Задает ширину слайдшоу.

height (число)

Задает высоту слайдшоу.

pagination (true/false)

Определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.

fadetime (число)

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

delay (число)

Используется в автоматическом режиме(при значении опции pagination false). Определяет время показа слайда.

Пример использования опций

При вызове плагина задаем опции:

$("#slideshow").craftyslide({
  'width': 640,
  'height': 400,
  'pagination': false,
  'fadetime': 500,
  'delay': 2500
});