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">
    <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 {

<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;
<!--end custom header content for this example-->


<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>

    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" />

<!--  ******* End from vertical slider project ***************   -->

<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        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

        // 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 ***************   


4 Years
Discussion Span
Last Post by Airshow

That worked!!!
Thanks again Airshow. You are the best.

I fixed it so the photo is no longer in a frame and zooms past the screen edge and the normal browser scroll bars appear. Go to bbhs69.com and click on the class photo on the right and you will be taken to the page to view and zoom the photo.

Thanks again.



I put the image in a scrollable div to ensure that it can be scrolled independently of the rest of the page - in particular to ensure that the slider stays in view. The size of the div can be adjusted in the style sheet.

Here's a version with centering : http://jsfiddle.net/MvYmR/2/

This makes it easier to zoom in on particular person.

Set the zoom-center by clicking anywhere on the image, then zoom in/out. At any zoom level, click the image again to set another zoom-center, etc. etc.

You will see that I had to resort to jQuery, which I'm sure could be avoided but I don't know the Yahoo lib so well. Hence this solution is a hybrid.

Edited by Airshow

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.