Topic: Kaip išlaikyti didanama paveikslėlį DIV elemente (jQuery)?

Sveiki, susidūriau su tokia problemėle, DIV elemente (relative position) yra draggable atvaizdas (absolute position) kurį galima didinti/mažinti slaiderio pagalba, jį tampyti galima div elemento ribose

$( ".over_image" ).draggable({ containment: "parent", scroll: false });

Tačiau jeigu paveikslėlis nutemptas prie DIV krašto ir yra zoominamas jo dalis pasislepia už DIV elemento krašto(gaunasi overflow hidden). Jį pajudinus, atvaizdas vėl užsifiksuoja DIV ribose. Man reikia, kad zoominant, tą image nustumtų nuo rašto link DIV elemento vidurio(Kad DIv kraštinės būtų lyg siena image elementui. Pats image dydis kuris išgaunamas maksimaliai išdidinus nėra didesnis už patį DIV elementą, bėda atsiranda tada, kai image pristumtas prie krašto. Gal kas turit pasiūlymų kaip tai paiekti?.

$(function() {
      $( ".over_image" ).draggable({ cursor: "move", cursorAt: { top: 30, left: 80 } });
      $( ".over_image" ).draggable({ containment: "parent", scroll: false });
}); 
   $("#slider").slider({
                    step: 2,
                    min: 75,
                    max: 220,
                    value: 150,
                    slide: function(e,ui){
                        var sliderValue =  jQuery("#slider").slider("value");
                        $(".over_image").width(sliderValue);

                    }
                });



<div class="wraper">
     <div id="output" class="foto-frame">
 <img class="over_image" id="img_1" src="1.png" width="100" height="auto" />
     </div>
<div id="progressbox"><div id="progressbar"></div ></div>
<div class="nav-buttons">
     <div id="slider"></div>
</div>

2 (edited by Min2liz 2012-12-23 16:17:23)

Re: Kaip išlaikyti didanama paveikslėlį DIV elemente (jQuery)?

Gal geriau duok linką kur būtų tavo projektas. Gali patalpint JSFiddle. Labai sunku supranti ko reikia kai nematai pačio vaizdo.

Pats pasidariau ir lyg viskas veikia taip kaip tu nori:

http://jsfiddle.net/W7mQp/2/

Truputį optimizuotas kodas