-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (82 loc) · 5.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<title>MyPage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="JS/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="CSS/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="FONT/CICLE/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="CSS/iso.css" />
<link rel="stylesheet" type="text/css" href="CSS/layout.css" />
<style>
*{ -webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;}
</style>
</head>
<body>
<div id = "wrapper">
<div id="header" ><h1>My Cute Gallery</h1></div>
<ul id="filters">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".dog">dogs</a></li>
<li><a href="#" data-filter=".cat">cats</a></li>
<li><a href="#" data-filter=".bunny">bunnies</a></li>
<li><a href="#" data-filter=".dog.cat">cats & dogs</a></li>
<li><a href="#" data-filter=".bunny.dog">bunnies & dogs</a></li>
<li><a href="#" data-filter=".bunny.cat">cats & bunnies</a></li>
<li><a href="#" data-filter=".bunny.cat.dog">cats & dogs & bunnies</a></li>
</ul>
<div id = "container">
<div class ="item doubleW dog" ><img class="thumb" src = "IMG/cute/dog1.jpeg" /></a></div>
<div class ="item doubleW doubleH dog" ><img class="thumb" src = "IMG/cute/dog2.jpeg" /></div>
<div class ="item dog" ><img class="thumb" src = "IMG/cute/dog3.jpeg" /></div>
<div class ="item cat doubleH" ><img class="thumb" src = "IMG/cute/cat1.jpeg" /></div>
<div class ="item cat doubleW" ><img class="thumb" src = "IMG/cute/cat2.jpeg" /></div>
<div class ="item cat" ><img class="thumb" src = "IMG/cute/cat3.jpeg" /></div>
<div class ="item cat dog" ><img class="thumb" src = "IMG/cute/catdog1.jpeg" /></div>
<div class ="item cat dog doubleW" ><img class="thumb" src = "IMG/cute/catdog2.jpeg" /></div>
<div class ="item cat dog" ><img class="thumb" src = "IMG/cute/catdog3.jpeg" /></div>
<div class ="item bunny" ><img class="thumb" src = "IMG/cute/bunny1.jpeg" /></div>
<div class ="item bunny tripleW doubleH" ><img class="thumb" src = "IMG/cute/bunny2.jpeg" /></div>
<div class ="item bunny doubleH" ><img class="thumb" src = "IMG/cute/bunny3.jpeg" /></div>
<div class ="item cat bunny" ><img class="thumb" src = "IMG/cute/catbunny1.jpeg" /></div>
<div class ="item cat bunny" ><img class="thumb" src = "IMG/cute/catbunny2.jpeg" /></div>
<div class ="item cat bunny" ><img class="thumb" src = "IMG/cute/catbunny3.jpeg" /></div>
<div class ="item cat dog bunny" ><img class="thumb" src = "IMG/cute/catdogbunny.jpeg" /></div>
<div class ="item dog bunny doubleW doubleH" ><img class="thumb" src = "IMG/cute/dogbunny1.jpeg" /></div>
<div class ="item dog bunny doubleW" ><img class="thumb" src = "IMG/cute/dogbunny2.jpeg" /></div>
<div class ="item dog bunny doubleH doubleH" ><img class="thumb" src = "IMG/cute/dogbunny3.jpeg" /></div>
</div> <!-- container -->
<!---isotope-->
<script src="JS/jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
layoutMode : 'masonry',
sortBy: 'random'
});
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector,layoutMode : 'masonry' });
return false;
});
});
$(document).ready(function(){
//This function rewrites img tags to background styles
$("img.thumb").load(function() {
$(this).wrap(function(){
return '<a href=' + $(this).attr('src') + ' rel="prettyPhoto" title="Ain\'t it cute?" " class="inset ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background-position: -'+$(this).width()/3+'px -'+$(this).height()/3+'px; background-image:url(' + $(this).attr('src') + ');" />';
});
$(this).css("visibility","hidden");
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
</script>
</div><!--wrapper-->
<div id = "footer" ><ul><li><a href="mailto:[email protected]">W. Ryan Nestor :: 2012</a> <li> with <a href = "http://isotope.metafizzy.co/">Isotope</a></li>and <li> <a href = "http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">PrettyPhoto</a></li></div>
</body>
</html>