tessarray/example.html at master · podlebar/tessarray · GitHub

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
123
124
125
126
127
128
129
130
131
<html>
	<div style="margin : auto; text-align: center">
	  <h1>Tessarray<h1>
	</div>
	<button class="selector" data-category="">all</button>
	<button class="selector" data-category="reverse">reverse-all</button>
	<button class="selector" data-category="nature">nature</button>
	<button class="selector" data-category="buildings">buildings</button>
	<button class="selector" data-category="people">people</button>
	<span style="float: right">Try resizing the window!</span>

	<!-- Provide aspect ratio or height and width through data attributes, or don't specify any at all -->
	<!-- Provide the aspect ratios either way for better performance -->
	<div class="container">
<!-- 	  <div class="box reverse">
	    <img class="image" src="./images/151109151843-waf-interlace-sharp-1-exlarge-169.jpg"/>
	  </div>
	  <div class="box reverse">
	    <img class="image" src="./images/1605-Architecture-Creativity-wHY-Louisville-Speed-Art-Museum-01.jpg"/>
	  </div>
	  <div class="box reverse">
	    <img class="image" src="./images/empty-opponent.png"/>
	  </div>
	  <div class="box reverse">
	    <img class="image" src="./images/great-building-watercolor.jpg"/>
	  </div>
	  <div class="box reverse">
	    <img class="image" src="./images/monograph-architecture-website-template-mezzanine-profile-01-a.jpg"/>
	  </div> -->
		<!-- data-height="1080" data-width="1600" -->
	  <div class="box reverse people" data-reverse="10" data-aspect-ratio="0.675">
	    <img class="image" src="https://source.unsplash.com/category/people/1080x1600"/>
	  </div>
	  <!-- data-height="720" data-width="1080" data-aspect-ratio="0.66666666666" -->
	  <div class="box reverse nature" data-reverse="9" data-height="720" data-width="1080">
	    <img class="image" src="https://source.unsplash.com/category/nature/720x1080"/>
	  </div>
	  <!-- data-height="900" data-width="900" data-aspect-ratio="1" -->
	  <div class="box reverse nature" data-reverse="8" data-aspect-ratio="1">
	    <img class="image" src="https://source.unsplash.com/category/nature/900x900"/>
	  </div>
	  <!-- data-height="1600" data-width="900" data-aspect-ratio="1.77777777778"-->
	  <div class="box reverse people" data-reverse="7" data-aspect-ratio="1.77777777778">
	    <img class="image" src="https://source.unsplash.com/category/people/1600x900"/>
	  </div>
	  <!-- data-height="800" data-width="600" data-aspect-ratio="1.77778"-->
	  <div class="box reverse nature" data-reverse="6" data-aspect-ratio="1.77778">
	    <img class="image" src="https://source.unsplash.com/category/nature/800x600"/>
	  </div>
	  <!-- data-height="600" data-width="600" data-aspect-ratio="1"-->
	  <div class="box reverse buildings" data-reverse="5" data-aspect-ratio="1">
	    <img class="image" src="https://source.unsplash.com/category/buildings/600x600"/>
	  </div>
	  <!-- data-height="900" data-width="900" data-aspect-ratio="1"-->
	  <div class="box reverse people" data-reverse="4" data-aspect-ratio="1">
	    <img class="image" src="https://source.unsplash.com/category/people/900x900"/>
	  </div>
	  <!-- data-height="800" data-width="600" data-aspect-ratio="1.77778"-->
	  <div class="box reverse buildings" data-reverse="3" data-aspect-ratio="1.77778">
	    <img class="image" src="https://source.unsplash.com/category/buildings/800x600"/>
	  </div>
	  <!-- data-height="1080" data-width="1600" data-aspect-ratio="0.675"-->
	  <div class="box reverse buildings" data-reverse="2" data-aspect-ratio="0.675">
	    <img class="image" src="https://source.unsplash.com/category/buildings/1080x1600"/>
	  </div>
	  <!-- data-height="1200" data-width="900" data-aspect-ratio="1.77778"-->
	  <div class="box reverse nature" data-reverse="1" data-aspect-ratio="1.77778">
	    <img class="image" src="https://source.unsplash.com/category/nature/1200x900"/>
	  </div>
	</div>

	<style>
		/* This is necessary for images to render properly */
		.image {
		  height: 100%;
		  width: 100%;
		}

		.image:hover {
			opacity: 0.5;
		}

		/* Necessary if containerClass is not specified */
		.container {
		  position: relative;
		}

		/* Use this if images are appearing before rendering correctly */
		.container {
		  opacity: 0;
		}

		/* Use this to specify default container height before images load */
/*		.container {
			height: 500px;
		}*/

		/* Use this to create a background for images before they render
		Use if container opacity is not transitioning in */
		.box {
			background-color: grey;
		}
	</style>

	<script src='tessarray.js'></script>
	<script>
		setTimeout(function() {
			var tessarray = new Tessarray("box", {
				// comment-out to see functionality without containerClass and selectorClass
				containerClass: "container",
				selectorClass: "selector",

				// Comment-in lines to see how options effect the render
				// duration: 650,
				// timingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
				// imageClass: "imageClass",
				// delay: 50,
				// defaultCategory: "people",
				// containerTransition: false,
				flickr: {
					// targetRowHeight: 300,
					// targetRowHeightTolerance: 0.15,
					// maxNumRows: 2,
					containerPadding: 40
				}
			});
		}, 5000);
		// tessarray.options.flickr.targetRowHeight = 500;
		// tessarray.renderBoxes();
	</script>
</html>