| Autor | Zpráva | ||
|---|---|---|---|
| a.sta Profil * |
#1 · Zasláno: 9. 7. 2008, 22:48:19
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 |
#2 · Zasláno: 10. 7. 2008, 08:01:20
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 * |
#3 · Zasláno: 10. 7. 2008, 23:37:22
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 * |
#4 · Zasláno: 12. 7. 2008, 21:29:40
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) |
||
|
Časová prodleva: 18 let
|
|||
0