This time I will share jQuery Plugin and tutorial about Gallery Content Filter With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 1.91 KB |
|---|---|
| Views Total: | 15210 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A jQuery based content filter which allows you to filter through a gallery of images with smooth CSS3 transition effects.
How to use it:
1. Insert a group of images with links to the gallery and categorize them using CSS classes like this:
01 |
<div class="gallery"> |
02 |
<a href="#" class="cats" ><img src="http://lorempixel.com/640/480/cats/1"></a> |
03 |
<a href="#" class="animals"><img src="http://lorempixel.com/640/480/animals/1"></a> |
04 |
<a href="#" class="cats" ><img src="http://lorempixel.com/640/480/cats/2"></a> |
05 |
<a href="#" class="cats" ><img src="http://lorempixel.com/640/480/cats/3"></a> |
06 |
<a href="#" class="food" ><img src="http://lorempixel.com/640/480/food/1"></a> |
07 |
<a href="#" class="food" ><img src="http://lorempixel.com/640/480/food/2"> |
08 |
<a href="#" class="animals" ><img src="http://lorempixel.com/640/480/animals/2"></a> |
09 |
<a href="#" class="food" ><img src="http://lorempixel.com/640/480/food/3"></a> |
10 |
<a href="#" class="animals" ><img src="http://lorempixel.com/640/480/animals/3"></a> |
11 |
</div> |
2. Create filter controls.
1 |
<div class="filter"> |
2 |
<a href="#all">ALL</a> |
3 |
<a href="#cats">CATS</a> |
4 |
<a href="#food">Food</a> |
5 |
<a href="#animals">Animals</a> |
6 |
</div> |
3. Style the gallery and filter controls.
01 |
.filter a { |
02 |
padding: 10px 20px; |
03 |
display: inline-block; |
04 |
color: #003; |
05 |
background: #eee; |
06 |
text-decoration: none; |
07 |
transition: all 0.2s; |
08 |
border-radius: 9px |
09 |
} |
10 |
11 |
.filter a:hover { background: #8ad } |
12 |
13 |
.filter { |
14 |
padding: 50px; |
15 |
text-align: center |
16 |
} |
17 |
18 |
.gallery a img { |
19 |
width: 100%; |
20 |
height: auto; |
21 |
float: left; |
22 |
} |
23 |
24 |
.gallery a { |
25 |
width: 33.33%; |
26 |
transition: all 0.2s; |
27 |
display: block; |
28 |
float: left; |
29 |
opacity: 1; |
30 |
height: auto; |
31 |
} |
32 |
33 |
.gallery .hide, .gallery .pophide { |
34 |
width: 0%; |
35 |
opacity: 0; |
36 |
transition: all 0.1s; |
37 |
} |
38 |
39 |
.gallery .pop { |
40 |
width: 100%; |
41 |
position: relative; |
42 |
z-index: 2; |
43 |
box-shadow: 0 0 0px 1000px rgba(0,0,0,0.5); |
44 |
} |
45 |
46 |
.pop:after { |
47 |
content: " |
