Skip to content

Instantly share code, notes, and snippets.

@robv

robv/index.html

Created February 14, 2011 03:30
Show Gist options
  • Save robv/825445 to your computer and use it in GitHub Desktop.
Save robv/825445 to your computer and use it in GitHub Desktop.
Download ZIP
jStacker is a gallery plugin for jQuery that revolves around the idea of "stacks" of photos, I'm just getting started...
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang="en" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>jStacker</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="jquery.jstacker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper img').jstacker();
});
</script>
<link rel="stylesheet" href="jstacker.css" type="text/css" media="screen" title="Default" charset="utf-8">
</head>
<body>
<div id="wrapper">
<img width="75" height="75" src="http://farm3.static.flickr.com/2697/4106711273_969cc50546_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2607/4194526085_a129ff3485_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2630/3795161224_1012daa415_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2736/4158101064_89f08e4bff_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3524/3880365897_682521f7b9_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4072/4208775604_8d1e65578d_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4005/4247684077_6848f141ff_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2697/4106711273_969cc50546_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2607/4194526085_a129ff3485_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2630/3795161224_1012daa415_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2736/4158101064_89f08e4bff_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3524/3880365897_682521f7b9_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4072/4208775604_8d1e65578d_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4005/4247684077_6848f141ff_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4072/4208775604_8d1e65578d_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4005/4247684077_6848f141ff_s.jpg" />
</div>
</body>
</html>
Raw
jquery.jstacker.js
(function($) {
$.fn.jstacker = function(params) {
// merge default and user parameters
params = $.extend({
rotationDeg: 20,
delay: 40,
duration: 900,
transition: 'back:out'
}, params);
var $masterThis = this;
var storedPosition = {}
// Let's traverse it all and store the positions relative to the parent wrapper
this.each(function(index) {
var $this = $(this);
storedPosition[index] = { 'left': $this.position().left, 'top': $this.position().top };
});
// Now let's traverse again and apply the position along with making them absolute and adding click binding
return this.each(function(index) {
var $this = $(this);
$this.css('top', storedPosition[index].top + 'px').css('left', storedPosition[index].left + 'px').css('position', 'absolute');
$this.bind('click', function() {
$masterThis.each(function() {
var mode = 'in';
var rand = Math.floor(Math.random() * (params.rotationDeg*2 + 1) - params.rotationDeg);
var smallRand = Math.floor(Math.random() * 5);
var thisTop = storedPosition[index].top + smallRand;
var thisLeft = storedPosition[index].left + smallRand;
$(this).css('-webkit-transform', 'rotate(' + rand + 'deg)').css('-moz-transform', 'rotate(' + rand + 'deg)');
if ($this[0] == $(this)[0]) {
$(this).css('z-index', 100);
}
else {
$(this).css('z-index', 10);
}
$(this).animate({
top: thisTop + 'px',
left: thisLeft + 'px'
});
});
});
});
// allow jQuery chaining
return this;
};
})(jQuery);
Raw
jstacker.css
#wrapper {
position: relative;
height: 420px;
width: 480px;
margin: 15px auto;
}
img {
position: relative;
float: left;
padding: 0;
margin: 5px;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
border: solid 2px #FFFAF2;
border-bottom: solid 15px #FFFAF2;
-webkit-transition: -webkit-transform 0.20s ease-in-out;
-moz-transition: -moz-transform 0.20s ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment