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>