-
Notifications
You must be signed in to change notification settings - Fork 0
/
slideshow3d.html
129 lines (113 loc) · 4.56 KB
/
slideshow3d.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
123
124
125
126
127
128
129
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Photo Slideshow using CSS3 3D Transforms | Marc Neuwirth</title>
<meta name="description" content="An example photo slideshow using css3 3d transformations">
<meta name="author" content="Marc Neuwirth">
<script src="modernizr-1.7.min.js"></script>
<link rel="stylesheet" href="slideshow3d.css" type="text/css" media="screen" />
</head>
<body>
<h1>Photo Slideshow using <strong>CSS3 3D Transforms</strong></h1>
<section id="container">
<section id="controls">
<label for="search">Search Term</label><input id="search" name="search" type="text" value="puppy"/>
<label for="per_page">Number of Pictures</label><input id="per_page" name="per_page" type="text" value="16"/>
<label for="type">Slideshow Type</label>
<select id="type" name="type">
<option selected>Ring</option>
<option>Vertical</option>
<option>Cylinder</option>
<option>Tall Cylinder</option>
<option>Ribbon</option>
<option>Double Helix</option>
<option>Coil</option>
<option>Big Coil</option>
</select>
<input type="button" id="submit" value="Change" />
<a href="http://marcneuwirth.com/blog/2011/04/05/creating-a-slideshow-using-css3-3d-transforms/" title="Blog Post Part 1">Part 1</a>
<a href="http://marcneuwirth.com/blog/2011/04/05/slideshow-with-css-3d-transforms-part-2-playing-with-shapes/" title="Blog Post Part 2">Part 2</a>
</section>
<section id="stage">
<ul id="shape"></ul>
</section>
</section>
<section id="no-support">
<img src="http://marcneuwirth.com/wp-content/uploads/2011/04/slideshow3d.jpg" alt="3D Slideshow using CSS3 Transforms" title="slideshow3d" width="600" height="215"/>
<p>Unfortunately, your browser doesn't support 3D CSS Transforms yet.</p>
<p>If you are using Chrome, try going opening 'about:flags' in the address bar and enabling 'GPU Accelerated Compositing'</p>
</section>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="slideshow3d.js"></script>
<script>
function setup(options) {
var apiKey = '8e7f6c451992a0638f95d22e46a95eb1',
search = escape($('#search').val()),
per_page = parseInt($('#per_page').val());
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=' + apiKey + '&text=' + search + '&format=json&sort=interestingness-desc&page=2&per_page=' + per_page + '&jsoncallback=?', function (data) {
var length = data.photos.photo.length;
while (length--) {
var item = data.photos.photo[length];
var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var li = $('<li />');
var img = $('<img />').attr('src', photoURL);
li.append(img);
li.appendTo('#shape');
}
options.type = $('#type').val();
if(options.type == 'Vertical'){
$('#container').css('-webkit-perspective-origin', '100% 20%');
}
else {
$('#container').css('-webkit-perspective-origin', '50% 20%');
}
slideshow3d.init(options);
});
}
$(document).ready(function () {
//Fix for weird false negative on Safari
if(!Modernizr.csstransforms3d && $('html').css('-webkit-perspective') == 'none'){
$('html').removeClass('no-csstransforms3d').addClass('csstransforms3d');
}
var options = {
container: '#shape',
stage: '#stage'
};
setup(options);
$('#submit').click(function () {
slideshow3d.reset();
setup(options);
});
$('body').bind('keypress', function (e) {
var code = e.keyCode || e.which;
//enter
if(code == 13) {
slideshow3d.reset();
setup(options);
}
});
$(document).keydown(function(event) {
//left arrow
if(event.keyCode === 37) {
slideshow3d.prev();
}
//right arrow
else if(event.keyCode === 39) {
slideshow3d.next();
}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9077914-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>