Javascript i skalowanie miniaturek

[Tomahawk]

Witam!

Mam takie coś że jest lista skrótów artykułów.

Do każdego artykułu jest dodane zdjęcie a dużych wymiarach. Chcę teraz aby w skrócie wyświetlała się miniaturka tego zdjęcia ale automatycznie robiona przez javascript który będzie modyfikował wartości width i height.

Czyli chodzi oto że mam:

<img src="<?php echo $adres_obrazka; ?>" >

I teraz powiedzmy że w javascripcie mam domyślnie ustawioną szerokość grafiki na 100px.

Więc jeżeli zdjęcie będzie 200x400 to width=100 a height=200 jeżeli zdjęcie będzie 150x300 to width=100 a height=200 itd...

Czyli dana jest szerokość a reszta się skaluje automatycznie.

Próbowałem jakoś zastosować to: https://www.haxite.org/index.php3?site=foru...032&start=0

Ale noga jestem z javascriptem i mi nie wychodzi.

[stat4seo]

Nie lepszym rozwiązaniem będzie tworzenie przy wgrywaniu obrazków miniaturek ? Np. przy pomocy php... tworzenie ich w locie, nie wydaje mi się dobrym rozwiązaniem szczególnie przy dużej ilości dużych grafik.

A w php są do tego gotowe klasy, skalujące, zmniejszające obrazki i zapisujące gotowe miniaturki.

[Tomahawk]

Ale wtedy mam 2 pliki: jeden miniaturka a drugi zwykły.

A javascript tak naprawdę nie tworzy miniaturki tylko skaluje do miniaturki.

Jak zechcę zmienic rozmiar miniaturki to od razu będę musiał wszystkie miniaturki powiększać a w javascripcie tylko sobie zmienie domyślną szerokość i już...

A pozatym dlaczego twierdzisz że to złe rozwiązanie? Grafiki wcale nie będą wielkie a i nie będzie ich tak też wiele...

[slawek22]

Bo użytkownicy jajo zniosą zanim się im te duże obrazki załadują, transfer też kosztuje. Jak już chcesz koniecznie zrobić tak, żeby po powiększeniu miniaturki pokazywały się od razu to po wczytaniu wszystkich obrazków zrób preloading.

A javascript tak naprawdę nie tworzy miniaturki tylko skaluje do miniaturki.

Właśnie i po co przesyłać pliki, których użytkownik nie obejrzy?

Jak zechcę zmienic rozmiar miniaturki to od razu będę musiał wszystkie miniaturki powiększać a w javascripcie tylko sobie zmienie domyślną szerokość i już...

To sobie napisz skrypt do skalowania obrazków który będzie miał 2 atrybuty: ścieżka i szerokość.

[Pavel]

A czy przypadkiem nie jest tak że jak ustawisz szerokość w CSS na 100px i wysokość zostawisz pustą, to obrazek sam się przeskaluje zachowując proporcje? Jeśli nie to w JS z tego co pamiętam wysokość i szerokość można odczytać tak:

obraz  =  new Image();
obraz.src = 'sciezka do obrazka';
szerokosc=obraz.width;
wysokosc=obraz.height;

[slawek22]

Można tylko po co marnować transfer na przesyłanie miniatur w rozmiarach "dużych" obrazów?

[Pavel]

To już pytanie do autora tematu, a poza tym to że ładujemy zdjęcia o dużym rozmiarze od razu nie oznaczy że wykorzystamy więcej transferu, wystarczy że ogromna większość użytkowników będzie klikać na miniaturkę i oglądać zdjęcie w pełnym rozmiarze. :-) Ponadto zależy od sytuacji np, robisz galerię ze zdjęciami (np portfolio fotografa) i chcesz aby po kliknięciu duże zdjęcia otwierały się bez czekania, można wtedy wczytać tylko duże zdjęcia lub wczytać miniaturki i 'preloadować' duże.