Posted by : Magnus Thursday, 14 June 2012


Craftyslide:  tiny slideshow built on jQuery
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.
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.

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

1
2
3
4
5
6
7
8
<!-- CSS -->
<link rel="stylesheet" href="css/craftyslide.css" />
 
<!-- jQuery Library -->
 
<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>

Basic initialization

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

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Popular Post

Labels

Freebies (114) Inspiration (51) Tutorials (49) CSS (44) jQuery (41) HTML (39) Design (36) Graphics (34) Photoshop (30) JavaScript (16) Typography (12) WordPress (12) Fonts (9) Plugin (9) Icons (8) Coding (7) IOS (6) iPhone (5) Premium (4) Adobe (2) Illustrator (2) Infographics (2) Logos (2) 3D (1) Ads (1) Android (1) Apps (1) Fireworks (1) Lego (1) Mobile (1) PHP (1) Photo (1) Tumblr (1)

- Copyright © Bjonk Design -