Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] rozmiar zdjęcia
Forum PHP.pl > Forum > Po stronie przeglądarki
Vasquez21
przejrzałem forum... znalazłem kilka tematów, ale albo źle szukałem, albo nie ma odpowiedzi na poniższe pytanie.

Problem jest następujący na stronie generują mi się na podstawie danych z bazy adresy do zdjęć oraz ich miniaturek.
Na stronie wyświetlam miniaturki natomiast już wykorzystując jquery przechwytuję ukryte inputy, które zawierają adres dużych zdjęć (tylko na takie rozwiązanie wpadłem)

Problem w tym, że chciałem zmniejszać "duże zdjęcia" do jakiegoś określonego rozmiaru. Jednak w momencie kiedy próbuję czytać wielkość zdjęć otrzymuję 0 i 0 (width i height). Dodałem więc .load :

  1. $(objImage).load(
  2. function()
  3. {
  4. //kod czytający rozmiar
  5. });


Problem jest jednak taki, że teraz za pierwszym razem kiedy najadę na zdjęcie rozmiar jest czytany poprawnie i zdjęcie jest ładowane, w momencie kiedy jednak drugi raz najadę na ten sam odnośnik zdjęcie już się nie ładuje... czy jest to związane z tym, że metoda .load działa tylko w momencie kiedy już zdjęcie jest załadowane?

poniżej kod w jquery:

  1. $('.tonus').tooltip({
  2. delay: 0,
  3. showURL: false,
  4. bodyHandler: function()
  5. {
  6. var new_height = 0; //nowa wysokosc zdjecia
  7. var new_width = 0; //nowa szerokosc zdjecia
  8. var height = 0; //wysokosc zdjecia (zaladowanego)
  9. var width = 0; //szerokosc zdjecia (zaladowanego)
  10. var mnoznik = 0.0; //mnoznik do zmiany rozmiaru zdjecia
  11. var pic_size = 300; //maksymlna szerokosc/wysokosc
  12. var img_link = $(this).next("input").val(); //czytam sciezke do zdjecia
  13.  
  14. //tworzenie obiektu img do wyswietlenia
  15. var new_img = $("<img>");
  16. new_img.attr("src",img_link);
  17.  
  18. //tworzymy obiekt zdjecia
  19. var objImage = new Image();
  20. objImage.src=img_link;
  21.  
  22. $(objImage).load(
  23. function()
  24. {
  25. //ponizej malo istotny kod obliczajacy zmiane rozmiaru zdjecia
  26. height = objImage.height;
  27. width = objImage.width;
  28. if (height > pic_size || width > pic_size)
  29. {
  30. if (height > width)
  31. {
  32. if (height > pic_size)
  33. {
  34. mnoznik = pic_size / height;
  35. new_height = height * mnoznik;
  36. new_width = width * mnoznik;
  37. }
  38. }
  39. else if (width > height)
  40. {
  41. if (width > pic_size)
  42. {
  43. mnoznik = pic_size / width;
  44. new_height = height * mnoznik;
  45. new_width = width * mnoznik;
  46. }
  47. }
  48. else
  49. {
  50. mnoznik = pic_size / width;
  51. new_height = height * mnoznik;
  52. new_width = width * mnoznik;
  53. }
  54. }
  55. else
  56. {
  57. new_height = height;
  58. new_width = width;
  59. }
  60. //podstawiam obliczona szerokosc i wysokosc
  61. new_img.attr("width",new_width);
  62. new_img.attr("height",new_height);
  63. });
  64.  
  65. return new_img; //zwracam obiekt img zawierajacy zdjecie
  66. }
  67. });


Będę wdzięczny za pomoc smile.gif
masiakla
Event load jest wywoływany tylko raz podczas wczytania obrazka, kiedy jest wczytany możesz wykorzystać już jakieś zdarzenia z myszki.
Vasquez21
funkcja "tooltip" odpala się właśnie po najechaniu na obrazek (i dopiero wtedy jest ładowany pomniejszony obrazek), czy jest jakaś możliwość aby sprawdzić czy .load był już wcześniej wykonany?
masiakla
Cytat(Vasquez21)
[...]Jednak w momencie kiedy próbuję czytać wielkość zdjęć otrzymuję 0 i 0 (width i height).[...]
Jak to zwróci tobie zero puść load'a, jeżeli coś tam będzie to działaj dalej.
Vasquez21
dzięki wielkie
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.