user interface - jQuery UI: Action when slider position changes -
i using jquery ui slider http://jqueryui.com/slider/#steps it's simple slider 3 steps (1, 2 , 3) , div-element ("id_1") shows picture. want picture changes depending on position of slider. in position "1" shows picture, , picture changes move slider position 2 or 3. how can this?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jquery ui slider - snap increments</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function () { $("#slider").slider({ value: 100, min: 1, max: 3, step: 1, slide: function (event, ui) { $("#amount").val("$" + ui.value); } }); $("#amount").val("$" + $("#slider").slider("value")); }); </script> </head> <body> <p> <label for="amount">donation amount ($50 increments):</label> <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> </p> <div id="slider"></div> <div id="id_1" class="class_1"></div> </body> </html> thanks in advance!
you need @ value of slider, , show appropriate image. try this:
slide: function (event, ui) { if (ui.value == 1) { $("#id_1")).attr("src", "image1.png"); } else if (ui.value == 2) { $("#id_1")).attr("src", "image2.png"); } else if (ui.value == 3) { $("#id_1")).attr("src", "image3.png"); } } and make id_1 div img tag instead:
<img id="id_1" class="class_1"></div> 
Comments
Post a Comment