Skip to content

Instantly share code, notes, and snippets.

@susanBuck
Created September 28, 2011 02:35
Show Gist options
  • Save susanBuck/1246848 to your computer and use it in GitHub Desktop.
Save susanBuck/1246848 to your computer and use it in GitHub Desktop.
rewrote slide function so that it works with jquery instead of mootools
<!DOCTYPE html>
<head>
<title>Tom McQuaid - Designer &amp; Illustrator</title>
<meta name="description" content="An online portfolio of creative work from Tom McQuaid, a designer working in Philadelphia, PA." />
<link rel="stylesheet" type="text/css" href="../../styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
/*-- Smooth Scroll --*/
function slide(whichDiv,amount) {
$('#' + whichDiv).animate({left: amount}, 500);
}
/*-- Fancy Box --*/
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script>
</head>
<body>
<div id='container'>
<div class='homepage'>
<!-- work -->
<div class='worklink'>
<a href='javascript:void(0)' onClick="slide('container','-1300')">
<img src="closedwork.png" style="display:none">
<img height='35' src="openwork.png" onMouseOver="this.src='closedwork.png'" onMouseOut="this.src='openwork.png'">
</a>
</div>
<!-- about -->
<div class='aboutlink'>
<a href='javascript:void(0)' onClick="slide('container','-2600')">
<img src="closedabout.png" style="display:none">
<img height='35' src="openabout.png" onMouseOver="this.src='closedabout.png'" onMouseOut="this.src='openabout.png'">
</a>
</div>
<img src='background.png' width='1000'>
</div>
<div class='work'>
<div class='leftarrows'>
<a href='javascript:void(0)' onClick="slide('container','0')" title='home'>
<img src="arrowsleftsolid.png" style="display:none">
<img height='35' src="arrowsleftline.png" onMouseOver="this.src='arrowsleftsolid.png'" onMouseOut="this.src='arrowsleftline.png'">
</a>
</div>
<div class='rightarrows'>
<a href='javascript:void(0)' onClick="slide('container','-2600')" title='about'>
<img src="arrowsrightsolid.png" style="display:none">
<img height='35' src="arrowsrightline.png" onMouseOver="this.src='arrowsrightsolid.png'" onMouseOut="this.src='arrowsrightline.png'">
</a>
</div>
<div class='images'>
<a class='fancyImg' href='LittleShopPosterweb.jpg'>
<img id='littleshop' src='littleshopsquarecolor.png' width='100'>
</a>
</div>
</div>
<div class='about'>
<div class='leftarrows'>
<a hhref='javascript:void(0)' onClick="slide('container','-1300')" title='work'>
<img src="arrowsleftsolid.png" style="display:none">
<img height='35' src="arrowsleftline.png" onMouseOver="this.src='arrowsleftsolid.png'" onMouseOut="this.src='arrowsleftline.png'">
</a>
</div>
<img id='upsidedownhead' src='background%202.png'>
<p class='AboutText' id='hi'> Hi! </p>
<p class='AboutText' id='name'> My name's Tom,</p>
<p class='AboutText' id='name'> and I'm a design student at the </p>
<p class='AboutText' id='penn'> <a href='http://www.upenn.edu/' target='_blank'>University of Pennsylvania</a></p>
<p class='AboutText' id='philly'> in Philadelphia, PA.</p><br>
<p class='AboutText' id='link'> <a href='mailto:thomas.mcquaid@gmail.com'>Email Me!</a></p>
<p class='AboutText' id='link'> <a href='http://www.linkedin.com/pub/tom-mcquaid/30/a69/4b6' target='_blank'>Hire Me!</a></p>
<p class='AboutText' id='link'> <a href='http://twitter.com/#!/tomcquaid' target='_blank'>Tweet Me!</a></p>
<p class='AboutText' id='link'> <a href='http://www.facebook.com/tmcquaid' target='_blank'>Stalk Me!</a></p>
</div>
</div>
</body>
</html>
<!-- Localized -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment