Ajax Loader
×
HTML
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
1
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
2
<script class="cssdeck" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
3
 
4
<!-- filters and tags -->
5
<div class="filters">
6
  
7
  <fieldset class="tags-cloud">
8
    <legend class="tags-group-label">Joomla! version:</legend>
9
    <span class="tag-switch">
10
      <input type="checkbox" name="tag-joomla-1-0" id="tag-joomla-1-0" checked="checked"><label for="tag-joomla-1-0">Joomla! 1.0</label>
11
    </span>
12
    <span class="tag-switch">
13
      <input type="checkbox" name="tag-joomla-1-5" id="tag-joomla-1-5" checked="checked"><label for="tag-joomla-1-5">Joomla! 1.5</label>
14
    </span>
15
    <span class="tag-switch">
16
      <input type="checkbox" name="tag-joomla-2-5" id="tag-joomla-2-5" checked="checked"><label for="tag-joomla-2-5">Joomla! 2.5</label>
17
    </span>
18
    <span class="tag-switch">
19
      <input type="checkbox" name="tag-joomla-3-0" id="tag-joomla-3-0" checked="checked"><label for="tag-joomla-3-0">Joomla! 3.0</label>
20
    </span>
21
  </fieldset>
22
  
23
  <fieldset class="tags-cloud">
24
    <legend class="tags-group-label">by purpose:</legend>
25
    <span class="tag-switch">
26
      <input type="checkbox" name="tag-elearn" id="tag-elearn" checked="checked"><label for="tag-elearn">E-learning</label>
27
    </span>
28
 
29
    <span class="tag-switch">
30
      <input type="checkbox" name="tag-popular" id="tag-popular" checked="checked"><label for="tag-popular">Popular</label>
31
    </span>
32
    <span class="tag-switch">
33
      <input type="checkbox" name="tag-personal" id="tag-personal" checked="checked"><label for="tag-personal">Personal</label>
34
    </span>
35
    <span class="tag-switch">
36
      <input type="checkbox" name="tag-commerse" id="tag-commerse" checked="checked"><label for="tag-commerse">Commerce</label>
37
    </span>
38
    <span class="tag-switch">
39
      <input type="checkbox" name="tag-bridges" id="tag-bridges" checked="checked"><label for="tag-bridges">Bridges</label>
40
    </span>
41
    <span class="tag-switch">
42
      <input type="checkbox" name="tag-administration" id="tag-administration" checked="checked"><label for="tag-administration">Administration</label>
43
    </span>
44
    <span class="tag-switch">
45
      <input type="checkbox" name="tag-jomsocial" id="tag-jomsocial" checked="checked"><label for="tag-jomsocial">Jom Social</label>
46
    </span>
47
  </fieldset>
48
  
49
  <fieldset class="tags-cloud">
50
    <legend class="tags-group-label">by price:</legend>
51
    <span class="tag-switch">
52
      <input type="checkbox" name="tag-free" id="tag-free" checked="checked"><label for="tag-free">Free</label>
53
    </span>
54
    <span class="tag-switch">
55
      <input type="checkbox" name="tag-paid" id="tag-paid" checked="checked"><label for="tag-paid">Paid</label>
56
    </span>
57
    <span class="tag-switch">
58
      <input type="checkbox" name="tag-discount" id="tag-discount" checked="checked"><label for="tag-discount">Discount</label>
59
    </span>
60
    <span class="tag-switch">
61
      <input type="checkbox" name="tag-bundle" id="tag-bundle" checked="checked"><label for="tag-bundle">Bundle</label>
62
    </span>
63
  </fieldset>
64
    
65
  <fieldset class="tags-cloud">
66
    <legend class="tags-group-label">by technology:</legend>
67
    <span class="tag-switch">
68
      <input type="checkbox" name="tag-flash" id="tag-flash" checked="checked"><label for="tag-flash">Flash</label>
69
    </span>
70
    <span class="tag-switch">
71
      <input type="checkbox" name="tag-ui" id="tag-ui" checked="checked"><label for="tag-ui">UI</label>
72
    </span>
73
  </fieldset>
74
</div>
75
 
76
<!-- filters and tags end -->
77
 
78
<!-- product wall layuot -->
79
 
80
<ul class="products">
81
  
82
  <li class="item">
83
    <a href="#" class="product-card product-link tag-elearn">
84
      <img src="http://www.joomplace.com/images/covers2/quiz.jpg" alt="JoomlaQuiz Deluxe" class="product-icon">
85
      <h3 class="product-name">JoomlaQuiz Deluxe</h3>
86
      <p class="product-descr">Create online Joomla quizzes</p>
87
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">69</span></p>
88
    </a>
89
  </li>
90
  
91
  <li class="item">
92
    <a href="#" class="product-card product-link tag-elearn">
93
      <img src="http://www.joomplace.com/images/covers2/surveyforse.jpg" alt="Survey Force Deluxe" class="product-icon">
