Kép átméretezõ

[Rimelek]

Na itt a végső verzió:

Kód: Javascript

1. var MSG1 = "Katt a képre a teljes mérethez!";
2. var MSG2 = "Katt a képre a kis mérethez!";
3.  
4. var MAXWIDTH = 300;
5. var MAXHEIGHT = 800;
6.  
7.  
8. /***************************************************/
9. var imgs = new Array();
10. var meretek = new Array();
11. var num = 0;
12. function Res_kepek() {
13.     for(i=0;i<document.images.length;i++) {
14.         var wh = new Array();
15.         if(document.images[i].className != "res") continue;
16.         imgs[num] = document.images[i];
17.         wh['W'] = imgs[num].width;
18.         wh['H'] = imgs[num].height;
19.        
20.         meretek[imgs[num].id] = wh;
21.         num++;
22.     }
23.     return imgs;
24. }
25.  
26. function szamol(W,H,MW,MH) {
27.     var uj_meret = new Array();
28.     if(W > MW) {
29.         H = Math.round((MW/W) * H);
30.         W = MW;
31.     }
32.     if(H > MH) {
33.         W = Math.round((MH/H) * W);
34.         H = MH;
35.     }
36.     uj_meret['W'] = W;
37.     uj_meret['H'] = H;
38.     return uj_meret;
39. }
40.  
41. function resize(imgs,MAXWIDTH,MAXHEIGHT) {
42.     var hossz = imgs.length;
43.     var meret = new Array();
44.     for(i=0;i<hossz;i++) {
45.         W = imgs[i].width;
46.         H = imgs[i].height;
47.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
48.  
49.         imgs[i].style.width = meret['W'] + "px";
50.         imgs[i].style.height = meret['H'] + "px";
51.         txt = document.getElementById("txt_" + imgs[i].id)
52.         if(W != meret['W'] || H!= meret['H']) {
53.             txt.innerHTML = MSG1;
54.         }
55.     }
56. }
57.  
58. function meretvalt(e) {
59.     if(!e) e = window.event;
60.     egyid = (e.target) ? e.target.id : e.srcElement.id;
61.     egykep = document.getElementById(egyid);
62.  
63.     W = egykep.style.width;
64.     H = egykep.style.height;
65.  
66.     if(H.substring(H.length-2,H.length) == "px") {
67.         H = H.substring(0,H.length-2);
68.     }
69.     if(W.substring(W.length-2,W.length) == "px") {
70.         W = W.substring(0,W.length-2);
71.     }
72.     if((meretek[egykep.id]['W'] ==  W) && ( meretek[egykep.id]['H'] == H )  ) {
73.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
74.         egykep.style.width = meret['W'] + "px";
75.         egykep.style.height = meret['H'] + "px";
76.         if(meretek[egykep.id]['W'] > MAXWIDTH || meretek[egykep.id]['H'] > MAXHEIGHT) {
77.             document.getElementById("txt_" + egykep.id).innerHTML = MSG1;
78.         }
79.     } else {
80.         egykep.style.width = meretek[egykep.id]['W'] + "px";
81.         egykep.style.height = meretek[egykep.id]['H'] + "px";
82.         document.getElementById("txt_" + egykep.id).innerHTML = MSG2;
83.     }
84. }
85.  
86. function site_onload() {
87.     resize(imgs,MAXWIDTH,MAXHEIGHT);
88. }
89.  
90. imgs = Res_kepek();
91.  
92. window.onload = site_onload;
93.  
94. for(i=0;i<num;i++) {
95.     imgs[i].onclick = meretvalt;
96. }

A fájl elejére tettem a beállításokat. És átírtam pár dolgot, hogy az oldal betöltödése után fusson csak le a javascript. Ezzel lehet hogy nem fog hibázni az opera annyit a képekkel. Én táblázattal oldottam meg a képeket. Demo itt

Ja és annyit még, hogy akkor a képeken kivül kell minden képhez egy <span></span> aminek az id-je txt_ vel kezdődik, és a kép id-jével végződik. pl:
<span id="txt_334"></span>
<img src="kep.jpg" id="334" alt="KÉP" />

És oda kerül a szöveg.

[Rimelek]

Igen, lehet. A JS csak a méreteket változtatja. A többit nem írja felül.

Viszont a hibát mégsem tudtam javítani. Néha kicsiben jön be a kép. A többit akkor megírom.

[Török]

A pozicionálást megoldom css-ben (gondolom lehet).

[Rimelek]

