Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Updating the demos with jQuery 1.9.1

Browse Source
pull/56/head
Glen Cheney 11 years ago
parent ac86150413
commit 4f82153c83
6 changed files with 518 additions and 449 deletions
Show Stats Download Patch File Download Diff File

430
adaptive.html
Unescape Escape View File

@ -0,0 +1,430 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Shuffle Responsive Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="https://plus.google.com/u/0/100210640453700033824" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/gallery.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body class="masonry">
<section class="gallery container">
<div class="hero">
<img src="http://placekitten.com/1170/400" alt="">
<div class="ghost-center-wrap full">
<div class="hero-text ghost-center">
<div>Example</div>
<h1>Responsive bootstrap</h1>
<h2>With compounded filters</h2>
</div>
</div>
</div>
<h2>Filters</h2>
<div class="product-filter">
<div class="filter-options row">
<ul class="span6 unstyled megapixels">
<li data-megapixels="14-16" class="btn">14-16MP</li>
<li data-megapixels="16-18" class="btn">16-18MP</li>
<li data-megapixels="18-20" class="btn">18-20MP</li>
<li data-megapixels="20+" class="btn">20MP+</li>
</ul>
<ul class="span6 unstyled features">
<li>
<label><input type="checkbox" value="lcd"> LCD</label>
</li>
<li>
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
</li>
<li>
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
</li>
<li>
<label><input type="checkbox" value="lightweight"> Lightweight</label>
</li>
</ul>
</div>
</div>
<div class="products">
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
<div class="product-img">
<img src="img/baseball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Explore <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
<p>Massive Sensor Loruem Ipsum</p>
<a href="#" class="btn">Explore Sensor</a>
</div>
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
<div class="product-img">
<img src="img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
<div class="product-img">
<img src="img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
<div class="product-img">
<img src="img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
<div class="product-img">
<img src="img/master-chief.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
<div class="product-img">
<img src="img/es-blue.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
<div class="product-img">
<img src="img/vestride-red.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
<div class="product-img">
<img src="img/newegg.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
<p>Great Summer Travel Loruem Ipsum</p>
<a href="#" class="btn">Products for Summer Vacation</a>
</div>
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
<div class="product-img">
<img src="img/eightfoldarc.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
<div class="product-img">
<img src="img/ground.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$149.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
<div class="product-img">
<img src="img/grassy-hills.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$789.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
<div class="product-img">
<img src="img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
<div class="product-img">
<img src="img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
<div class="product-img">
<img src="img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h1>Another section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="js/jquery.shuffle.js"></script>
<script src="js/gallery.js"></script>
</body>
</html>

5
basic.html
Unescape Escape View File

@ -0,0 +1,5 @@
<!DOCTYPE html>
<ul>
<li>Use the one from the main homepage demo</li>
</ul>

13
index.html
Unescape Escape View File

@ -167,8 +167,9 @@
<section>
<h2>Other Examples</h2>
<ul>
<li><a href="minimal.html">The minimal markup</a></li>
<li><a href="responsive.html">Twitter bootstrap responsive masonry with compounded filters</a></li>
<li><a href="basic.html">Basic masonry layout</a></li>
<li><a href="minimal.html">The minimal markup with filters</a></li>
<li><a href="adaptive.html">Twitter bootstrap adaptive masonry with compounded filters</a></li>
</ul>
</section>
@ -428,7 +429,7 @@ $('.filter .search').on('keyup change', function() {
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script defer src="js/jquery.shuffle.js"></script>
<script defer src="js/prism.js"></script>
<script>
@ -500,8 +501,10 @@ $('.filter .search').on('keyup change', function() {
// You can subscribe to custom events: shrink, shrunk, filter, filtered, and sorted
$('#grid').on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle', function(evt, shuffle) {
// console.log(evt.type);
$('#grid').on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
if ( window.console ) {
console.log(evt.type, shuffle, this);
}
});
});

4
js/jquery.shuffle.js
View File

File diff suppressed because one or more lines are too long

84
minimal.html
Unescape Escape View File

