Tweet
Fork me on Github

Craftyslide

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

Why Craftyslide?

Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. I found many slideshow plugins too bloated for my needs and code supplied was often superfluous and non-semantic. This prompted me to go about writing my own plugin, with the result being Craftyslide.

Usage

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>

Using Craftyslide on your site is easy. Simply create a div which houses a ul containing your list of images (see above). Give your images a title if you want to create captions, then include the supplied JS/CSS/Image files. That's all there is to it!

Files to include:

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

<!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>

Basic initialization:

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

Show 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);
}

Show jQuery

/*
* Craftyslide
* Created by: Abid Din - http://craftedpixelz.co.uk
* Version: 1.0
* Copyright: Crafted Pixelz
* License: MIT license
* Updated: 7th June 2011
*/

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

        // Defaults
        var defaults = {
            "width": 600,
            "height": 300,
            "pagination": true,
            "fadetime": 350,
            "delay": 5000
        };

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

        return this.each(function () {

            // Vars
            var $this = $(this);
            var $slides = $this.find("ul li");

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

            // Pagination
            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");
            }

            // Add captions
            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);
                });
            }

            // Manual mode
            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);
                    }
                });
            }

            // Auto mode
            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);
            }

            // Width
            $this.width(options.width);
            $this.find("ul, li img").width(options.width);

            // Height
            $this.height(options.height);
            $this.find("ul, li").height(options.height);

            // Check Boolean values
            if (options.pagination === true) {
                paginate();
            } else {
                auto();
            }

            captions(); manual();

        });
    };
})(jQuery);

Options

width (number)

Set a custom width for your slideshow.

height (number)

Set a custom height for your slideshow

pagination (true/false)

Select whether to display pagination or not. Setting to false hides pagination and enables auto mode.

fadetime (number)

Define the fade animation speed of slides.

delay (number)

Used during auto mode (pagination set to false). Defines the delay between each slide being shown.

Options example:

Example showing multiple options

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