Permalink
Browse files

Added source files to repository

  • Loading branch information...
1 parent aeb5957 commit b021b9b6d038a02c477f742df69cf75502b7022b @craftedpixelz committed Jun 4, 2011
Showing with 240 additions and 0 deletions.
  1. +70 −0 css/craftyslide.css
  2. +44 −0 demo.html
  3. BIN images/pagination.png
  4. +111 −0 js/craftyslide.js
  5. +15 −0 js/craftyslide.min.js
View
@@ -0,0 +1,70 @@
+/*
+
+Craftyslide CSS Styles
+
+*/
+
+#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:100px;
+ 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:rgba(0,0,0,0.6);
+}
View
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>Craftyslide - A tiny jQuery slideshow plugin</title>
+
+ <link rel="stylesheet" href="css/craftyslide.css" />
+ </head>
+
+ <body>
+ <div id="slideshow">
+ <ul>
+ <li>
+ <img src="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt="" title="Light Trails" />
+ </li>
+
+ <li>
+ <img src="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt="" title="Bokeh" />
+ </li>
+
+ <li>
+ <img src="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt="" title="Blossoms" />
+ </li>
+
+ <li>
+ <img src="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt="" title="Funky Painting" />
+ </li>
+
+ <li>
+ <img src="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt="" title="Chandelier" />
+ </li>
+ </ul>
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script src="js/craftyslide.min.js"></script>
+
+ <script>
+ $("#slideshow").craftyslide();
+ </script>
+ </body>
+</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,111 @@
+/*
+* Crafty Slide
+* Created by: Abid Din - http://craftedpixelz.co.uk
+* Version: 1.0
+* License: Creative Commons Share Alike 3.0
+* Updated: 4th 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' />");
+
+ 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);
View
Oops, something went wrong.

0 comments on commit b021b9b

Please sign in to comment.