Operás hibára nincs ötlet. De valószínű a js kódban van valami gond. A szöveg kiírást megcsinálom, ha nem probláma, hogy arról neked kell gondoskodnod, hogy a szöveg a kép felett jelenjen meg, vagy alatt, és ne csússzon szét az oldal. Pl táblázatba teszed a képeket.  Vagy ha nem gond, hogy egymás mellet nem lehet két kép, akkor ezzel sem kel foglalkoznod.
Elküldve:: 2007. Június 18.  12:24:26Azt hiszem rájöttem a másik hibára. Csoda, hogy egyáltalán müködött. elírtam egy változót. Várom a válaszod az előzőre, és megcsinálom rendesen.

[Török]

Most jó.
Operás hibára nincs 5let? Hogy lehet alá kiírni, hogy kép át lett méretezve bla bla.?

[Rimelek]

na itt az FF-ben is müködö változat.

Kód: Javascript

1. var imgs = new Array();
2. var meretek = new Array();
3. var num = 0;
4.  
5. var MAXWIDTH = 300;
6. var MAXHEIGHT = 800;
7.  
8. function Res_kepek() {
9.     for(i=0;i<document.images.length;i++) {
10.         var wh = new Array();
11.         if(document.images[i].className != "res") continue;
12.         imgs[num] = document.images[i];
13.         wh['W'] = imgs[num].width;
14.         wh['H'] = imgs[num].height;
15.        
16.         meretek[imgs[num].id] = wh;
17.         num++;
18.     }
19.     return imgs;
20. }
21.  
22. function szamol(W,M,MW,MH) {
23.     var uj_meret = Array();
24.     if(W > MW) {
25.         H = (MW/W) * H;
26.         W = MW;
27.     }
28.     if(H > MH) {
29.         W = (MH/H) * W;
30.         H = MH;
31.     }
32.     uj_meret['W'] = W;
33.     uj_meret['H'] = H;
34.     return uj_meret;
35. }
36.  
37. function resize(imgs) {
38.     hossz = imgs.length;
39.     meret = Array();
40.     for(i=0;i<hossz;i++) {
41.         W = imgs[i].width;
42.         H = imgs[i].height;
43.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
44.  
45.         imgs[i].style.width = meret['W'] + "px";
46.         imgs[i].style.height = meret['H'] + "px";
47.     }
48. }
49.  
50. function meretvalt(e) {
51.     if(!e) e = window.event;
52.     egyid = (e.target) ? e.target.id : e.srcElement.id;
53.     egykep = document.getElementById(egyid);
54.     W = egykep.style.width;
55.     H = egykep.style.height;
56.  
57.     if(H.substring(H.length-2,H.length) == "px") {
58.         H = H.substring(0,H.length-2);
59.     }
60.     if(W.substring(W.length-2,W.length) == "px") {
61.         W = W.substring(0,W.length-2);
62.     }
63.     if((meretek[egykep.id]['W'] ==  W) && ( meretek[egykep.id]['H'] == H )  ) {
64.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
65.         egykep.style.width = meret['W'] + "px";
66.         egykep.style.height = meret['H'] + "px";
67.     } else {
68.         egykep.style.width = meretek[egykep.id]['W'] + "px";
69.         egykep.style.height = meretek[egykep.id]['H'] + "px";
70.     }
71. }
72.  
73. imgs = Res_kepek();
74. resize(imgs);
75.  
76. for(i=0;i<num;i++) {
77.     imgs[i].onclick = meretvalt;
78. }

A gond a css hibájában volt. Mert csak a méretet adtam meg számban, és nem tettem mögé hogy px.

[Rimelek]

Használj másik doctype-t. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Illetve a vastagított rész kisbetűsen helyes.
Elküldve:: 2007. Június 18.  11:47:24Nem. Mégsem jó. Ugy látszik doctype-el  nem müködik FF-ben. Ameddig rá nem jövök miért, mégis ki kell szedned  A többi hibán is gondolkozom.

[Török]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML Strict 3.0//EN//">

Ez a sor az a mi bezavar neki. Ha ez nincs akkor meg ff-ben is (Viszont operában még mindig megvan a probléma), de nekem a doctype kellene IE miatt, ha meg lehet oldani. Ha nem akkor kiszedem.

[Rimelek]

Ezt a törpe kép problémát csak ma vettem észre. tegnap nem volt vele gondom nekem. A firefox-ban viszont működik nekem, hisz azzal teszteltem, csak utána az IE-ben. De utánanézek mi lehet a gond.

[Török]

Hy!
Egy kis segítséget szeretnék kérni, mert nem tom, hogy én vagyok a balfék, vagy valami tényleg nem stimmel, de nekem ez nem megy firefox alatt. (engedélyezve van a js). Amúgy IE, meg Opera tökéletesen viszi, és azt is csinálja amit szerettem volna.