@ -15,12 +15,44 @@
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<style>
#grid {
outline: 1px solid rgb(255, 255, 255);
outline: 1px solid rgba(255, 255, 255, .7);
}
.simple-item {
width: 33.33333%; /* 3 per row */
}
.simple-item img {
max-width: 100%;
}
/* Spacing Exmaple */
.spacing #grid {
padding: 10px;
}
.spacing .simple-item {
width: 306px;
margin: 10px;
}
/* add some space to the bottom of the document */
.spacer {
padding-bottom: 150px;
}
</style>
</head>
<body>
<div class="container container-main">
<section>
<h2>Minimal</h2>
<button class="js-spacing">Add some space</button>
<div class="filter clearfix">
<p class="lfloat label">Filter:</p>
@ -33,61 +65,63 @@
</ul>
</div>
<div id="grid" class="clearfix">
<div data-groups='["photography"]'>
<div id="grid">
<div class="simple-item" data-groups='["photography"]'>
<img src="img/baseball.png" alt="" />
<div><a href="img/originals/baseball.jpg">Photography</a></div>
</div>
<div data-groups='["wallpaper", "3d"]'>
<div class="simple-item" data-groups='["wallpaper", "3d"]'>
<img src="img/tennis-ball.png" alt="" />
<div><a href="#">3D Render, Wallpaper</a></div>
</div>
<div data-groups='["3d", "wallpaper"]'>
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
<img src="img/imac.png" alt="" />
<div><a href="#">3D Render, Wallpaper</a></div>
</div>
<div data-groups='["graphics"]'>
<div class="simple-item" data-groups='["graphics"]'>
<img src="img/master-chief.png" alt="" />
<div><a href="#">Graphic Design</a></div>
</div>
<div data-groups='["3d", "wallpaper"]'>
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
<img src="img/es-blue.png" alt="" />
<div><a href="#">3D Render, Wallpaper</a></div>
</div>
<div data-groups='["photography"]'>
<div class="simple-item" data-groups='["photography"]'>
<img src="img/pumpkin.png" alt="" />
<div><a href="#">Photography</a></div>
</div>
<div data-groups='["3d", "wallpaper"]'>
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
<img src="img/vestride-red.png" alt="" />
<div><a href="#">3D Render, Wallpaper</a></div>
</div>
<div data-groups='["graphics"]'>
<div class="simple-item" data-groups='["graphics"]'>
<img src="img/newegg.png" alt="" />
<div><a href="#">Motion Graphics</a></div>
</div>
<div data-groups='["wallpaper"]'>
<div class="simple-item" data-groups='["wallpaper"]'>
<img src="img/eightfoldarc.png" alt="" />
<div><a href="#">Wallpaper</a></div>
</div>
<div data-groups='["photography"]'>
<div class="simple-item" data-groups='["photography"]'>
<img src="img/ground.png" alt=""/>
<div><a href="img/originals/baseball.jpg">Photography</a></div>
</div>
<div data-groups='["wallpaper"]'>
<div class="simple-item" data-groups='["wallpaper"]'>
<img src="img/grassy-hills.png" alt="" />
<div><a href="#">Wallpaper</a></div>
</div>
<div data-groups='["3d", "wallpaper"]'>
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
<img src="img/vestride-classy.png" alt="" />
<div><a href="#">3D Render, Wallpaper</a></div>
</div>
</div>
</section>
</div>
<div class="spacer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.shuffle.js"></script>
<script>
$(document).ready(function() {
@ -108,6 +142,28 @@
// instantiate the plugin
$('#grid').shuffle();
// Add space button
$('.js-spacing').on('click', function() {
var $body = $(document.body);
$body.toggleClass('spacing');
if ( $body.hasClass('spacing') ) {
$(this).text('Remove the spacing');
$('#grid')
.shuffle('destroy')
// you can hide the initial transition if you want
.shuffle({
showInitialTransition: false
});
} else {
$(this).text('Add some space');
$('#grid')
.shuffle('destroy')
.shuffle();
}
});
});
</script>
</body>

431
responsive.html
Unescape Escape View File

@ -1,430 +1,5 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Shuffle Responsive Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="https://plus.google.com/u/0/100210640453700033824" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/gallery.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body class="masonry">
<section class="gallery container">
<div class="hero">
<img src="http://placekitten.com/1170/400" alt="">
<div class="ghost-center-wrap full">
<div class="hero-text ghost-center">
<div>Example</div>
<h1>Responsive bootstrap</h1>
<h2>With compounded filters</h2>
</div>
</div>
</div>
<h2>Filters</h2>
<div class="product-filter">
<div class="filter-options row">
<ul class="span6 unstyled megapixels">
<li data-megapixels="14-16" class="btn">14-16MP</li>
<li data-megapixels="16-18" class="btn">16-18MP</li>
<li data-megapixels="18-20" class="btn">18-20MP</li>
<li data-megapixels="20+" class="btn">20MP+</li>
</ul>
<ul class="span6 unstyled features">
<li>
<label><input type="checkbox" value="lcd"> LCD</label>
</li>
<li>
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
</li>
<li>
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
</li>
<li>
<label><input type="checkbox" value="lightweight"> Lightweight</label>
</li>
</ul>
</div>
</div>
<div class="products">
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
<div class="product-img">
<img src="img/baseball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Explore <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
<p>Massive Sensor Loruem Ipsum</p>
<a href="#" class="btn">Explore Sensor</a>
</div>
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
<div class="product-img">
<img src="img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
<div class="product-img">
<img src="img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
<div class="product-img">
<img src="img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
<div class="product-img">
<img src="img/master-chief.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
<div class="product-img">
<img src="img/es-blue.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
<div class="product-img">
<img src="img/vestride-red.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
<div class="product-img">
<img src="img/newegg.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
<p>Great Summer Travel Loruem Ipsum</p>
<a href="#" class="btn">Products for Summer Vacation</a>
</div>
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
<div class="product-img">
<img src="img/eightfoldarc.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
<div class="product-img">
<img src="img/ground.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$149.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
<div class="product-img">
<img src="img/grassy-hills.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$789.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
<div class="product-img">
<img src="img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
<div class="product-img">
<img src="img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
<div class="product-img">
<img src="img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h1>Another section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="js/jquery.shuffle.js"></script>
<script src="js/gallery.js"></script>
</body>
</html>
<ul>
<li>Will be <strong><em>fully responsive</em></strong></li>
</ul>
Write Preview
Loading…
Cancel
Save