Skip to content

Instantly share code, notes, and snippets.

@acspike

acspike/arrows.html

Created June 10, 2011 22:25
Show Gist options
  • Save acspike/1019907 to your computer and use it in GitHub Desktop.
Save acspike/1019907 to your computer and use it in GitHub Desktop.
Download ZIP
team photo slideshow kiosk mockup
Raw
arrows.html
<html>
<head>
<style type="text/css">
div#container {
top: 100px;
margin: auto;
position:relative;
width: 800px;
height: 650px;
text-align: center;
}
div#container div {
width:0;
height:0;
border-style:solid;
border-width:50px;
position: absolute;
}
#arrow-left {
border-color: transparent #666666 transparent transparent;
top: 300px;
left: -100px;
}
#arrow-up {
border-color: transparent transparent #666666 transparent;
top: -100px;
left: 350px;
}
#arrow-down {
border-color: #666666 transparent transparent transparent;
bottom: -100px;
left: 350px;
}
#arrow-right {
border-color: transparent transparent transparent #666666;
top: 300px;
right: -100px;
}
#arrow-left.on {
border-color: transparent #ff0000 transparent transparent;
}
#arrow-up.on {
border-color: transparent transparent #ff0000 transparent;
}
#arrow-down.on {
border-color: #ff0000 transparent transparent transparent;
}
#arrow-right.on {
border-color: transparent transparent transparent #ff0000;
}
div#container div#crosshair {
display: none;
border: 1px solid red;
width: 400px;
height: 350px;
top: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var photos = [
[
{img:'1.jpg',title:"2000 Men's Hockey",caption:"Willie Sayers, Walter Heins, Barbara Eddings, Earlene Wikoff, Bonnie Pascual, Odessa Dedrick, Clayton Depaola, Marylou Stumpff, Travis Struble, Lilia Bussard, Terry Youmans, Lakisha Cayetano"},
{img:'2.jpg',title:"2000 Men's Badminton",caption:"Kurt Parm, Barbara Eddings, Chandra Gehling, Jamie Schmeling, Loraine Vanaman, Lonnie Fett, Christopher Essex, Randy Cisneros, Marylou Stumpff, Earlene Wikoff, Carlos Tolbert, Amanda Singleton"},
{img:'3.jpg',title:"2000 Men's Tennis",caption:"Jamie Doles, Patsy Roth, Candice Stockman, Bonnie Pascual, Mathew Hersman, Marylou Stumpff, Diane Howe, Christopher Essex, Allan Yousef, Gay Retana, Sofia Bowerman, Ida Segura"},
{img:'4.jpg',title:"2000 Men's Golf",caption:"Roslyn Ewen, Randy Cisneros, Lilia Bussard, Lois Olsen, Earlene Wikoff, Terry Youmans, Allan Sin, Stella Blessing, Nannie Muma, Candice Stockman, Tyrone Luft, Benjamin Villalpando"},
{img:'5.jpg',title:"2000 Women's Fencing",caption:"Darryl Clink, Ryan Windham, Rose Byrum, Sofia Bowerman, Bernice Mccreary, Melody Bivins, Lonnie Fett, Jamie Doles, Christopher Essex, Steve Dempsey, Lilia Bussard, Marylou Greenough"},
{img:'6.jpg',title:"2000 Women's Track",caption:"Lonnie Radigan, Earl Hayman, Eric Suarez, Carmella Zabel, Darren Clemans, Esmeralda Rehder, William Arceneaux, Toni Goldstein, Gay Retana, Esmeralda Foye, Leticia Feaster, Allan Yousef"},
{img:'7.jpg',title:"2000 Women's Football",caption:"Wayne Delgadillo, Ronald Stclair, Julie Dewitt, Olga Leyva, Samuel Whetstone, Dianne Bergquist, Earlene Wikoff, Eric Herrin, Mattie Vanover, Hillary Vanauken, Lonnie Fett, Rae Luoma"},
{img:'8.jpg',title:"2000 Women's Softball",caption:"Carlos Tolbert, Carmella Zabel, Saundra Dallaire, Earl Hayman, Darryl Awe, Travis Struble, Katy Yoakum, Earlene Wikoff, Bonnie Pascual, Chandra Kelling, Darryl Clink, Bernice Mccreary"},
],
[
{img:'2.jpg',title:"2001 Men's Hockey",caption:"Toni Goldstein, Sara Burnham, Mattie Dang, Leticia Feaster, Dianne Bergquist, Rose Byrum, Allison Grabowski, Stella Blessing, Serena Dupler, Bernice Mccreary, Gay Retana, Darryl Awe"},
{img:'3.jpg',title:"2001 Men's Badminton",caption:"Julie Dewitt, Ryan Windham, Cody Langhorne, Leticia Feaster, Earlene Wikoff, Anthony Allen, Ted Haithcock, Marylou Stumpff, Bernice Mccreary, Eric Herrin, Loraine Vanaman, Gregory Shick"},
{img:'4.jpg',title:"2001 Men's Tennis",caption:"Benjamin Villalpando, Stanley Corn, Serena Dupler, Marylou Stumpff, Esmeralda Foye, Nannie Muma, Wayne Delgadillo, Gregory Shick, Sara Burnham, Chandra Bloss, Louise Fancher, Mattie Vanover"},
{img:'5.jpg',title:"2001 Men's Golf",caption:"Chandra Kelling, Samantha Ocasio, Russell Kinney, Christopher Essex, Max Deems, Julie Dewitt, Gay Retana, Mattie Dang, Jamie Schmeling, Kelly Weedman, Ryan Windham, Benjamin Villalpando"},
{img:'6.jpg',title:"2001 Women's Fencing",caption:"Jamie Schmeling, Sofia Bowerman, Bonnie Pascual, Fernando Bladen, Charles Wieland, Darryl Clink, Russell Kinney, Michael Wick, Willie Sayers, Milagros Reynaga, Florence Ocasio, Nina Wilhite"},
{img:'7.jpg',title:"2001 Women's Track",caption:"Marylou Stumpff, Sue Mcneely, Milagros Reynaga, Clarence Raynor, Benita Arai, Florence Ocasio, Serena Dupler, Jamie Doles, Darryl Beazley, Eric Herrin, Sara Burnham, Jamie Rippe"},
{img:'8.jpg',title:"2001 Women's Football",caption:"Darryl Awe, Walter Heins, Jamie Doles, Darryl Beazley, Dona Shankles, Erica Kilpatrick, Bryan Winton, Judy Ehrlich, Benjamin Villalpando, Candice Stockman, Fernando Bladen, Nicole Odle"},
{img:'1.jpg',title:"2001 Women's Softball",caption:"Travis Struble, Ronald Stclair, Lonnie Fett, Erik Cruce, Esmeralda Foye, Lilia Bussard, Olga Leyva, Erica Kilpatrick, Samuel Whetstone, Allan Sin, Rae Luoma, Christopher Essex"},
],
[
{img:'3.jpg',title:"2002 Men's Hockey",caption:"Neil Jepsen, Mattie Vanover, Candice Stockman, Russell Kinney, Darryl Clink, Rae Luoma, Serena Dupler, Lonnie Fett, Bryan Winton, Leticia Feaster, Benjamin Villalpando, Jason Roth"},
{img:'4.jpg',title:"2002 Men's Badminton",caption:"Lonnie Radigan, Neil Jepsen, Stanley Corn, Fernando Bladen, Barbara Eddings, Mattie Vanover, Norma Farr, Lonnie Fett, Eve Ohearn, Eric Suarez, Mathew Hersman, Eric Herrin"},
{img:'5.jpg',title:"2002 Men's Tennis",caption:"Travis Struble, Earlene Wikoff, Sue Mcneely, Lonnie Fett, Gregory Shick, Toni Goldstein, Mattie Vanover, Carlos Tolbert, Willie Sayers, Rose Byrum, Julie Dewitt, Bryan Winton"},
{img:'6.jpg',title:"2002 Men's Golf",caption:"Sara Burnham, Katy Yoakum, Neil Jepsen, Max Deems, Candice Stockman, Bryan Winton, Cody Langhorne, Dianne Bergquist, Fernando Bladen, Willie Sayers, Sean Dupuis, Eve Ohearn"},
{img:'7.jpg',title:"2002 Women's Fencing",caption:"Lilia Bussard, Stella Blessing, Lonnie Fett, Stanley Corn, Marylou Stumpff, Serena Dupler, Christopher Essex, Judy Ehrlich, Leticia Feaster, Kurt Duchesne, Dianne Bergquist, Candice Stockman"},
{img:'8.jpg',title:"2002 Women's Track",caption:"Winkelman, Eve Ohearn, Julie Dewitt, Sofia Bowerman, Chandra Kelling, Mathew Hersman, Earlene Wikoff, Odessa Dedrick, Mattie Dang, Allison Grabowski, Lonnie Radigan, Allan Yousef"},
{img:'1.jpg',title:"2002 Women's Football",caption:"Ronald Stclair, Toni Goldstein, Lakisha Cayetano, Gay Retana, Eve Ohearn, Jose Kaufmann, Erica Kilpatrick, Chandra Gehling, Sue Mcneely, William Arceneaux, Anthony Allen, Jason Roth"},
{img:'2.jpg',title:"2002 Women's Softball",caption:"William Arceneaux, Lonnie Fett, Earl Hayman, Marylou Greenough, Nina Wilhite, Olga Leyva, Amanda Singleton, Ted Haithcock, Darren Clemans, Eric Herrin, Barbara Eddings, Norman Pendergrass"},
],
[
{img:'4.jpg',title:"2003 Men's Hockey",caption:"Marylou Greenough, Kurt Parm, Louise Fancher, Marylou Stumpff, Nina Wilhite, Rae Luoma, Rose Byrum, Ted Haithcock, Stanley Corn, Saundra Dallaire, Charles Wieland, Amanda Singleton"},
{img:'5.jpg',title:"2003 Men's Badminton",caption:"Marylou Greenough, Julie Dewitt, Florence Ocasio, Rose Byrum, Darryl Beazley, Stanley Corn, Annabelle Diana, Walter Heins, Louise Fancher, Serena Dupler, Diane Howe, Mathew Hersman"},
{img:'6.jpg',title:"2003 Men's Tennis",caption:"Lonnie Fett, Toni Goldstein, Eve Ohearn, Nicole Odle, Julie Dewitt, Ronald Stclair, Christopher Essex, Darryl Clink, Tameka Whitesides, Chandra Kelling, Darryl Beazley, Sofia Bowerman"},
{img:'7.jpg',title:"2003 Men's Golf",caption:"Mathew Hersman, Erica Kilpatrick, Benjamin Villalpando, Tameka Whitesides, Eric Suarez, Stanley Corn, Bryan Winton, Diane Howe, Tyrone Luft, Melody Bivins, Candice Stockman, Hillary Vanauken"},
{img:'8.jpg',title:"2003 Women's Fencing",caption:"Dona Shankles, Jason Roth, Barbara Eddings, Winkelman, Michael Wick, Odessa Dedrick, Tyrone Luft, Kurt Parm, Hillary Vanauken, Cody Langhorne, Benita Arai, Fernando Bladen"},
{img:'1.jpg',title:"2003 Women's Track",caption:"Sue Mcneely, Mattie Dang, Jamie Rippe, Earlene Wikoff, Carlos Tolbert, Anthony Allen, Florence Ocasio, Allan Sin, Christopher Essex, Darryl Nalls, Erik Cruce, Randy Cisneros"},
{img:'2.jpg',title:"2003 Women's Football",caption:"Olga Leyva, Hillary Vanauken, Jamie Doles, Darryl Clink, Rosalinda Piland, Benjamin Villalpando, Darryl Houchin, Chandra Gehling, Russell Kinney, Erik Cruce, Gregory Shick, Allan Yousef"},
{img:'3.jpg',title:"2003 Women's Softball",caption:"Russell Kinney, William Arceneaux, Hillary Vanauken, Mattie Vanover, Winkelman, Darryl Clink, Olga Leyva, Annabelle Diana, Wayne Delgadillo, Ted Haithcock, Chandra Gehling, Lilia Bussard"},
],
];
var year = 0;
var sport = 0;
var setphoto = function(y, s) {
var photo = photos[y][s];
$('#container h1').text(photo.title);
$('#container img').attr('src',photo.img);
$('#container p').text(photo.caption);
year = y;
sport = s;
}
var movephoto = function(y, s) {
var to_y = (photos.length + year + y) % photos.length;
var to_s = (photos[to_y].length + sport + s) % photos[to_y].length;
setphoto(to_y, to_s);
}
var timer = null;
var interval = 5000;
var timeout = 10000;
var myclear = function() {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
}
//wrapper for called from interactive code to prevent multiple entrances into photoshow loop
var mytimer = function(f,time) {
if (timer===null) {
timer = setTimeout(f,time);
}
}
var photoshow = function() {
var to_s = sport + 1;
var to_y = year;
if (to_s >= photos[year].length) {
to_s = 0;
to_y = (photos.length + year + 1) % photos.length;
}
setphoto(to_y, to_s);
timer = setTimeout(photoshow,interval);
}
setphoto(year, sport);
mytimer(photoshow,interval);
$(document).keydown(function(e){
switch(e.keyCode) {
case 37:
myclear();
$('#arrow-left').addClass('on');
movephoto(0,-1);
break;
case 38:
myclear();
$('#arrow-up').addClass('on');
movephoto(-1,0);
break;
case 39:
myclear();
$('#arrow-right').addClass('on');
movephoto(0,1);
break;
case 40:
myclear();
$('#arrow-down').addClass('on');
movephoto(1,0);
break;
default:
break;
};
});
$(document).keyup(function(e){
switch(e.keyCode) {
case 37:
$('#arrow-left').removeClass('on');
mytimer(photoshow,timeout);
break;
case 38:
$('#arrow-up').removeClass('on');
mytimer(photoshow,timeout);
break;
case 39:
$('#arrow-right').removeClass('on');
mytimer(photoshow,timeout);
break;
case 40:
$('#arrow-down').removeClass('on');
mytimer(photoshow,timeout);
break;
default:
break;
};
});
});
</script>
</head>
<body>
<div id="container">
<h1></h1>
<img src="1.jpg" />
<p></p>
<div id="arrow-left"></div>
<div id="arrow-up"></div>
<div id="arrow-down"></div>
<div id="arrow-right"></div>
<div id="crosshair"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment