Skip to content

Instantly share code, notes, and snippets.

@nicholashagen

nicholashagen/PhotoGallery

Created January 7, 2012 07:04
Show Gist options
  • Save nicholashagen/1574062 to your computer and use it in GitHub Desktop.
Save nicholashagen/1574062 to your computer and use it in GitHub Desktop.
Download ZIP
Photo Gallery Example
Raw
PhotoGallery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Gallery Example</title>
<style type="text/css">
body { background-color: black; }
.event
{
width: 300px;
margin: auto;
padding-top: 20px;
}
.event h3
{
background-color: white;
color: black;
font-size: 16px;
text-align: center;
padding: 5px;
height: 20px;
line-height: 20px;
}
.event .container
{
-webkit-perspective: 200;
-webkit-perspective-origin: 50% 50%;
}
.event .stage
{
-webkit-transform-style: preserve-3d;
}
.event .photos
{
position: relative;
top: 70px;
margin: 0 auto;
height: 110px;
width: 100px;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(155deg);
}
.event .photo
{
position: absolute;
height: 110px;
width: 115px;
-webkit-transition: -webkit-transform 2s;
-webkit-backface-visibility: visible;
}
.event .photo img
{
width: 113px;
height: 90px;
border: 2px solid white;
-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(white));
}
.tips
{
color: white;
margin: auto;
width: 300px;
font-size: 11px;
padding-top: 160px;
}
.event .photo0 { -webkit-transform: rotateY(0deg) translateX(-60px); }
.event .photo1 { -webkit-transform: rotateY(12deg) translateX(-60px); }
.event .photo2 { -webkit-transform: rotateY(24deg) translateX(-60px); }
.event .photo3 { -webkit-transform: rotateY(36deg) translateX(-60px); }
.event .photo4 { -webkit-transform: rotateY(48deg) translateX(-60px); }
.event .photo5 { -webkit-transform: rotateY(60deg) translateX(-60px); }
.event .photo6 { -webkit-transform: rotateY(72deg) translateX(-60px); }
.event .photo7 { -webkit-transform: rotateY(84deg) translateX(-60px); }
.event .photo8 { -webkit-transform: rotateY(96deg) translateX(-60px); }
.event .photo9 { -webkit-transform: rotateY(108deg) translateX(-60px); }
.event .photo10 { -webkit-transform: rotateY(120deg) translateX(-60px); }
.event .photo11 { -webkit-transform: rotateY(132deg) translateX(-60px); }
.event .photo12 { -webkit-transform: rotateY(144deg) translateX(-60px); }
.event .photo13 { -webkit-transform: rotateY(156deg) translateX(-60px); }
.event .photo14 { -webkit-transform: rotateY(168deg) translateX(-60px); }
.event .photo15 { -webkit-transform: rotateY(180deg) translateX(-60px); }
.event .photo16 { -webkit-transform: rotateY(192deg) translateX(-60px); }
.event .photo17 { -webkit-transform: rotateY(204deg) translateX(-60px); }
.event .photo18 { -webkit-transform: rotateY(216deg) translateX(-60px); }
.event .photo19 { -webkit-transform: rotateY(228deg) translateX(-60px); }
</style>
<script type="text/javascript">
var index = 19, photosY = 155;
function advance(direction) {
if (direction > 0) { turnLeft(); }
else if (direction < 0) { turnRight(); }
else { turnLeft(); }
}
function turnLeft() {
var lindex = index + 1;
if (lindex >= 20) { lindex = 0; }
var rindex = lindex + 1;
if (rindex >= 20) { rindex = 0; }
var pindex = index;
var photos = document.getElementsByClassName("photos")[0];
var lphoto = document.getElementsByClassName("photo" + lindex)[0];
var rphoto = document.getElementsByClassName("photo" + rindex)[0];
var pphoto = document.getElementsByClassName("photo" + pindex)[0];
if (typeof lphoto.rotation == "undefined") {
lphoto.rotation = (lindex * 12);
}
lphoto.rotation -= 120;
lphoto.onclick = function() { turnRight(); }
lphoto.style.WebkitTransform = "rotateY(" + lphoto.rotation + "deg) translateX(-60px)";
rphoto.onclick = function() { turnLeft(); }
pphoto.onclick = function() { }
photosY -= 12;
photos.style.WebkitTransform = "rotateY(" + photosY + "deg)";
index++;
if (index >= 20) { index = 0; }
}
function turnRight() {
var lindex = index - 1;
if (lindex < 0) { lindex = 19; }
var rindex = lindex + 1;
if (rindex >= 20) { rindex = 0; }
var pindex = index + 1;
if (pindex >= 20) { pindex = 0; }
var photos = document.getElementsByClassName("photos")[0];
var lphoto = document.getElementsByClassName("photo" + lindex)[0];
var rphoto = document.getElementsByClassName("photo" + rindex)[0];
var pphoto = document.getElementsByClassName("photo" + pindex)[0];
if (typeof rphoto.rotation == "undefined") {
rphoto.rotation = (rindex * 12);
}
rphoto.rotation += 120;
rphoto.onclick = function() { turnLeft(); }
rphoto.style.WebkitTransform = "rotateY(" + rphoto.rotation + "deg) translateX(-60px)";
lphoto.onclick = function() { turnRight(); }
pphoto.onclick = function() { }
photosY += 12;
photos.style.WebkitTransform = "rotateY(" + photosY + "deg)";
index--;
if (index < 0) { index = 19; }
}
</script>
</head>
<body>
<div class="event">
<h3 onclick="advance();">Click to Advance</h3>
<div class="container">
<div class="stage">
<div class="photos">
<div class="photo photo0" onclick="turnLeft();"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThHbi0QE9UcrkiBiAUPK18cRMh1xmFYXUjUUmhuNZwSO1wbFmEApGH7kowyg" /></div>
<div class="photo photo1"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDWlHawbnCKhURDT5jNln9CMhDHIKjIHugsQ10ppAlgNBfmBY-HMR6YA77Bw" /></div>
<div class="photo photo2"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTkL3Mj0tiI-GvtN8Z0v0UI9In54wVlfnm4JRbaaWDsEofoCsC3" /></div>
<div class="photo photo3"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQpVJE4P_kFKrX3_yfHwh7LvVMCNmNo7BlFqWacwuNXM_PNnWN0Nw" /></div>
<div class="photo photo4"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSEeRUM-27KLasKyC3KnkEY3Bf-gImeRQCwAIl9l0QNa1HFHyI0aFPG3XfK" /></div>
<div class="photo photo5"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRDrkfns19JCD3CtJZSPuVBSX8bJkXQZSO0P3PAQZlh8ujlC3RRAA" /></div>
<div class="photo photo6"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSQ_FjeuNmmND2WgPbV8RiEGqTKNNZrhojySo4sfYaq4nqAhn3jlQ" /></div>
<div class="photo photo7"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ7yTPPz3pVpjpq7RJX61DluVWSl2a8caaFz0-dugZXTiHp6s9bZg" /></div>
<div class="photo photo8"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQqC5vnHRM2PbM8zd8orq1lr8_vTIv6WG1YPWBE7MOrR-qPNu29bQ" /></div>
<div class="photo photo9"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSXJjHmfA6y0NK5U9tK57oz3AJv55kSwwYnwm_YZfDG9GeYXhfy" /></div>
<div class="photo photo10"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQzY9tHi5er59Ama3BfjNTP8FoTGht9hfvvhgVE7_bn9BaDVYT7wg" /></div>
<div class="photo photo11"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRO_wHP61dSAogT9dX1iVKN0h_4AAmNsfYkFCk0ZRJLlIoll7ia" /></div>
<div class="photo photo12"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQvZDlcx4SZJFdlDaAOtv0K9UOomyMMOaV7eCsCuookIwBeaLoJ" /></div>
<div class="photo photo13"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ0MX7I4nlHzwHKMlo4vlhCDdkzH9o_3CwejLrSWqERVW2RO5kP" /></div>
<div class="photo photo14"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRQ8gNvyw_AzHqIK_c8XtjIhieldM9Ezo3ObdeK1flhzUvR-eJi" /></div>
<div class="photo photo15"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRQAs2yps6dTZUqLYPL972UTDvaEB-VikTXGNNVvSmTFjbkIo5q" /></div>
<div class="photo photo16"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSIz0hFVM_G9gxya4LAww0Cw-OAeBDSEYhMVGZzemC7sFUwZVXnww" /></div>
<div class="photo photo17"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSmO1vAeGFSb2njnTh3AH-9Thtf3isiwVhPxILrUQW9UHEk5MIy" /></div>
<div class="photo photo18"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcStW5W72v2WRH3NhJIj03zIy-7Ry_c8XVbOajNFRgUTViZnR1YF4A" /></div>
<div class="photo photo19" onclick="turnRight();"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTie3UZGJs7OE-JcmD6Oj2fDouAc9H3h92rpdLhcbYcuB099Z2F" /></div>
</div>
</div>
</div>
</div>
<div class="tips">
Compatible with Chrome and Safari for CSS3 3D Transforms.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment