Skip to content

Commit

Permalink
Edited README via GitHub
Browse files Browse the repository at this point in the history
  • Loading branch information
craftedpixelz committed Jun 5, 2011
1 parent b021b9b commit 0a4f47c
Showing 1 changed file with 120 additions and 0 deletions.
120 changes: 120 additions & 0 deletions README
@@ -0,0 +1,120 @@
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.

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>

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

jQuery:

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

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:

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

0 comments on commit 0a4f47c

Please sign in to comment.