Two years ago Airshow helped me with a Vertical Slider Zoom feature for a project of mine.
Now I have a need to do the same but with a Horizontal Slider to zoom a photo. I need the slider in this example, http://bbhs69.com/senior_class_photo_copy(1).htm, to be horizontal and at the very top of the page.
I am using the example from http://developer.yahoo.com/yui/examples/slider/slider-ticks.html. I have tried to use the code section Airshow came up with into this new project but I have not been able to get the photo to zoom. Can anyone help me? In the code below the two sections marked off with "******* Added from vertical slider project *************** " are Airshow's code I added.
<!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>Horizontal 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;
}
</style>
<link rel="stylesheet" type="text/css" href="slider/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="slider/slider.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/slider/slider-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#slider-bg {
background:url(http://yui.yahooapis.com/2.9.0/build/slider/assets/bg-fader.gif) 5px 0 no-repeat;
}
#slider-thumb {
left: 0;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
<div id="slider-thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.9.0/build/slider/assets/thumb-n.gif"></div>
</div>
<!--
You supply your own markup for the slider:
- The thumb element should be a child of the slider background
- The tabindex attribute lets this element receive focus in most browsers.
- If the slider background can receive focus, the arrow keys can be used to change
this slider's value.
- We use an img element rather than a css background for the thumb to get around
a performance bottleneck when animating the thumb in IE
- Both elements should have a position style: relative or absolute
- Don't apply a css border to the slider background
-->
<!-- ******* Added from vertical slider project *************** -->
<h1 class="title"></h1>
<div id="demo">
<div id="photograph">
<br /><br />
<img id="z_img" src="http://bbhs.leonardtemple.com/Alumni/Comp/1969-BBHS.jpg" width="800" alt="class of 1969 photo" />
</div>
</div>
<!-- ******* End from vertical slider project *************** -->
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb",
valuearea="slider-value", textfield="slider-converted-value"
// The slider can move 0 pixels up
var topConstraint = 0;
// The slider can move 200 pixels down
var bottomConstraint = 200;
// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1.5;
// The amount the slider moves when the value is changed with the arrow
// keys
var keyIncrement = 20;
var tickSize = 20;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getHorizSlider(bg,
thumb, topConstraint, bottomConstraint, 20);
// Sliders with ticks can be animated without YAHOO.util.Anim
slider.animate = true;
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
// Display the pixel value of the control
valnode.innerHTML = offsetFromStart;
// use the scale factor to convert the pixel offset into a real
// value
var actualValue = slider.getRealValue();
// update the text box with the actual value
fld.value = actualValue;
// Update the title attribute on the background. This helps assistive
// technology to communicate the state change
Dom.get(bg).title = "slider value = " + actualValue;
});
slider.subscribe("slideStart", function() {
YAHOO.log("slideStart fired", "warn");
});
slider.subscribe("slideEnd", function() {
YAHOO.log("slideEnd fired", "warn");
});
// Listen for keystrokes on the form field that displays the
// control's value. While not provided by default, having a
// form field with the slider is a good way to help keep your
// application accessible.
Event.on(textfield, "keydown", function(e) {
// set the value when the 'return' key is detected
if (Event.getCharCode(e) === 13) {
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;
// convert the real value into a pixel offset
slider.setValue(Math.round(v/scaleFactor));
}
});
// Use setValue to reset the value to white:
Event.on("putval", "click", function(e) {
slider.setValue(100, false); //false here means to animate if possible
});
// Use the "get" method to get the current offset from the slider's start
// position in pixels. By applying the scale factor, we can translate this
// into a "real value
Event.on("getval", "click", function(e) {
YAHOO.log("Current value: " + slider.getValue() + "\n" +
"Converted value: " + slider.getRealValue(), "info", "example");
});
});
// ******* Added from vertical slider project ***************
// display the native offset and the calculated while sliding
var zoom_img = YAHOO.util.Dom.get('z_img');//Find the DOM node for the target image
slider.subscribe('change', function (offsetFromStart) {
zoom_img.style.width = this.getCalculatedValue() + 'px'; //browser looks after height, maintaining image's aspect ratio.
});
slider.setValue ( -20, true, false, false );//initialise the slider position and book size
//parameters: setValue (newOffset , skipAnim , force , silent)
// ******* End from vertical slider project ***************
})();
</script>
</body>
</html>
