gallery-css 1.0.2.pre.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +40 -0
- data/Rakefile +21 -0
- data/gallery-css.gemspec +26 -0
- data/lib/gallery-css.rb +9 -0
- data/lib/gallery-css/engine.rb +5 -0
- data/lib/gallery-css/version.rb +3 -0
- data/vendor/assets/stylesheets/gallery-css/_gallery.scss +54 -0
- data/vendor/assets/stylesheets/gallery-css/_variables.scss +28 -0
- data/vendor/assets/stylesheets/gallery-css/gallery.build.scss +5 -0
- data/vendor/assets/stylesheets/gallery-css/gallery.theme.scss +24 -0
- metadata +72 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 13f63cf66766c175dd3f0a6655bd0d5e1738b529
|
4
|
+
data.tar.gz: 9c7065248ff12d13f2add670502458690ad937ef
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 6d9e4078a361bf17414a8172237f5505aad149409bc863396a6558b210b9e0fd40748e0a4d72e5a7e8a38690799ca28c405001b3b68703bcc2ab68ece3f763c7
|
7
|
+
data.tar.gz: 40dbbcd0fbdfade8b9e4f513876d4862a9c62ea702164c2d3a217907c91074ae986151ede2eb653beeefe40b15947cd691c30dc2be27efc8e6f3ed6456deff8a
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2016 Sjors Sparreboom
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
# Gallery-css-rails Gem for the awesome gallery-css
|
2
|
+
|
3
|
+
## Installation
|
4
|
+
|
5
|
+
```ruby
|
6
|
+
gem 'gallery-css'
|
7
|
+
```
|
8
|
+
|
9
|
+
And then execute:
|
10
|
+
|
11
|
+
$ bundle
|
12
|
+
|
13
|
+
Or install it yourself as:
|
14
|
+
|
15
|
+
$ gem install gallery-css
|
16
|
+
|
17
|
+
## Configuration
|
18
|
+
|
19
|
+
Add these lines to app/assets/stylesheets/application.css
|
20
|
+
|
21
|
+
``` sass
|
22
|
+
@import 'gallery-css/gallery.theme';
|
23
|
+
@import 'gallery-css/gallery.build';
|
24
|
+
```
|
25
|
+
|
26
|
+
## Usage
|
27
|
+
|
28
|
+
Checkout the [screencast](http://benschwarz.github.io/gallery-css) by [benschwarz](https://github.com/benschwarz)
|
29
|
+
|
30
|
+
## Contributing
|
31
|
+
|
32
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/git-jls/gallery-css-rails.
|
33
|
+
|
34
|
+
|
35
|
+
## License
|
36
|
+
|
37
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
38
|
+
|
39
|
+
## Credits
|
40
|
+
Gallery-css by [benschwarz](https://github.com/benschwarz/gallery-css/).
|
data/Rakefile
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
|
3
|
+
require 'bundler/gem_tasks'
|
4
|
+
|
5
|
+
desc 'Upgrade gallery-css'
|
6
|
+
task :upgrade do
|
7
|
+
postfix=".scss"
|
8
|
+
files = {
|
9
|
+
'_gallery': "https://raw.githubusercontent.com/benschwarz/gallery-css/master/sass/_gallery#{postfix}",
|
10
|
+
'_variables': "https://raw.githubusercontent.com/benschwarz/gallery-css/master/sass/_variables#{postfix}",
|
11
|
+
'gallery.build': "https://raw.githubusercontent.com/benschwarz/gallery-css/master/sass/gallery.build#{postfix}",
|
12
|
+
'gallery.theme': "https://raw.githubusercontent.com/benschwarz/gallery-css/master/sass/gallery.theme#{postfix}"
|
13
|
+
}
|
14
|
+
|
15
|
+
files.each do |file, url|
|
16
|
+
puts "Downloading #{file}#{postfix}"
|
17
|
+
puts `curl -o vendor/assets/stylesheets/gallery-css/#{file}#{postfix} #{url}`
|
18
|
+
end
|
19
|
+
end
|
20
|
+
|
21
|
+
|
data/gallery-css.gemspec
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'gallery-css/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "gallery-css"
|
8
|
+
spec.version = GalleryCss::VERSION
|
9
|
+
spec.authors = ["Sjors Sparreboom"]
|
10
|
+
spec.email = ["mail@sjorssparreboom.nl"]
|
11
|
+
|
12
|
+
spec.summary = %q{Reliable galleries without the use of javascript.}
|
13
|
+
spec.description = %q{Gallery.css is all CSS. Think: Simple, maintainable and understandable galleries without the use of Javascript.}
|
14
|
+
|
15
|
+
spec.homepage = "http://github.com/git-jls/gallery-css-rails"
|
16
|
+
spec.license = "MIT"
|
17
|
+
|
18
|
+
spec.files = `git ls-files -z`.split("\x0").reject do |f|
|
19
|
+
f.match(%r{^(test|spec|features)/})
|
20
|
+
end
|
21
|
+
spec.bindir = "exe"
|
22
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
23
|
+
spec.require_paths = ["lib"]
|
24
|
+
|
25
|
+
spec.add_dependency 'sass'
|
26
|
+
end
|
data/lib/gallery-css.rb
ADDED
@@ -0,0 +1,54 @@
|
|
1
|
+
@import "variables";
|
2
|
+
|
3
|
+
@mixin gallery( $item-count ) {
|
4
|
+
$total-duration: $display-duration * $item-count;
|
5
|
+
|
6
|
+
@keyframes controlAnimation-#{$item-count} {
|
7
|
+
0% { @include inactive-button; }
|
8
|
+
#{100% * $transition-duration / $total-duration},
|
9
|
+
#{100% * $display-duration / $total-duration} { @include active-button; }
|
10
|
+
#{100% * ($display-duration + $transition-duration) / $total-duration},
|
11
|
+
100% { @include inactive-button; }
|
12
|
+
}
|
13
|
+
|
14
|
+
@keyframes galleryAnimation-#{$item-count} {
|
15
|
+
0% { opacity: 0; }
|
16
|
+
#{100% * $transition-duration / $total-duration},
|
17
|
+
#{100% * $display-duration / $total-duration} { opacity: 1; }
|
18
|
+
#{100% * ($display-duration + $transition-duration) / $total-duration},
|
19
|
+
100% { opacity: 0; }
|
20
|
+
}
|
21
|
+
|
22
|
+
.gallery {
|
23
|
+
@for $j from 1 through $item-count {
|
24
|
+
.control-operator:nth-of-type(#{$j}):target ~ .item:nth-of-type(#{$j}) { pointer-events: auto; opacity: 1; }
|
25
|
+
.control-operator:nth-of-type(#{$j}):target ~ .controls .control-button:nth-of-type(#{$j}) { @extend %active-button; }
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.items-#{$item-count} {
|
30
|
+
&.autoplay .control-button { animation: controlAnimation-#{$item-count} #{$total-duration}s infinite; }
|
31
|
+
&.autoplay .item { animation: galleryAnimation-#{$item-count} #{$total-duration}s infinite; }
|
32
|
+
|
33
|
+
@for $j from 1 through $item-count {
|
34
|
+
.control-button:nth-of-type(#{$j}),
|
35
|
+
.item:nth-of-type(#{$j}) {
|
36
|
+
$delay: #{($j - 1) * ($display-duration) - $transition-duration}s;
|
37
|
+
|
38
|
+
animation-delay: #{$delay};
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
.gallery {
|
45
|
+
.item:first-of-type { position: static; pointer-events: auto; opacity: 1; } // Set the first item to be visible
|
46
|
+
.item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s; }
|
47
|
+
|
48
|
+
.control-operator { display: none; } // Stop hash links from scrolling up and down
|
49
|
+
|
50
|
+
.control-operator:target ~ .item { pointer-events: none; opacity: 0; animation: none; } // Unselected image
|
51
|
+
|
52
|
+
.control-button:first-of-type { @extend %active-button; }
|
53
|
+
.control-operator:target ~ .controls .control-button { @extend %inactive-button; animation: none; } // Kill button animation when there is a selected image
|
54
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
$item-display-duration: 5 !default; //seconds
|
2
|
+
$transition-duration: 2 !default; // seconds
|
3
|
+
$display-duration: $transition-duration + $item-display-duration;
|
4
|
+
|
5
|
+
$gallery-inactive-color: #ccc !default;
|
6
|
+
$gallery-inactive-transparent-color: white !default;
|
7
|
+
$gallery-inactive-opacity: 0.4 !default;
|
8
|
+
$gallery-active-color: white !default;
|
9
|
+
$gallery-active-transparent-color: white !default;
|
10
|
+
$gallery-active-opacity: 0.8 !default;
|
11
|
+
|
12
|
+
@mixin inactive-button {
|
13
|
+
color: $gallery-inactive-color;
|
14
|
+
color: rgba($gallery-inactive-transparent-color, $gallery-inactive-opacity);
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin active-button {
|
18
|
+
color: $gallery-active-color;
|
19
|
+
color: rgba($gallery-active-transparent-color, $gallery-active-opacity);
|
20
|
+
}
|
21
|
+
|
22
|
+
%inactive-button {
|
23
|
+
@include inactive-button;
|
24
|
+
}
|
25
|
+
|
26
|
+
%active-button {
|
27
|
+
@include active-button;
|
28
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
@import "variables";
|
2
|
+
|
3
|
+
/*
|
4
|
+
Theme controls how everything looks in Gallery CSS.
|
5
|
+
*/
|
6
|
+
|
7
|
+
.gallery {
|
8
|
+
position: relative;
|
9
|
+
|
10
|
+
.item { height: 400px; overflow: hidden; text-align: center; background: #4d87e2; }
|
11
|
+
.controls { position: absolute; bottom: 0; width: 100%; text-align: center; }
|
12
|
+
|
13
|
+
.control-button {
|
14
|
+
display: inline-block; margin: 0 .02em;
|
15
|
+
font-size: 3em;
|
16
|
+
|
17
|
+
@extend %inactive-button;
|
18
|
+
|
19
|
+
text-align: center; text-decoration: none;
|
20
|
+
transition: color .1s;
|
21
|
+
|
22
|
+
&:hover { @extend %active-button; }
|
23
|
+
}
|
24
|
+
}
|
metadata
ADDED
@@ -0,0 +1,72 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: gallery-css
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.2.pre.3
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Sjors Sparreboom
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-12-11 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
description: 'Gallery.css is all CSS. Think: Simple, maintainable and understandable
|
28
|
+
galleries without the use of Javascript.'
|
29
|
+
email:
|
30
|
+
- mail@sjorssparreboom.nl
|
31
|
+
executables: []
|
32
|
+
extensions: []
|
33
|
+
extra_rdoc_files: []
|
34
|
+
files:
|
35
|
+
- ".gitignore"
|
36
|
+
- Gemfile
|
37
|
+
- LICENSE.txt
|
38
|
+
- README.md
|
39
|
+
- Rakefile
|
40
|
+
- gallery-css.gemspec
|
41
|
+
- lib/gallery-css.rb
|
42
|
+
- lib/gallery-css/engine.rb
|
43
|
+
- lib/gallery-css/version.rb
|
44
|
+
- vendor/assets/stylesheets/gallery-css/_gallery.scss
|
45
|
+
- vendor/assets/stylesheets/gallery-css/_variables.scss
|
46
|
+
- vendor/assets/stylesheets/gallery-css/gallery.build.scss
|
47
|
+
- vendor/assets/stylesheets/gallery-css/gallery.theme.scss
|
48
|
+
homepage: http://github.com/git-jls/gallery-css-rails
|
49
|
+
licenses:
|
50
|
+
- MIT
|
51
|
+
metadata: {}
|
52
|
+
post_install_message:
|
53
|
+
rdoc_options: []
|
54
|
+
require_paths:
|
55
|
+
- lib
|
56
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
57
|
+
requirements:
|
58
|
+
- - ">="
|
59
|
+
- !ruby/object:Gem::Version
|
60
|
+
version: '0'
|
61
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
62
|
+
requirements:
|
63
|
+
- - ">"
|
64
|
+
- !ruby/object:Gem::Version
|
65
|
+
version: 1.3.1
|
66
|
+
requirements: []
|
67
|
+
rubyforge_project:
|
68
|
+
rubygems_version: 2.5.1
|
69
|
+
signing_key:
|
70
|
+
specification_version: 4
|
71
|
+
summary: Reliable galleries without the use of javascript.
|
72
|
+
test_files: []
|