Below is a sample code using the YUI Slider Control. How can I get the photo to zoom in and out proportionally as the slider moves up and down?
P.S. I am open to any existing working scripts. I have not been able to find any that does a variable zoom.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Bottom to top Vertical Slider</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
div#demo {
float: left;
text-align: left;
width:40%;
}
div#photo {
float: right;
text-align: right;
width: 40%;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/slider/assets/skins/sam/slider.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/slider/slider-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#slide_bg {
position: relative;
background: url(javascript/bg-v.gif) 12px 0 no-repeat;
height: 228px;
width: 48px;
}
#slide_thumb {
cursor: default;
position: absolute;
top: 200px;
margin-left: 10px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Bottom to top Vertical Slider</h1>
<div class="exampleIntro">
<p>This example demonstrates a vertical implementation of the <a href="http://developer.yahoo.com/yui/slider/">YUI Slider Control</a>. Some characteristics of this implementation include the following:</p>
<ul>
<li>The slider range is 200 pixels.</li>
<li>CSS is used to place the slide thumb at the bottom of the slider.</li>
<li>Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.</li>
<li>The custom min value is set to 10; the max 110.</li>
<li>Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 10).</li>
<li>When the slider value changes, the pixel offset and calculated value are reported below the slider.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">
<div id="photo">
<img border="0" src="http://images.barnesandnoble.com/images/41510000/41515280.JPG" ></div>
<div id="slide_bg" tabindex="-1">
<div id="slide_thumb"><img src="javascript/thumb-bar.gif" width="25" height="26"></div>
</div>
<p>Pixel offset from start: <span id="d_offset">0</span></p>
<p>Calculated Value: <span id="d_val">0</span></p>
</div>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
// the slider can move up 200 pixels
var upLimit = 200;
// and down 0 pixels
var downLimit = 0;
// Create the Slider instance
var slider = YAHOO.widget.Slider.getVertSlider(
'slide_bg', 'slide_thumb', upLimit, downLimit);
// Add a little functionality to the instance
YAHOO.lang.augmentObject(slider, {
// A custom value range for the slider
minValue : 10,
maxValue : 110,
// A method to retrieve the calculated value, per the value range
getCalculatedValue : function () {
// invert the offset value so "real" values increase as the
// slider moves up
var offset = -1 * this.getValue();
// Convert the offset to a value in our configured range
var conversionFactor =
(this.maxValue - this.minValue) /
(this.thumb.topConstraint + this.thumb.bottomConstraint);
return Math.round(offset * conversionFactor) + this.minValue;
}
});
// display the native offset and the calculated while sliding
var offset_span = YAHOO.util.Dom.get('d_offset');
var calc_span = YAHOO.util.Dom.get('d_val');
slider.subscribe('change', function (offsetFromStart) {
offset_span.innerHTML = offsetFromStart;
calc_span.innerHTML = this.getCalculatedValue();
});
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
