├── README.md ├── css └── craftyslide.css ├── demo.html ├── images └── pagination.png ├── js ├── craftyslide.js └── craftyslide.min.js └── license.txt /README.md: -------------------------------------------------------------------------------- 1 | Craftyslide - A tiny jQuery slideshow plugin 2 | ============================================ 3 | 4 | About 5 | ----- 6 | 7 | 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. 8 | 9 | Usage 10 | ----- 11 | 12 | HTML 13 | 14 |
15 | 28 |
29 | 30 | Simply create a div which houses a ul containing your list of images (add an optional title to create captions), then include the supplied JS/CSS files. That's all there is to it! 31 | 32 | Scripts: 33 | 34 | 35 | 36 | 37 | Basic Initialization: 38 | 39 | 42 | 43 | Options 44 | ------- 45 | 46 | 47 | ### width (number) 48 | 49 | Set a custom width for your slideshow. 50 | 51 | ### height (number) 52 | 53 | Set a custom height for your slideshow 54 | 55 | ### pagination (true/false) 56 | 57 | Select whether to display pagination or not. Setting to false hides pagination and enables auto mode. 58 | 59 | ### fadetime (number) 60 | 61 | Define the fade animation speed of slides. 62 | 63 | ### delay (number) 64 | 65 | Used during auto mode (pagination set to false). Defines the delay between each slide being shown. 66 | 67 | ### Options example: 68 | 69 | $("#slideshow").craftyslide({ 70 | 'width': 640, 71 | 'height': 400, 72 | 'pagination': false, 73 | 'fadetime': 500, 74 | 'delay': 2500 75 | }); 76 | 77 | 78 | License 79 | ------- 80 | 81 | Copyright (c) 2011 Crafted Pixelz 82 | Licensed under the MIT license -------------------------------------------------------------------------------- /css/craftyslide.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Craftyslide CSS Styles 4 | 5 | */ 6 | 7 | #slideshow { 8 | margin:0; 9 | padding:0; 10 | position:relative; 11 | border:15px solid #fff; 12 | -webkit-box-shadow:0 3px 5px #999; 13 | -moz-box-shadow:0 3px 5px #999; 14 | box-shadow:0 3px 5px #999; 15 | } 16 | 17 | #slideshow ul { 18 | position:relative; 19 | overflow:hidden; 20 | margin:0; 21 | padding:0; 22 | } 23 | 24 | #slideshow ul li { 25 | position:absolute; 26 | top:0; 27 | left:0; 28 | margin:0; 29 | padding:0; 30 | list-style:none; 31 | } 32 | 33 | #pagination { 34 | clear:both; 35 | width:75px; 36 | margin:25px auto 0; 37 | padding:0; 38 | } 39 | 40 | #pagination li { 41 | list-style:none; 42 | float:left; 43 | margin:0 2px; 44 | } 45 | 46 | #pagination li a { 47 | display:block; 48 | width:10px; 49 | height:10px; 50 | text-indent:-10000px; 51 | background:url(../images/pagination.png); 52 | } 53 | 54 | #pagination li a.active { 55 | background-position:0 10px; 56 | } 57 | 58 | .caption { 59 | width:100%; 60 | margin:0; 61 | padding:10px; 62 | position:absolute; 63 | left:0; 64 | font-family:Helvetica, Arial, sans-serif; 65 | font-size:14px; 66 | font-weight:lighter; 67 | color:#fff; 68 | border-top:1px solid #000; 69 | background:rgba(0,0,0,0.6); 70 | } -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Craftyslide - A tiny jQuery slideshow plugin 8 | 9 | 10 | 11 | 12 | 13 |
14 | 35 |
36 | 37 | 38 | 39 | 40 | 43 | 44 | -------------------------------------------------------------------------------- /images/pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craftedpixelz/Craftyslide/4cd0adb9271a67fd9242be0a93099d5cd53c7430/images/pagination.png -------------------------------------------------------------------------------- /js/craftyslide.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Craftyslide 3 | * Created by: Abid Din - http://craftedpixelz.co.uk 4 | * Version: 1.0 5 | * Copyright: Crafted Pixelz 6 | * License: MIT license 7 | * Updated: 7th June 2011 8 | */ 9 | 10 | (function ($) { 11 | $.fn.craftyslide = function (options) { 12 | 13 | // Defaults 14 | var defaults = { 15 | "width": 600, 16 | "height": 300, 17 | "pagination": true, 18 | "fadetime": 350, 19 | "delay": 5000 20 | }; 21 | 22 | var options = $.extend(defaults, options); 23 | 24 | return this.each(function () { 25 | 26 | // Vars 27 | var $this = $(this); 28 | var $slides = $this.find("ul li"); 29 | 30 | $slides.not(':first').hide(); 31 | 32 | // Pagination 33 | function paginate() { 34 | $this.append("
    "); 35 | 36 | var i = 1; 37 | $slides.each(function () { 38 | $(this).attr("id", "slide" + i); 39 | $("#pagination").append("
  1. " + i + "
    2. "); 40 | i++; 41 | }); 42 | 43 | $("#pagination li a:first").addClass("active"); 44 | } 45 | 46 | // Add captions 47 | function captions() { 48 | $slides.each(function () { 49 | $caption = $(this).find("img").attr("title"); 50 | if ($caption !== undefined) { 51 | $(this).prepend("

    " + $caption + "

    "); 52 | } 53 | $slides.filter(":first").find(".caption").css("bottom", 0); 54 | }); 55 | } 56 | 57 | // Manual mode 58 | function manual() { 59 | var $pagination = $("#pagination li a"); 60 | $pagination.click(function (e) { 61 | e.preventDefault(); 62 | var $current = $(this.hash); 63 | if ($current.is(":hidden")) { 64 | $slides.fadeOut(options.fadetime); 65 | $current.fadeIn(options.fadetime); 66 | $pagination.removeClass("active"); 67 | $(this).addClass("active"); 68 | $(".caption").css("bottom", "-37px"); 69 | $current.find(".caption").delay(300).animate({ 70 | bottom: 0 71 | }, 300); 72 | } 73 | }); 74 | } 75 | 76 | // Auto mode 77 | function auto() { 78 | setInterval(function () { 79 | $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul"); 80 | 81 | $slides.each(function () { 82 | if ($slides.is(":visible")) { 83 | $(".caption").css("bottom", "-37px"); 84 | $(this).find(".caption").delay(300).animate({ 85 | bottom: 0 86 | }, 300); 87 | } 88 | }); 89 | 90 | }, options.delay); 91 | } 92 | 93 | // Width 94 | $this.width(options.width); 95 | $this.find("ul, li img").width(options.width); 96 | 97 | // Height 98 | $this.height(options.height); 99 | $this.find("ul, li").height(options.height); 100 | 101 | // Check Boolean values 102 | if (options.pagination === true) { 103 | paginate(); 104 | } else { 105 | auto(); 106 | } 107 | 108 | captions(); manual(); 109 | 110 | }); 111 | }; 112 | })(jQuery); -------------------------------------------------------------------------------- /js/craftyslide.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Craftyslide 3 | * Created by: Abid Din - http://craftedpixelz.co.uk 4 | * Version: 1.0 5 | * Copyright: Crafted Pixelz 6 | * License: MIT license 7 | * Updated: 7th June 2011 8 | */ 9 | 10 | (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("
      ");var i=1;$slides.each(function(){$(this).attr("id","slide"+i);$("#pagination").append("
    1. "+i+"
      2. ");i++;});$("#pagination li a:first").addClass("active");}function captions(){$slides.each(function(){$caption=$(this).find("img").attr("title");if($caption!==undefined){$(this).prepend("

      "+$caption+"

      ");}$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); -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Crafted Pixelz, http://craftedpixelz.co.uk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. --------------------------------------------------------------------------------