Skip to content

Commit b021b9b

Browse files
craftedpixelzcraftedpixelz
committed
Added source files to repository
1 parent aeb5957 commit b021b9b

File tree

5 files changed

+240
-0
lines changed

5 files changed

+240
-0
lines changed

‎css/craftyslide.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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:100px;
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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>Craftyslide - A tiny jQuery slideshow plugin</title>
8+
9+
<link rel="stylesheet" href="css/craftyslide.css" />
10+
</head>
11+
12+
<body>
13+
<div id="slideshow">
14+
<ul>
15+
<li>
16+
<img src="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt="" title="Light Trails" />
17+
</li>
18+
19+
<li>
20+
<img src="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt="" title="Bokeh" />
21+
</li>
22+
23+
<li>
24+
<img src="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt="" title="Blossoms" />
25+
</li>
26+
27+
<li>
28+
<img src="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt="" title="Funky Painting" />
29+
</li>
30+
31+
<li>
32+
<img src="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt="" title="Chandelier" />
33+
</li>
34+
</ul>
35+
</div>
36+
37+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
38+
<script src="js/craftyslide.min.js"></script>
39+
40+
<script>
41+
$("#slideshow").craftyslide();
42+
</script>
43+
</body>
44+
</html>

‎images/pagination.png

1.39 KB
Loading

‎js/craftyslide.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/*
2+
* Crafty Slide
3+
* Created by: Abid Din - http://craftedpixelz.co.uk
4+
* Version: 1.0
5+
* License: Creative Commons Share Alike 3.0
6+
* Updated: 4th June 2011
7+
*/
8+
9+
(function ($) {
10+
$.fn.craftyslide = function (options) {
11+
12+
// Defaults
13+
var defaults = {
14+
"width": 600,
15+
"height": 300,
16+
"pagination": true,
17+
"fadetime": 350,
18+
"delay": 5000
19+
};
20+
21+
var options = $.extend(defaults, options);
22+
23+
return this.each(function () {
24+
25+
// Vars
26+
var $this = $(this);
27+
var $slides = $this.find("ul li");
28+
29+
$slides.not(':first').hide();
30+
31+
// Pagination
32+
function paginate() {
33+
$this.append("<ol id='pagination' />");
34+
35+
i = 1;
36+
$slides.each(function () {
37+
$(this).attr("id", "slide" + i);
38+
$("#pagination").append("<li><a href='#slide" + i + "'>" + i + "</a></li>");
39+
i++;
40+
});
41+
42+
$("#pagination li a:first").addClass("active");
43+
}
44+
45+
// Add captions
46+
function captions() {
47+
$slides.each(function () {
48+
$caption = $(this).find("img").attr("title");
49+
if ($caption !== undefined) {
50+
$(this).prepend("<p class='caption'>" + $caption + "</p>");
51+
}
52+
$slides.filter(":first").find(".caption").css("bottom", 0);
53+
});
54+
}
55+
56+
// Manual mode
57+
function manual() {
58+
var $pagination = $("#pagination li a");
59+
$pagination.click(function (e) {
60+
e.preventDefault();
61+
var $current = $(this.hash);
62+
if ($current.is(":hidden")) {
63+
$slides.fadeOut(options.fadetime);
64+
$current.fadeIn(options.fadetime);
65+
$pagination.removeClass("active");
66+
$(this).addClass("active");
67+
$(".caption").css("bottom", "-37px");
68+
$current.find(".caption").delay(300).animate({
69+
bottom: 0
70+
}, 300);
71+
}
72+
});
73+
}
74+
75+
// Auto mode
76+
function auto() {
77+
setInterval(function () {
78+
$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");
79+
80+
$slides.each(function () {
81+
if ($slides.is(":visible")) {
82+
$(".caption").css("bottom", "-37px");
83+
$(this).find(".caption").delay(300).animate({
84+
bottom: 0
85+
}, 300);
86+
}
87+
});
88+
89+
}, options.delay);
90+
}
91+
92+
// Width
93+
$this.width(options.width);
94+
$this.find("ul, li img").width(options.width);
95+
96+
// Height
97+
$this.height(options.height);
98+
$this.find("ul, li").height(options.height);
99+
100+
// Check Boolean values
101+
if (options.pagination === true) {
102+
paginate();
103+
} else {
104+
auto();
105+
}
106+
107+
captions(); manual();
108+
109+
});
110+
};
111+
})(jQuery);

‎js/craftyslide.min.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)