Skip to content

Instantly share code, notes, and snippets.

@victusfate

victusfate/example of growing images with jquery .html

Created March 22, 2011 14:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save victusfate/881333 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save victusfate/881333 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example of growing images with jquery .html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>
post
</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
SetupGrowingDivs();
});
function SetupGrowingDivs() {
var scale = 1.5;
$('div.front').find('img').live({
mouseover: function() {
$(this).css('z-index', '5');
$(this).css('overflow', 'visible')
var old_width = parseInt($(this).css('width'));
var old_height = parseInt($(this).css('height'));
$(this).stop().animate({
width: old_width * scale,
height: old_height * scale,
left: 0,
top: 0,
},
200);
},
mouseleave: function() {
var old_width = parseInt($(this).css('width'));
var old_height = parseInt($(this).css('height'));
$(this).stop().animate({
width: old_width / scale,
height: old_height / scale,
left: 0,
top: 0
},
200);
$(this).css('overflow', 'hidden')
$(this).css('z-index', '1');
}
});
}
</script>
</head>
<body>
<div class="front">
<p style="text-align: center;">
<a href="http://www.victusspiritus.com/wp-content/uploads/2011/03/whys-poignant-guide-to-ruby.pdf"><img class="aligncenter size-full wp-image-8019" title="whys_poignant_guide_to_ruby_cover" src="http://www.victusspiritus.com/wp-content/uploads/2011/03/whys_poignant_guide_to_ruby_cover.png" alt="" width="505" height="709"></a>
</p>
</div>
<p>
It's been sitting there staring at me with its cold damning eyes for several months. Most books have a way of becoming invisible after I've skimmed a few chapters and moved on, but not this one. At quiet moments in the morning, as I scan empty tech news posts covering hollow product releases and dry funding stories, I can imagine the faint whisper of my ebook collection and among them a single shiny book stands out. I yield, today I'll read you. <b>Why should you read Why's Poignant Guide to Ruby?</b>
</p>
<div class="front">
<a href="http://www.victusspiritus.com/wp-content/uploads/2011/03/why_read_whys_poignant_guide_to_ruby.png"><img class="aligncenter size-full wp-image-8022" title="why_read_whys_poignant_guide_to_ruby" src="http://www.victusspiritus.com/wp-content/uploads/2011/03/why_read_whys_poignant_guide_to_ruby.png" alt="" width="550" height="527"></a>
</div>
<p>
I'm feeling a little under the weather today*, which is a great time to get some reading done. I came across this old pdf floating around on the bottom shelf of my iBooks bookshelf. It's called <a href="http://www.victusspiritus.com/wp-content/uploads/2011/03/whys-poignant-guide-to-ruby.pdf">Why's Poignant Guide to Ruby</a>, but after digging in to the book I think you'll agree it's much more than just another programming language doc. Why was on a mission with this book, and somewhere out past the floating bits of the interweb, I imagine he's still on that mission. Do yourself a favor and put this pdf into your dropbox ebooks folder, add it to every iBookshelf you can, and set it on every desktop of every public computer you happen across as a gift to the curious ones. Notes: *= Today's particular brand of illness, spaced out + tummy woes
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment