Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

simplified examples and instructions

  • Loading branch information...
commit f2d90b566a58f94f03f5009ad0cb4688634ed7bd 1 parent 628a1ea
Eric M. Suzanne authored
128 README.mkdn
Source Rendered
@@ -14,10 +14,14 @@ From the command line:
14 14
15 15 sudo gem install css-slideshow
16 16
17   -Add to a project (rails: compass.config, other: config.rb):
18   -
  17 +Add to a project:
  18 +
  19 + // rails: compass.config, other: config.rb
19 20 require 'css-slideshow'
20 21
  22 + // command line
  23 + compass install css-slideshow
  24 +
21 25 Or create a new project:
22 26
23 27 compass -r css-slideshow -f css-slideshow project_directory
@@ -26,81 +30,63 @@ Or create a new project:
26 30 Slideshows
27 31 ==========
28 32
29   -Your HTML:
30   -
31   - <div class="slideshow">
32   - <div class="slides">
33   - <ul>
34   -
35   - <!-- start slide 1 -->
36   - <li id="slide-title-1">
37   - <!-- slide content can be anything you like -->
38   - <div class="content">
39   - <h2>Slide one</h2>
40   - <p><a href="#slide-title-2">NEXT</a></p>
41   - <p>
42   - Decima eodem modo typi qui nunc nobis videntur fiant sollemnes
43   - in. Quam nunc putamus parum claram anteposuerit litterarum
44   - formas humanitatis per seacula quarta decima et quinta!
45   - Eleifend option congue.
46   - </p>
47   - </div>
48   - </li>
49   - <!-- end slide 1 -->
50   -
51   - <!-- start slide 2 -->
52   - <li id="slide-title-2">
53   - <!-- slide content can be anything you like -->
54   - <div class="content">
55   - <h2>Slide Two</h2>
56   - <p><a href="#slide-title-1">PREV</a></p>
57   - <p>
58   - Dynamicus qui sequitur mutationem consuetudium; est notare quam
59   - littera? Decima eodem modo typi qui nunc nobis videntur parum
60   - clari fiant sollemnes in. Diam nonummy nibh euismod tincidunt ut
61   - laoreet dolore.
62   - </p>
63   - </di>
64   - </li>
65   - <!-- end slide 2 -->
66   -
67   - </ul>
  33 +The CSS-Slideshow works with a combination of internal links, overflow and
  34 +floats.
  35 +
  36 +Each slideshow contains three important elements:
  37 +
  38 + - Container
  39 + - Carousel
  40 + - Slide(s)
  41 +
  42 +You can write the HTML to your liking, but here is one example:
  43 +
  44 + <section class="slideshow"><!-- container -->
  45 + <div><!-- carousel -->
  46 +
  47 + <article id="slide1"> <!-- slide (repeat as needed) -->
  48 + <!-- slide content -->
  49 + </article>
  50 +
68 51 </div>
  52 + </section>
69 53
70   -Everything inside the list-item slides is optional. Your slide navigation can
71   -be anything from next/previous links (as above) to tabs. all that matters is
72   -that they link to the slide IDs.
  54 +To go to a slide, all you need is a link from somewhere else on the page
  55 +that points at that specific slide ID:
73 56
74   -You can change the class of the slide container (.slideshow, .slides) elemtents given:
  57 + <a href="#slide1">a link to the first slide</a>
75 58
76   -* all the elements still exist
77   -* you override the needed variables in your `_slideshow.sass`
  59 +There's only one mixin that you need, and you apply it to your container:
78 60
79   -Your Scss:
80   -
81   - // Override with the proper class names for your slide/slide-nav containers
82   - $slide_container: ".slides";
83   - $max_slides: 10;
  61 + .slideshow {
  62 + @include slideshow;
  63 + }
  64 +
  65 +`slideshow` takes three optional arguments, each with a default that you can
  66 +override globaly for your project.
84 67
85   - // import lightboxes
86   - @import css-slideshow
  68 +* The first argument is a selector for the carousel relative to the container.
  69 + It defaults to `"> div"`.
  70 +* The second is a selector for the slides relative to the carousel. This
  71 + defaults to `"> article"`.
  72 +* The third is the maximum number of slides that a given slideshow needs to
  73 + support. It defaults to 10, but you can set it as high or low as you need.
  74 +
  75 +Use them like so:
87 76
88   - // Make a slideshow
89 77 .slideshow {
90   - @import slideshow;
91   -
92   - // Style the slideshow yourself
93   - #{!slide_container} {
94   - background: #ccc;
95   -
96   - .content {
97   - padding: 1.5em;
98   - }
99   -
100   - h2 {
101   - padding: .75em;
102   - background: #aaa;
103   - }
104   - }
  78 + @include slideshow('> div', '> article', 25);
105 79 }
106   -
  80 +
  81 +
  82 +Available Defaults
  83 +==================
  84 +
  85 + // The selector for your carousel (relative to your container)
  86 + $slide-carousel : "> div";
  87 +
  88 + // The selector for your slides (relative to your carousel)
  89 + $slide : "> article";
  90 +
  91 + // The largest number of slides that this container will need to house
  92 + $max-slides : 10;
1  lib/css-slideshow.rb
... ... @@ -1 +0,0 @@
1   -Compass::Frameworks.register("css-slideshow", :path => "#{File.dirname(__FILE__)}/..")
19 stylesheets/_css-slideshow.scss
... ... @@ -1,14 +1,15 @@
1   -// CSS SLIDESHOWS
2   -// Plugin by Eric Meyer - http://www.oddbird.net/
3   -// Based on the work of Jenna Smith - http://growldesign.co.uk/
  1 +//** CSS SLIDESHOWS **//
4 2
5   -// Compatible with IE6+, Mozilla and Webkit browsers.
6   -// **Not compatible with Opera without Javascript help**
  3 +// Default Settings ----------------------------------------------------------
7 4
8   -// Override with the proper class names for your slide/slide-nav containers
9   -$slide-container: ".slides" !default;
  5 +// The selector for your carousel (relative to your container)
  6 +$slide-carousel : "> div";
10 7
11   -$max-slides: 10 !default;
  8 +// The selector for your slides (relative to your carousel)
  9 +$slide : "> article";
12 10
13   -// import lightboxes
  11 +// The largest number of slides that this container will need to house
  12 +$max-slides : 10;
  13 +
  14 +// Import --------------------------------------------------------------------
14 15 @import "css-slideshow/slideshow";
38 stylesheets/css-slideshow/_slideshow.scss
... ... @@ -1,21 +1,25 @@
1   -// Apply +slideshow to the slideshow container
2   -@mixin slideshow($slides: $slide-container, $count: $max-slides) {
3   - #{$slides} {
4   - width: 100%;
5   - overflow: hidden;
  1 +//** CSS SLIDESHOWS **//
  2 +
  3 +// Apply to the slideshow container
  4 +@mixin slideshow(
  5 + $carousel : $slide-carousel,
  6 + $slide : $slide,
  7 + $count : $max-slides
  8 +) {
  9 + width: 100%;
  10 + overflow: hidden;
  11 +
  12 + #{$carousel} {
  13 + margin: 0;
  14 + padding: 0;
  15 + width: 103% * $count;
  16 + @include no-bullets;
  17 + @include clearfix;
6 18
7   - > ul {
8   - margin: 0;
9   - padding: 0;
10   - width: 103% * $count;
11   - @include no-bullets;
12   - @include clearfix;
13   -
14   - > li {
15   - @include float(left);
16   - width: 100% / (1.03 * $count);
17   - margin-right: .5% / (1.03 * $count);
18   - }
  19 + #{$slide} {
  20 + @include float(left);
  21 + width: 100% / (1.03 * $count);
  22 + margin-right: .5% / (1.03 * $count);
19 23 }
20 24 }
21 25 }
28 templates/project/_slideshow.scss
... ... @@ -1,33 +1,17 @@
1   -// CSS-only Lightboxes
  1 +//** CSS-only Lightboxes **/
2 2 // Plugin by Eric Meyer - http://www.oddbird.net/
3 3 // Based on the work of Jenna Smith - http://growldesign.co.uk/
4 4
5 5 // Compatible with IE6+, Mozilla and Webkit browsers.
6 6 // **Not compatible with Opera without Javascript help**
7 7
8   -// Override with the proper class names for your slide/slide-nav containers
9   -$slide-container: ".slides";
  8 +// Import --------------------------------------------------------------------
10 9
11   -$max-slides: 10;
12   -
13   -// import lightboxes
14 10 @import "css-slideshow";
15 11
16   -// Make a slideshow
  12 +// Slideshows ---------------------------------------------------------------
  13 +
  14 +// Based on our sample HTML template:
17 15 .slideshow {
18   - @include slideshow;
19   -
20   - // Style the slideshow yourself
21   - #{$slide-container} {
22   - background: #cccccc;
23   -
24   - .content {
25   - padding: 1.5em;
26   - }
27   -
28   - h2 {
29   - padding: 0.75em;
30   - background: #aaaaaa;
31   - }
32   - }
  16 + @include slideshow('> div','> article');
33 17 }
46 templates/project/slideshow.html
... ... @@ -1,39 +1,9 @@
1   -<div class="slideshow">
2   - <div class="slides">
3   - <ul>
4   - <!--
5   - EXAMPLE SLIDES
6   - ... the .slideshow and .slides elements are necessary, but can be any HTML elements (e.g. section)
7   - ... the inner UL/LI structure is necessary as is
8   - ... everything inside the LI is optional
9   - -->
10   - <li id="slide1">
11   - <div class="content">
12   - <h2>Slide one</h2>
13   - <p>Decima eodem modo typi qui nunc nobis videntur <a href="#slide2">NEXT</a> fiant sollemnes in. Quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta! Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. In vulputate velit esse molestie consequat vel illum dolore eu feugiat. Praesent luptatum zzril delenit augue duis dolore te.</p>
14   - </div>
15   - </li>
16   - <li id="slide2">
17   - <div class="content">
18   - <h2>Slide Two</h2>
19   - <p>Dynamicus qui sequitur mutationem consuetudium <a href="#slide1">PREV</a>; est notare quam littera? Decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Diam nonummy nibh euismod tincidunt ut laoreet dolore. Adipiscing elit sed magna aliquam erat volutpat ut wisi. In iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod.</p>
20   - </di>
21   - </li>
22   - <!--
23   - END EXAMPLE SLIDES
24   - -->
25   - </ul>
  1 +<section class="slideshow"><!-- container -->
  2 + <div><!-- carousel -->
  3 +
  4 + <article id="slide1"> <!-- slide (repeat as needed) -->
  5 + <!-- slide content -->
  6 + </article>
  7 +
26 8 </div>
27   - <!--
28   - EXAMPLE SLIDE NAV
29   - ... you can set up your slide nav as tabs, or prev/next or any other way you like
30   - ... all that matters is that each nav item links to the proper ID
31   - ... from there you can style them anyway you like and/or add JS for more effect
32   - -->
33   - <div class="slide-nav">
34   - <ul>
35   - <li><a href="#slide1">Slide 1</a></li>
36   - <li><a href="#slide2">Slide 2</a></li>
37   - </ul>
38   - </div><!-- /.slide-nav -->
39   -</div><!-- /.slideshow -->
  9 +</section>

0 comments on commit f2d90b5

Please sign in to comment.
Something went wrong with that request. Please try again.