Skip to content

Instantly share code, notes, and snippets.

@smtlaissezfaire
Created March 2, 2011 20:31
Show Gist options
  • Save smtlaissezfaire/521d17e0377133725d9a to your computer and use it in GitHub Desktop.
Save smtlaissezfaire/521d17e0377133725d9a to your computer and use it in GitHub Desktop.
<!doctype html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="base.css" />
<link rel="stylesheet" type="text/css" href="non-retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 1)" />
<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
</head>
<body class="product">
<div id="container">
<section class="gallery">
<img src="{{ image_url }}" class="product" />
<a href="ideeli://productGallery"><img src="./magnifying-glass@2x.png" class="magnify" /></a>
{{# soldOut }}
<img src="./sold-out@2x.png" class="sold_out" />
{{/ soldOut }}
</section>
<section class="meta">
<p class="timer">Ends in <span id="end_time"></span></p>
<hgroup>
<h1>{{ title }}</h1>
<h3>
{{ colorName }}
</h3>
</hgroup>
<p class="price">{{ price }} <span class="discount">{{ discounted_price }}</span></p>
<aside class="return">
<p>Expected to ship around {{ shipment_date }}.</p>
<a href="ideeli://eligibleForReturn">Eligible for return.</a>
</aside>
</section>
<section class="size_selector">
<span class="button back"></span>
<span class="button forward"></span>
<ul id="sizes_slider">
{{{ sizesHtml }}}
</ul>
</section>
<section class="details">
<h2>DETAILS</h2>
<a href="ideeli://sizeChart" class="size_chart">Size Chart</a>
<section class="details_copy">
{{{ bodyHtml }}}
</section>
</section>
</div>
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var seed = Ideeli.Counter.parseSeconds({{ endsInSeconds }});
Ideeli.Counter.countDownTo(seed, "end_time");
};
$(document).ready(function() {
var $slider = $("#sizes_slider");
var $lastSliderChild = $("#sizes_slider li:last");
var slideWidth = 220;
var sliderContentWidth = $lastSliderChild.position()["left"] + $lastSliderChild.outerWidth();
var sliderCount = Math.floor(sliderContentWidth / slideWidth);
var currentSlide = 0;
$('.size_selector .button').click(function() {
if ($(this).hasClass("forward")) {
currentSlide = (currentSlide < sliderCount) ? currentSlide + 1 : sliderCount;
} else {
currentSlide = (currentSlide > 0) ? currentSlide - 1 : 0;
}
$slider.animate({"left": (40 - currentSlide * slideWidth)}, 200);
});
$("#sizes_slider li").click(function() {
$(this).siblings('.active').removeClass("active")
$(this).toggleClass("active");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment