css-slideshow 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +106 -0
- data/lib/css-slideshow.rb +1 -0
- data/stylesheets/_css-slideshow.scss +14 -0
- data/stylesheets/css-slideshow/_slideshow.scss +21 -0
- data/templates/project/_slideshow.scss +33 -0
- data/templates/project/manifest.rb +16 -0
- data/templates/project/slideshow.html +39 -0
- metadata +82 -0
data/README.mkdn
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
Compass CSS Slideshow
|
|
2
|
+
=====================
|
|
3
|
+
|
|
4
|
+
CSS-only slideshows that work in IE6+, Mozilla and Webkit.
|
|
5
|
+
Requires progressive JS support to work in Opera.
|
|
6
|
+
|
|
7
|
+
Based on the work of [Jenna Smith](http://growldesign.co.uk/)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Installation
|
|
11
|
+
============
|
|
12
|
+
|
|
13
|
+
From the command line:
|
|
14
|
+
|
|
15
|
+
sudo gem install css-slideshow
|
|
16
|
+
|
|
17
|
+
Add to a project (rails: compass.config, other: config.rb):
|
|
18
|
+
|
|
19
|
+
require 'css-slideshow'
|
|
20
|
+
|
|
21
|
+
Or create a new project:
|
|
22
|
+
|
|
23
|
+
compass -r css-slideshow -f css-slideshow project_directory
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
Slideshows
|
|
27
|
+
==========
|
|
28
|
+
|
|
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>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
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.
|
|
73
|
+
|
|
74
|
+
You can change the class of the slide container (.slideshow, .slides) elemtents given:
|
|
75
|
+
|
|
76
|
+
* all the elements still exist
|
|
77
|
+
* you override the needed variables in your `_slideshow.sass`
|
|
78
|
+
|
|
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;
|
|
84
|
+
|
|
85
|
+
// import lightboxes
|
|
86
|
+
@import css-slideshow
|
|
87
|
+
|
|
88
|
+
// Make a slideshow
|
|
89
|
+
.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
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Compass::Frameworks.register("css-slideshow", :path => "#{File.dirname(__FILE__)}/..")
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// CSS SLIDESHOWS
|
|
2
|
+
// Plugin by Eric Meyer - http://www.oddbird.net/
|
|
3
|
+
// Based on the work of Jenna Smith - http://growldesign.co.uk/
|
|
4
|
+
|
|
5
|
+
// Compatible with IE6+, Mozilla and Webkit browsers.
|
|
6
|
+
// **Not compatible with Opera without Javascript help**
|
|
7
|
+
|
|
8
|
+
// Override with the proper class names for your slide/slide-nav containers
|
|
9
|
+
$slide-container: ".slides" !default;
|
|
10
|
+
|
|
11
|
+
$max-slides: 10 !default;
|
|
12
|
+
|
|
13
|
+
// import lightboxes
|
|
14
|
+
@import "css-slideshow/slideshow";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Apply +slideshow to the slideshow container
|
|
2
|
+
@mixin slideshow($slides: $slide-container, $count: $max-slides) {
|
|
3
|
+
#{$slides} {
|
|
4
|
+
width: 100%;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
|
|
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
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// CSS-only Lightboxes
|
|
2
|
+
// Plugin by Eric Meyer - http://www.oddbird.net/
|
|
3
|
+
// Based on the work of Jenna Smith - http://growldesign.co.uk/
|
|
4
|
+
|
|
5
|
+
// Compatible with IE6+, Mozilla and Webkit browsers.
|
|
6
|
+
// **Not compatible with Opera without Javascript help**
|
|
7
|
+
|
|
8
|
+
// Override with the proper class names for your slide/slide-nav containers
|
|
9
|
+
$slide-container: ".slides";
|
|
10
|
+
|
|
11
|
+
$max-slides: 10;
|
|
12
|
+
|
|
13
|
+
// import lightboxes
|
|
14
|
+
@import "css-slideshow";
|
|
15
|
+
|
|
16
|
+
// Make a slideshow
|
|
17
|
+
.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
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Make sure you list all the project template files here in the manifest.
|
|
2
|
+
stylesheet '_slideshow.scss', :media => 'screen, projection'
|
|
3
|
+
html 'slideshow.html'
|
|
4
|
+
|
|
5
|
+
description "a css-only slideshow"
|
|
6
|
+
|
|
7
|
+
help %Q{
|
|
8
|
+
Installs some html and a stylesheet that you can use directly
|
|
9
|
+
or refer to as an example.
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
welcome_message %Q{
|
|
13
|
+
Please refer to the slideshow.html file to see how the markup should be structured.
|
|
14
|
+
And to the slideshow stylesheet partial to see how to use the library and apply it to your markup.
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,39 @@
|
|
|
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>
|
|
26
|
+
</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 -->
|
metadata
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: css-slideshow
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease: false
|
|
5
|
+
segments:
|
|
6
|
+
- 0
|
|
7
|
+
- 2
|
|
8
|
+
- 0
|
|
9
|
+
version: 0.2.0
|
|
10
|
+
platform: ruby
|
|
11
|
+
authors:
|
|
12
|
+
- Eric Meyer
|
|
13
|
+
autorequire:
|
|
14
|
+
bindir: bin
|
|
15
|
+
cert_chain: []
|
|
16
|
+
|
|
17
|
+
date: 2010-04-20 00:00:00 -06:00
|
|
18
|
+
default_executable:
|
|
19
|
+
dependencies:
|
|
20
|
+
- !ruby/object:Gem::Dependency
|
|
21
|
+
name: compass
|
|
22
|
+
prerelease: false
|
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
24
|
+
requirements:
|
|
25
|
+
- - ">="
|
|
26
|
+
- !ruby/object:Gem::Version
|
|
27
|
+
segments:
|
|
28
|
+
- 0
|
|
29
|
+
- 10
|
|
30
|
+
- 0
|
|
31
|
+
- rc3
|
|
32
|
+
version: 0.10.0.rc3
|
|
33
|
+
type: :runtime
|
|
34
|
+
version_requirements: *id001
|
|
35
|
+
description: a css-only slideshow implementation for compass
|
|
36
|
+
email: eric@oddbird.net
|
|
37
|
+
executables: []
|
|
38
|
+
|
|
39
|
+
extensions: []
|
|
40
|
+
|
|
41
|
+
extra_rdoc_files: []
|
|
42
|
+
|
|
43
|
+
files:
|
|
44
|
+
- README.mkdn
|
|
45
|
+
- lib/css-slideshow.rb
|
|
46
|
+
- stylesheets/_css-slideshow.scss
|
|
47
|
+
- stylesheets/css-slideshow/_slideshow.scss
|
|
48
|
+
- templates/project/_slideshow.scss
|
|
49
|
+
- templates/project/manifest.rb
|
|
50
|
+
- templates/project/slideshow.html
|
|
51
|
+
has_rdoc: true
|
|
52
|
+
homepage: http://www.oddbird.net/
|
|
53
|
+
licenses: []
|
|
54
|
+
|
|
55
|
+
post_install_message:
|
|
56
|
+
rdoc_options: []
|
|
57
|
+
|
|
58
|
+
require_paths:
|
|
59
|
+
- lib
|
|
60
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
61
|
+
requirements:
|
|
62
|
+
- - ">="
|
|
63
|
+
- !ruby/object:Gem::Version
|
|
64
|
+
segments:
|
|
65
|
+
- 0
|
|
66
|
+
version: "0"
|
|
67
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
68
|
+
requirements:
|
|
69
|
+
- - ">="
|
|
70
|
+
- !ruby/object:Gem::Version
|
|
71
|
+
segments:
|
|
72
|
+
- 0
|
|
73
|
+
version: "0"
|
|
74
|
+
requirements: []
|
|
75
|
+
|
|
76
|
+
rubyforge_project:
|
|
77
|
+
rubygems_version: 1.3.6
|
|
78
|
+
signing_key:
|
|
79
|
+
specification_version: 3
|
|
80
|
+
summary: a css-only slideshow implementation for compass
|
|
81
|
+
test_files: []
|
|
82
|
+
|