Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][PHP]Rozmiar Obrazka
awek
post 19.12.2015, 20:08:03
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 19.12.2015

Ostrzeżenie: (0%)
-----


Witam. Mam z neta taki mały skrypt galerii. Nie znam się na JS więc proszę o pomoc.

Chce aby rozmiar miniaturki był powiedzmy 100x100 a normalnego zdjecia powiedzmy 300x300..

Jak zrobić ten limit ? Chce aby każde zdjęcie bylo takie same.

oto kod:


  1. <script type="text/javascript">
  2. var zdjecia = Array(
  3. Array('images/obraz1.jpg', 'images/obraz1.jpg', 'tytul', 'opis'),
  4. Array('images/obraz2.jpg', 'images/obraz2.jpg', 'tytul', 'opis'),
  5. Array('images/obraz3.jpg', 'images/obraz3.jpg', 'tytul', 'opis')
  6. );
  7. var max_width = 520;
  8. function laduj() {
  9. for(var i = 0; i < zdjecia.length; i++)
  10. document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
  11. zmien(0);
  12. }
  13. function zmien(id) {
  14. document.getElementById('zdjecie').innerHTML += '<div id="ladowanie"></div>';
  15. var custom = '';
  16. var preload = new Image();
  17. preload.onload = function() {
  18. if(preload.width > max_width)
  19. custom = ' style="height: '+(Math.floor(max_width / (preload.width / preload.height)))+'px;width:'+max_width+'px;"';
  20.  
  21. document.getElementById('informacje').innerHTML = '<b>'+zdjecia[id][2]+'</b><br /><i>'+zdjecia[id][3]+'</i>';
  22. document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />';
  23. }
  24. preload.src = zdjecia[id][0];
  25. }
  26. window.onload = laduj;
  27. </script>
  28. <style type="text/css">
  29. #ladowanie {
  30. display: block;
  31. position: absolute;
  32. top: 0;
  33. _top: 50%; /* IE */
  34. left: 0;
  35. width: 100%;
  36. height: 100%;
  37. background: url('loading.gif') no-repeat center center;
  38. }
  39. #zdjecie, #miniaturki {
  40. width: 520px;
  41. position: relative;
  42. }
  43. #miniaturki img {
  44. margin: 5px;
  45. cursor: pointer;
  46. }
  47. </style>
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 10:16