Autor Zpráva
a.sta
Profil *
Prosím Vás zkušenější o pomoc/úpravu níže přiloženého JS. Script je na úpravu rozměru obrázků v závislosti na
velikosti plochy (viewportu) - image autoresize.

Potřeboval bych aby se obrázek upravil, tedy zmenši jen když je větší než plocha pro jeho zobrazeni (rozlišení monitoru, atd.).
Toto script vykonává dobře, ale bohužel když je obr. menší než je viewport, obrázek se zvětšením na pohled znehodnotí.

Tedy zkrátka aby se větší obrázky zmenšovaly, ale menší se nezvětšovaly.

Pro úplnost dodávám že script není můj výtvor - zdroj [url=http://interval.cz/clanky/autoresize-z-ie6-ve-vsech-prohlizecich/
]tady[/url]

Předem děkuji :-)



<div>
<img id="MyImage" src="image.gif" style="margin:0px;padding:0px;border:0px" />
<br style="clear:both" />

<script type="text/javascript">
<!--
var OrigW; // zde bude původní šířka (width)
var OrigH; // zde bude původní výška (height)
var ImgObj=document.getElementById('MyImage'); // získání přístupu k objektu našeho obrázku

function FitImage(MyObj,ViewWidth,ViewHeight)
{ // funkce přepočítá nové rozměry dle prostoru v okně klienta
var ImgScale = OrigW/OrigH; // poměr stran původního obrázku
var ViewScale = ViewWidth/ViewHeight; // poměr stran okna klienta
MyObj.removeAttribute('width'); // preventivně odebrat atribut width
MyObj.removeAttribute('height'); // preventivně odebrat atribut height
if (ImgScale>ViewScale)
{ // je možné natáhnout na šířku
MyObj.width=ViewWidth; // nastavit šířku obrázku na dostupnou šířku okna
}
else
{ // je možné natáhnout na výšku
MyObj.height=ViewHeight; // nastavit výšku obrázku na dostupnou výšku okna
}
document.title= ImgObj.src + ' (' + ImgObj.width + 'x' + ImgObj.height + ')'; // do titulku nastavit zdroj obrázku a aktuální rozměry
}

function SetFit()
{ // funkce, která zajistí volání funkce FitImage s parametry
FitImage(ImgObj,document.body.clientWidth-10,document.body.clientHeigh t-10); // dostupný rozměr okna klienta bez okraje body
}

function InitFit()
{ // funkce pro uložení původního rozměru obrázku, inicializaci a zavedení obsluhy onresize
OrigW=ImgObj.width; // uložit původní šířku
OrigH=ImgObj.height; // uložit původní výšku
SetFit(); // přepočítat a nastavit nové rozměry obrázku
window.onresize=SetFit; // nastavit volání SetFit při každé změně velikosti okna
}

function SetOrig()
{ // funkce pro zrušení autoresize
window.onresize=null; // zrušit reakci na změnu okna
ImgObj.width=OrigW; // vrátit původní šířku
ImgObj.height=OrigH; // vrátit původní výšku
document.title= ImgObj.src + ' (' + ImgObj.width + 'x' + ImgObj.height + ')'; // vložit nové hodnoty do titulku
}

window.ImgObj.onload=InitFit; // jakmile je obrázek načten, spustit InitFit
// -->
</script>
<input type="button" value="Původní" onclick="javascript: SetOrig()" />
<input type="button" value="Auto Resize" onclick="javascript: InitFit()" />
</div>
peta
Profil
a.sta
velikost malych obrazku ma byt jednotna
velikost velkych obrazku ma byt jednotna
mas-li to jinak, stranku delal amater.

Ten script ale nedela zmensovani, pouze zvetseni do sirky nebo vysky okna. Zmensovani dela sam prohlizec. Zkus cely JS vyhodit pryc.
a.sta
Profil *
Obrázky jsou samozřejmě všechny stejně velké, ale rozlišení monitorů návštěvníků je různé - tedy někomu se originální velikost obrázku na plochu pro zobrazení vejde, jiný (s menším rozlišením) musí v obrázku rolovat. Jinak to vypadá např. při 1280x1024 nebo při 1280x800

Ano prohlížeč sám zmenšuje / přizpůsobuje obrázky, ale jen když je zobrazen sám jako soubor *.jpg ovšem to není můj případ. Mě se obrázky zobrazují v rámci nové HTML stránky. [url=http:sweb.cz/a.sta]zde je příklad[/url]

Tento script dělá to, že přizpůsobí proporcionálně velikost obrázku ploše - tedy zvětší, či zmenší obrázek v závislosti na šířce a výšce okna.

A já bych potřeboval do scriptu přidat další podmínku: když bude velikost obr. < velikost plochy tak aby ten obrázek "script" nechal být a nezvětšoval(nepřizpůsoboval) ho.
a.sta
Profil *
vyřešeno

před
MyObj.width=ViewWidth; // nastavit šířku obrázku na dostupnou šířku okna

vložit
if (OrigW > ViewWidth)

a před
MyObj.height=ViewHeight; // nastavit výšku obrázku na dostupnou výšku okna

vložit
if (OrigH > ViewHeight)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0