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

    <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 {
div#demo {
	float: left;
	text-align: left;
div#photo {
	float: right;
	text-align: right;
	width: 40%;

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

<!--end custom header content for this example-->


<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>
    <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 &quot;real&quot; 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 &quot;real&quot; value by 10).</li>
    <li>When the slider value changes, the pixel offset and calculated value are reported below the slider.</li>

<!--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>
    <p>Pixel offset from start: <span id="d_offset">0</span></p>
    <p>Calculated Value: <span id="d_val">0</span></p>

<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();

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

8 Years
Discussion Span
Last Post by jansiranir


This is a reasonably light adaptation of the sample code.

In HTML, give your book image the attribute id="z_img" .

In javascript,

//-- change
        minValue : 10,
        maxValue : 110,
//-- to
        minValue : 70, //minimum book width
        maxValue : 185, //maximum book width

//-- change
    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();
//-- to
    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 ( -100, true, false, false );//initialise the slider position and book size
    //parameters: setValue (newOffset , skipAnim , force , silent)

You will probably want to adjust the CSS (float:right) to make the book image zoom from its top-left as opposed to its top-right corner.




Thanks for the reply. It almost works. Instead of exapnding or shrinking the book, it moves it from left or right of center. Nice effect though!

Any thoughts on getting it to zoom? I tried playing with it, but no luck. I do like the idea of staring the slider at midpoint and being able to shrink the image instead of just enlarging it.

You can see a working test at




You put the id="z_img" attribute in the wrong place. It belongs in the <img> tag, not its containing <div>, which should keep its id="photo" .

With a bit of maths, you can control the "zoom center". Natural behaviour is "top-left" but you could have "top-center", "top-right", "center-left", "center-center", "center-right", "top-left", "top-center", "top-right" - or anything you like I suppose..



I want to know how to use this slider coding for multiple images in single div..........Actually i applied img id="z_img" name for multiple images.....but I cant get solution........pls help me........

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.