94
      <h3 class="product-name">Survey Force Deluxe</h3>
95
      <p class="product-descr">Make online Joomla survey with our survey extension</p>
96
      <p class="product-price price"><span class="price-prefix">from</span> <span class="price-curr">$</span><span class="price-value">69</span></p>
97
    </a>
98
  </li>
99
  
100
  <li class="item">
101
    <a href="#" class="product-card product-link tag-elearn tag-flash tag-free">
102
      <img src="http://www.joomplace.com/images/covers2/flashquiz.jpg" alt="Online FlashQuiz" class="product-icon">
103
      <h3 class="product-name">Online FlashQuiz</h3>
104
      <p class="product-descr">Make online Flash quizzes and questionnaires</p>
105
      <span class="product-price price-free"><span class="badge badge-free">free</span></span>
106
    </a>
107
  </li>
108
 
109
  <li class="item">
110
    <a href="#" class="product-card product-link tag-elearn tag-flash">
111
      <img src="http://www.joomplace.com/images/covers2/lifeconference.jpg" alt="Live Conference" class="product-icon">
112
      <h3 class="product-name">Live Conference</h3>
113
      <p class="product-descr">Meet online and record your sessions with our Joomla conference!</p>
114
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">69</span></p>
115
    </a>
116
  </li>
117
  
118
  <li class="item">
119
    <a href="#" class="product-card product-link">
120
      <img src="http://www.joomplace.com/images/covers2/art.jpg" alt="Comparison Chart" class="product-icon">
121
      <h3 class="product-name">Comparison Chart</h3>
122
      <p class="product-descr">Create any comparison charts with this Joomla extension!</p>
123
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">59</span></p>
124
    </a>
125
  </li>
126
  
127
  <li class="item">
128
    <a href="#" class="product-card product-link tag-elearn">
129
      <img src="http://www.joomplace.com/images/covers2/testimonials.jpg" alt="Testimonials" class="product-icon">
130
      <h3 class="product-name">Testimonials</h3>
131
      <p class="product-descr">Get your feedback noticed with our Joomla testimonials component!</p>
132
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">69</span></p>
133
    </a>
134
  </li>
135
  
136
  <li class="item">
137
    <a href="#" class="product-card product-link tag-elearn">
138
      <img src="http://www.joomplace.com/images/covers2/magazine.jpg" alt="Flash Magazine Deluxe" class="product-icon">
139
      <h3 class="product-name">Flash Magazine Deluxe</h3>
140
      <p class="product-descr">Attract the attention of your visitors with our Joomla magazine. Present info on your Joomla site in an unusual way and make it even more alluring!</p>
141
      <p class="product-price price"><span class="price-prefix">from</span> <span class="price-curr">$</span><span class="price-value">69</span></p>
142
    </a>
143
  </li>
144
  
145
  <li class="item">
146
    <a href="#" class="product-card product-link tag-elearn tag-flash tag-free">
147
      <img src="http://www.joomplace.com/images/covers2/portfolio.jpg" alt="JoomPortfolio" class="product-icon">
148
      <h3 class="product-name">JoomPortfolio</h3>
149
      <p class="product-descr">Let everyone see your achievements using this Joomla portfolio component! Or use this as simple catalogue with custom fields.</p>
150
      <span class="product-price price-free"><span class="badge badge-free">free</span></span>
151
    </a>
152
  </li>
153
 
154
  <li class="item">
155
    <a href="#" class="product-card product-link tag-elearn tag-flash">
156
      <img src="http://www.joomplace.com/images/covers2/dragdrop.jpg" alt="Drag &amp; Drop 2" class="product-icon">
157
      <h3 class="product-name">Drag &amp; Drop 2</h3>
158
      <p class="product-descr">Let visitors of your site decide how to configure the page modules - each one will have a customized dashboard</p>
159
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">69</span></p>
160
    </a>
161
  </li>
162
  
163
  <li class="item">
164
    <a href="#" class="product-card product-link">
165
      <img src="http://www.joomplace.com/images/covers2/eportfolio.jpg" alt="ePortfolio" class="product-icon">
166
      <h3 class="product-name">ePortfolio</h3>
167
      <p class="product-descr">With this Joomla portfolio component students, employees and others can create their online portfolio!</p>
168
      <p class="product-price price"><span class="price-curr">$</span><span class="price-value">59</span></p>
169
    </a>
170
  </li> 
171
  
172
  
173
</ul>
174
 
175
<!-- product wall layuot end -->
 
