-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
85 lines (65 loc) · 4.31 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<h1>Filmstrip.js</h1>
<p>jQuery filmstrip carousel that supports images of varying widths and height. Fully responsive.</p>
<p>images courtesy of <a href="http://placekitten.com/" target="_blank">placekitten.com</a></p>
<p><a href="https://github.com/luetkemj/filmstrip/commits?author=luetkemj" target="_blank">github repo</a></p>
<div id="filmstrip-viewport">
<div id="filmstrip-wrapper" class="clearfix">
<img src="http://placekitten.com/700/600"/>
<img src="http://placekitten.com/700/800"/>
<img src="http://placekitten.com/770/500"/>
<img src="http://placekitten.com/800/600"/>
<img src="http://placekitten.com/540/700"/>
<img src="http://placekitten.com/700/600"/>
<img src="http://placekitten.com/1700/600"/>
<img src="http://placekitten.com/1700/800"/>
<img src="http://placekitten.com/770/500"/>
<img src="http://placekitten.com/800/600"/>
<img src="http://placekitten.com/1240/700"/>
<img src="http://placekitten.com/700/600"/>
</div>
</div>
<h2>The Problem</h2>
<p>I needed a filmstrip style carousel that could support images of varying widths. This is fairly easy to solve if you are working with a static site but the carousel was required to be responsive both horizontally and vertically.</p>
<p>Supporting responsive width while maintaining a flush edge on the top and bottom proved problematic. Portrait images would retain a very tall vertical while landscape would become extremely short.</p>
<h3>Example</h3>
<p>Image of flush filmstrip</p>
<img src="images/filmstrip-demo1.png"/>
<p>Image of same filmstrip when the viewport becomes narrower. Notice how the landscape image proportionally resizes to fit the viewport while the portrait image does not. Why would it? The width which is how this is triggered with CSS is not narrower than the viewport. Unfortunately it creates a nasty rag.</p>
<img src="images/filmstrip-demo2.png"/>
<h2>The Solution</h2>
<p>To solve this problem I created a jQuery script that filters through all the images and reduces them proportionally to a max-width of the viewport. It then filters through again and proportionally reduces the image to the height of the shortest image.</p>
<p>This allows the carousel to remain flush at the top and bottom and retain a filmstrip appearance while also being fully responsive. Images should not be wider or taller than the window or viewport</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/filmstrip.js"></script>
<script>
$(window).load(function () {
var filmstrip = new FilmStrip( $('#filmstrip-wrapper'), $('#filmstrip-viewport') );
});
$(window).resize(function() {
var filmstrip = new FilmStrip( $('#filmstrip-wrapper'), $('#filmstrip-viewport') );
});
</script>
</body>
</html>