Köszönöm előre is, és persze az eddigi munkádat.

Szerk.: Operában frissítéskor hülyül valamit. Amit csinál: berakja a képet akkorába hogy épp csak észre lehet venni. utánna kicsit nagyítja aztán berakja rendes méretbe. és ezt random módon :S !de csak ha a frissítés gombra kattintok!

[Rimelek]

Rajta vagyok az ügyön. Amit csatoltál ahhoz kellene a prototype js könyvtár, ami megvan nekem, de anélkül próbálom meg. Egy része már megvan.
Elküldve:: 2007. Június 17.  15:58:47Na a szövegek kiirását, hogy kattintsanak a képre a nagyobb mérethez, nem tudtam még ugy megcsinálni, hogy ne csússzon szét valami. De ami eddig kész van, hogy kicsinyiti a képeket az oldal betöltödésekor, és amikor rákattint valaki, akkor teljes méretre vált, ha ujra rákattint, akkor ujra kicsinyíti.

Kód: Javascript

1. var imgs = new Array();
2. var meretek = new Array();
3. var num = 0;
4.  
5. var MAXWIDTH = 300;
6. var MAXHEIGHT = 800;
7.  
8. function Res_kepek() {
9.     for(i=0;i<document.images.length;i++) {
10.         var wh = new Array();
11.         if(document.images[i].className != "res") continue;
12.         imgs[num] = document.images[i];
13.         wh['W'] = imgs[num].width;
14.         wh['H'] = imgs[num].height;
15.        
16.         meretek[imgs[num].id] = wh;
17.         num++;
18.     }
19.     return imgs;
20. }
21.  
22. function szamol(W,M,MW,MH) {
23.     var uj_meret = Array();
24.     if(W > MW) {
25.         H = (MW/W) * H;
26.         W = MW;
27.     }
28.     if(H > MH) {
29.         W = (MH/H) * W;
30.         H = MH;
31.     }
32.     uj_meret['W'] = W;
33.     uj_meret['H'] = H;
34.     return uj_meret;
35. }
36.  
37. function resize(imgs) {
38.     hossz = imgs.length;
39.     meret = Array();
40.     for(i=0;i<hossz;i++) {
41.         W = imgs[i].width;
42.         H = imgs[i].height;
43.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
44.  
45.         imgs[i].style.width = meret['W'];
46.         imgs[i].style.height = meret['H'];
47.     }
48. }
49.  
50. function meretvalt(e) {
51.     if(!e) e = window.event;
52.     egyid = (e.target) ? e.target.id : e.srcElement.id;
53.     egykep = document.getElementById(egyid);
54.     W = egykep.style.width;
55.     H = egykep.style.height;
56.  
57.     if(H.substring(H.length-2,H.length) == "px") {
58.         H = H.substring(0,H.length-2);
59.     }
60.     if(W.substring(W.length-2,W.length) == "px") {
61.         W = W.substring(0,W.length-2);
62.     }
63.     if((meretek[egykep.id]['W'] ==  W) && ( meretek[egykep.id]['H'] == H )  ) {
64.         meret = szamol(W,H,MAXWIDTH,MAXHEIGHT);
65.         egykep.style.width = meret['W'];
66.         egykep.style.height = meret['H'];
67.     } else {
68.         egykep.style.width = meretek[egykep.id]['W'];
69.         egykep.style.height = meretek[egykep.id]['H'];
70.     }
71. }
72.  
73. imgs = Res_kepek();
74. resize(imgs);
75.  
76. for(i=0;i<num;i++) {
77.     imgs[i].onclick = meretvalt;
78. }

A használatról annyit, hogy a képeknek, amit méreteznie kell a javascriptnek, a "res" osztályba kel tartoznia. és minden képnek kell egy egyedi id is. Ami teljesen mindegy mi, csak egyed legyen. pl

<img src="kep.jpg"  alt="KÉP"  id="1" class="res" />

A script-et pedig az oldal alján, de mindenkép a képek után illeszd be.

[Török]

Üdv!
Olyan js kódra lenne szükségem, ami, hogyha a kép szélesebb a megadott mértenél (pl.: 600px), akkor ezt arányosan lekicsinyítse (a magasságot ugyan olyan aránnyba), és fölé írja hogy "az eredeti méret megtekintéséhez kattintson ide".

Tudom, hogy az img tag-ba megadhatom a szélességet és magasságot, de ez ha kisebb széthúzza, és torzítja.

Remélem érthetően sikerült leírnom. Az alul csatolt js valahogyan ezt csinálja, ha valaki ezt rendezi, kiszedi a felesleges részeket (márha van), akkor azt is nagyon megköszönöm.