CSS
* {
1
* {
2
  transition: 500ms;
3
}
4
 
5
/* filters */
6
.tags-cloud {
7
  list-style-type:none;
8
  display:inline-block;
9
  margin:5px 20px;
10
  padding:0;
11
  font-size:13px;
12
  color:#AAA;
13
  border:none;
14
}
15
.tags-group-label {
16
  display:inline-block;
17
  padding:5px;
18
  float:none;
19
  color:#000;
20
  font-weight:bold;
21
}
22
.tag-switch {
23
  display:inline-block;
24
  margin:5px;
25
}
26
.tag-switch input {
27
  opacity:0.5;
28
}
29
.tag-switch label {
30
  padding-left:5px;
31
  text-decoration:line-through;
32
}
33
.tag-switch input:checked {
34
  opacity:1;
35
}
36
.tag-switch input:checked ~ label {
37
  color:#000;
38
  text-decoration:none;
39
}
40
/* layout */
41
.products {
42
  list-style-type:none;
43
  margin:0 auto;
44
  padding:20px;
45
}
46
.item {
47
  width: 160px;
48
  margin: 10px;
49
  float: left;
50
}
51
 
52
/* theme */
53
.product-card {
54
  display:block;
55
  min-height:190px;
56
  max-height:190px;
57
  position:relative;
58
  border:1px solid #CCC;
59
  border-radius:2px;
60
  background:#FFF;
61
  padding:9px;
62
  font:normal 12px/1.4 Arial;
63
  text-align:center;
64
  box-shadow:1px 1px 10px #EEE, inset 0 0 0 1px #FFF, inset 0 0 15px #EEE;
65
  text-decoration:none;
66
  color:#176EB9;
67
}
68
.product-name {
69
  margin:5px 0;
70
  font-size:12px;
71
  font-weight:bold;
72
}
73
.product-descr {
74
  margin:5px 0 0;
75
  color:#999;
76
  overflow:hidden;
77
  max-height:4em;
78
}
79
 
80
.product-card:hover,
81
.product-card:focus {
82
  margin-top:-5px;
83
  margin-left:-5px;
84
  margin-right:-5px;
85
  margin-bottom:-5px;
86
  padding:14px;
87
  max-height:500px;
88
  box-shadow:1px 1px 20px #DDD;
89
  z-index:10;
90
}
91
.product-card:hover .product-descr,
92
.product-card:focus .product-descr {
93
  max-height:500px;
94
 
95
}
96
 
97
/* tags */
98
/*.tag-elearn:before,
99
.tag-flash:before
100
{
101
  position:absolute;
102
  left:-10px;
103
  background:grey;
104
  color:#FFF;
105
  padding:2px 5px 3px;
106
  font-size:9px;
107
  font-family:Verdana;
108
  border-radius:3px;
109
}
110
 
111
.tag-elearn:before {
112
  content:'e-learn';
113
  background:blue;
114
}
115
 
116
.tag-flash:before {
117
  content:'flash';
118
  background:red;
119
}*/
120
 
121
.product-price {
122
  position:absolute;
123
  z-index:2;
124
  top:15px;
125
  left:-10px;
126
  background:#fefde3;
127
  color:black;
128
  border:1px solid #d2d291;
129
  padding:2px 7px 3px;
130
  margin:0;
131
  font-size:11px;
132
  font-family:Verdana;
133
}
134
.product-price:before {
135
  content:'';
136
  position:absolute;
137
  z-index:1;
138
  top:100%;
139
  margin-top:1px;
140
  left:-1px;
141
  display:block;
142
  border-style:solid;
143
  border-color:transparent;
144
  border-top-color:inherit;
145
  border-width:5px 0 0 9px;
146
}
147
 
148
.price-free {
149
  background:green;
150
  color:#FFF;
151
  border-color:#005b00;
152
}
153
.price-curr {
154
 
155
}
156
.price-value {
157
 
158
}
159
.price-prefix {
160
  font-size:9px;
161
}
162
 
163
.hidden {
164
  display:none;
165
  width:0;
166
  height:0;
167
  margin:0;
168
}
 
JavaScript
var products = $('.products');
1
var products = $('.products');
2
$(function(){
3
  products.masonry({
4
    // options
5
    itemSelector : '.item',
6
    isFitWidth: true,
7
    columnWidth : 180
8
    //isAnimated : true,
9
    //animationOption : {
10
    //  easing: 'linear'
11
    //}
12
  });
13
});
14
 
15
function hideItem(selector) {
16
  $('.' + selector).parent('.item').addClass('hidden');
17
  products.masonry('reload');
18
}
19
 
20
function showItem(selector) {
21
  $('.' + selector).parent('.item').removeClass('hidden');
22
  products.masonry('reload');
23
}
24
 
25
function updateTagStatus(tagselector) {
26
  var currentSelector = tagselector.attr('id');
27
  console.log = currentSelector;
28
  if (tagselector.attr('checked') == 'checked') {
29
    showItem(currentSelector);
30
  } else {
31
    hideItem(currentSelector);
32
  }
33
}
34
 
35
$('.tag-switch input').each(function () {
36
  $(this).change(function () {
37
    updateTagStatus($(this));
38
  });
39
});
40
 
 

Untitled

CSSDeck G+