GRY-Online.pl --> Archiwum Forum

Galeria - html + js

06.01.2009
18:16
[1]

lo0ol [ Jónior ]

Galeria - html + js

Zrobiłem szablon galerii korzystający ze skryptu js "lightbox". Mam mały problem z ułożeniem tego. Otóż chodzi mi o to, aby niezależnie od prawdziwych rozmiarów zdjęcia ... było ono równo skalowane i ładnie dopasowywane do tabeli w której się zawiera, zachowując proporcję. Piszę, aby znaleźć pomoc w zrobieniu tego. Jeżeli ktoś byłby w stanie mi pomóc na scenie forum lub na GG 4227383 to będę wielce wdzięczny. Poniżej wrzucam kod tabeli zawierającej galerię, a obok skrina całości (na załączonym obok obrazku wszystko jest OK, ponieważ tabela zawiera takie same obrazki ... jeżeli wrzucę jakiś o innych rozmiarach to tabela sie krzaczy).
____________________________________

<table border="0" height="500" width="500">
<tr align="center" valign="middle">
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
</tr>
<tr align="center" valign="middle">
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
</tr>
<tr align="center" valign="middle">
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
<td><a href="images/lo0ol.jpg" rel="lightbox[roadtrip]"><img src="images/lo0ol.jpg" width="80%" height="80%"></a></td>
</tr>
</table>


Galeria - html + js - lo0ol
06.01.2009
18:21
[2]

Regis [ ]

A jak sobie wyobrazasz dzialanie czegos takiego? Jesli jedno zdjecie ma 100 x 300 pikseli, a drugie 300 x 100 to co ma sie z nimi stac? Bo nie bardzo rozumiem jak bys chcial takie cos osiagnac (chodzi mi o sama koncepcje - jak to by Twoim zdaniem mialo dzialac).

06.01.2009
18:25
[3]

lo0ol [ Jónior ]

Parametry img (width i height) wyrażane są (wg mojej twórczości) procentowo i 80% nie jest 80% pierwotnych rozmiarów zdjęcia, a komórki tabeli. Wrzucenie foty o innych proporcjach wysokości do szerokości powoduje coś takiego jak na obrazku obok. Chciałbym, aby obrazki zachowywały swoje WŁASNE proporcje, a nie dostosowywały się do tego najdłuższego/najwyższego w danej kolumnie, czy też wierszu. Przy czym nie powinny psuć rozmiarów innych zdjęć.

Mam nadzieje, że teraz wiadomo o czym marzę. :d


Galeria - html + js - lo0ol
06.01.2009
18:30
[4]

Siepet [ Hawkeye ]

Chcesz zrobić po prostu miniaturki zdjęcia XX, które ma 80% width i height oryginalnego rozmiaru?

06.01.2009
18:38
[5]

lo0ol [ Jónior ]

Nie :p chcę, aby miniatury obrazków zachowywały SWOJE proporcje i wpasowywały się do tabeli.

Czyli na przykład:

OBRAZEK 1
Oryginał: 1000x500
Miniatura: 200x100

OBRAZEK 2
Oryginał: 800x1000
Miniatura: 160x200

OBRAZEK 3
Oryginał: 3000x2000
Miniatura: 200x133

_____________________

Czyli, aby szerokość i wysokość była skalowana proporcjonalnie, a powiedzmy maksymalny rozmiar wynosił np 200. To moja własna idea ... ale jeżeli ktoś da mi pomysł na załatwienie tego w inny sposób, który w efekcie da ładnie wyglądającą galerię (z tą grafiką) to chętnie ulegnę.

06.01.2009
19:20
[6]

maviozo [ Man with a movie camera ]

Sprawdzasz który bok jest dłuższy i wg niego dopasowujesz rozmiar.

Zakładamy, że optymalny rozmiar obrazka to 100x100.

400x300 = 400/100 = 4
300 / 4 = 75
czyli rozmiar miniaturki to 100x75
I dopasowane.

200x500 = 500 / 100 = 5
200 / 5 = 40

czyli rozmiar miniaturki to 40x100

Coś takiego?

06.01.2009
19:47
[7]

lo0ol [ Jónior ]

Tak, dokładnie o to mi chodzi tylko ... o ile w językach programowania typu cpp, vb bym sobie poradził z takim skalowaniem bez problemu, to nie mam pojęcia jak to zrobić w htmlu.

06.01.2009
19:49
[8]

maviozo [ Man with a movie camera ]

W gołym htmlu tego raczej nie zrobisz.

06.01.2009
19:51
[9]

lo0ol [ Jónior ]

A jest jakieś inne rozwiązanie tego problemu (pomijając ustawianie wymiarów ręcznie przy każdej miniaturze)? Jedynym moim warunkiem jest: "aby ładnie wyglądało".

06.01.2009
19:56
[10]

maviozo [ Man with a movie camera ]

Niestety, przygotowanie dwóch plików: jeden oryginalny, drugi zmniejszony (miniaturka) [poza tym, to bardzo przyśpieszy działanie, bo wczytasz 9x25kb a nie 9x4mb]. Można to zautomatyzować w XnView na przykład, jeśli masz masę obrazków.

06.01.2009
20:27
[11]

lo0ol [ Jónior ]

I to jest program, który rozwiązał mój problem. :p Dzięki.

© 2000-2022 GRY-OnLine S.A.