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>

Man atrodo čia visiškai ne jQuery, bandyk per css, padding-right padaryti procentinius arba su em vienetais. Pixeliai tam netinka.

Tiesiog tikrink poziciją ( gali padaryti pvz nuo position left + plotis ir jei išlenda už ribų - atitraukti per tiek, kiek išlenda :)

Tiesiog tikrink poziciją ( gali padaryti pvz nuo position left + plotis ir jei išlenda už ribų - atitraukti per tiek, kiek išlenda :)

Bet kaip patikrinti, kiek atvaizdas išlenda uz ribų? :/

Būtent tą ir parašiau :)

Paemi poziciją ( left ), tada pridedi to elemento plotį.

Sakykim:

Turiu langą, kurio dydis yra 800x600, tad iš šių ribų jis negali išlysti.

Man reikalingas elementas nuo kairiojo krašto atsitraukęs per 780 px. Taip pat, jo plotis yra 150px. Tad elementari matematika: 780+150-800 = 130. Vadinasi, šį elementą man reikia patraukti atgal ( left ) per 130 px :)

ps. jei neaiškus variantas, tai tiesiog išbandyt position("left"); išgauti iš elemento ir viskas

Būtent tą ir parašiau :)

Paemi poziciją ( left ), tada pridedi to elemento plotį.

 

Sakykim:

Turiu langą, kurio dydis yra 800x600, tad iš šių ribų jis negali išlysti.

Man reikalingas elementas nuo kairiojo krašto atsitraukęs per 780 px. Taip pat, jo plotis yra 150px. Tad elementari matematika: 780+150-800 = 130. Vadinasi, šį elementą man reikia patraukti atgal ( left ) per 130 px :)

 

ps. jei neaiškus variantas, tai tiesiog išbandyt position("left"); išgauti iš elemento ir viskas

Viskas kaip ir veikia gerai, tik problema, kad pats paddingas neveikia ant šito image. Per firebug matau, kad jis užsideda parametruose, bet užsideda už divo ribų ir todėl jo nėra kur atitraukti.. Spėju dėl to kad image position yra absolute ir todėl nepagauna to divo :/

Viskas kaip ir veikia gerai, tik problema, kad pats paddingas neveikia ant šito image. Per firebug matau, kad jis užsideda parametruose, bet užsideda už divo ribų ir todėl jo nėra kur atitraukti.. Spėju dėl to kad image position yra absolute ir todėl nepagauna to divo :/

na ant absolute neuždės paddingo, tam yra left:130px tiesiog

Nebūtinai, sprendimas gali būti ir kitoks :)

Pvz: Kaip skaičiuoji kiek išlindęs - pridėk prie pločio dar ir padding ( sakykim parametras pas mane yra padding:10; ), tai plotis bus nebe 150, o 170 px :) Tada atsitrauks su visu padding ;)

Nebūtinai, sprendimas gali būti ir kitoks :)

 

Pvz: Kaip skaičiuoji kiek išlindęs - pridėk prie pločio dar ir padding ( sakykim parametras pas mane yra padding:10; ), tai plotis bus nebe 150, o 170 px :) Tada atsitrauks su visu padding ;)

Pas mane papildomo paddingo isvis nera. Paveikslėlio atitraukima apskaiciuoja gerai, bet neveikia padding paramas kuris uzdedamas kai img islenda uz DIV ribu, nes su absolute position nera nuo kur to img atitraukti. Arba as klaidingai mastau.

Kažką klaidingai mastai :)

Pas tave jei tas paveiksliukas yra kokiame nors div'e, tada draggable elementui priskirk position:relative; ir galėsi būtent tame elemente jį stumdyti :)

Kažką klaidingai mastai :)

 

Pas tave jei tas paveiksliukas yra kokiame nors div'e, tada draggable elementui priskirk position:relative; ir galėsi būtent tame elemente jį stumdyti :)

Kadangi nepavyko priversti paddingo veikti, tai susitvarkiau si reikala kitaip, nuo left pozicijos atimdamas tiek kiek desineje islenda lauk is DIV :)

if (total_pos + img_width > bg_width){
   jQuery('.over_image').css('left', total_pos - ((total_pos + img_width) - bg_width));
}

Nezinau ar cia pats geriausias sprendimas, bet atrodo veikia normaliai :D

Juk taip pat ir sakiau, na gal nesupratai :)

Juk taip pat ir sakiau, na gal nesupratai :)

Tai turbut, na bet kokiu atvbeju, labai aciu uz pagalba ;)

Nėra už ką ;)