Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP][HTML] - ładowanie zdjęć po kliknięciu w miniaturę?!
Forum PHP.pl > Forum > Przedszkole
MrMajkel
Witajcie, dopiero zaczynam swoją przygodę z PHP i przy wykorzystaniu go w aktualnym projekcie napotkałem pewien problem który sprawia, że korzystanie ze strony jest nie wygodne... Poniżej podaje część kodu mojej strony która odpowiada za pobranie z serwera zdjęć i umieszczenia ich na stronie zgodnie z narzuconym im szablonem - pod kodem znajduję się mój problem smile.gif
  1. <?php
  2.  
  3. $galerie = array();
  4. $galeria = array();
  5. $galeria['nazwa'] = "nazwa drugiej";
  6. $galeria['miasto'] = "miasto drugiej";
  7. $galeria['title'] = $galeria['nazwa']."<br>".$galeria['miasto'];
  8. $galeria['titleIn'] = $galeria['nazwa']." ".$galeria['miasto'];
  9. $rodzaj['rodzaj'] = "rodzaj";
  10. $galeria['num'] = "21";
  11. $galerie[] = $galeria;
  12.  
  13. foreach($galerie as $galeria){
  14. ?>
  15.  
  16. <div class=gallery">
  17. <div class="">
  18. <div class=" ol-sm-6 col-md-4 col-lg-3">
  19. <a href="img/projects/<?echo $galeria['num'];?>/1.jpg" title="<?echo $galeria['titleIn'];?>">
  20. <figure>
  21. <img alt="" src="img/projects/<?echo $galeria['num'];?>/1.jpg">
  22. <figcaption>
  23. <h3 class="project-title">
  24. <?echo $galeria['title']?>
  25. </h3>
  26. <h4 class="project-category">
  27. <?echo $rodzaj['rodzaj'];?>
  28. </h4>
  29. <div class="project-zoom"></div>
  30. </figcaption>
  31. </figure>
  32. </a>
  33. </div>
  34.  
  35. <?php
  36. $directory ="./img/projects/".$galeria['num']."/";
  37. $dir =opendir($directory);
  38.  
  39. while($file_name=readdir($dir))
  40. {
  41. if(($file_name!=".")&&($file_name!=".."))
  42. {
  43. $img = './img/projects/'.$galeria['num'].'/'.$file_name;
  44.  
  45. echo '<div class="fffg col-sm-6 col-md-4 col-lg-3">';
  46. echo '<a href="'.$img.'" title="'.$galeria['titleIn'].'">';
  47. echo '<figure>';
  48. echo '<img alt="" src="'.$img.'">';
  49. echo '<figcaption>';
  50. echo '</figcaption>';
  51. echo '</figure>';
  52. echo '</a>';
  53. echo '</div>';
  54. echo ' ';
  55. }
  56. }
  57.  
  58. closedir($dir);
  59.  
  60. ?>


Taaaaadam, Pętla działa świetnie, klasy działają bez zarzutów i bardzo ułatwiły mi pracę. Moim problemem na pewno nie jest działanie kodu ale jego optymalizacja. Ponieważ na tą chwilę pętla tworzy około 25 galerii i pobiera łącznie około 15-30 zdjęć na galerie co daje nam całkiem sporą ilość zdjęć... co przekłada się na cholernie długi czas ładowania strony na normalnym komputerze... nie wspomnę już o wersji mobilnej strony ... Początkowo myślałem, że problem rozwiąże przez ukrycie zdjęć ale zapomniałem, że nawet jeżeli klasą karzemy ukryć jakąś treść to nie znaczy, że nie zostanie ona pobrana z serwera - więc było to błędne myślenie wink.gif

Dlatego w ostateczności (niestety nie posiadam jeszcze takich umiejętności i nie znam tak dobrze dostępnych rozwiązań jak Wy wyjadacze kodowi! ) zwracam się do was z prośbą o podrzucenie i mi jakiegoś pomysłu i przeprowadzenie mnie przez proces zoptymalizowania mojego problemu.

Chciałbym to zrobić ajaxem w taki sposób żeby pętla zaczytywała do kodu tylko zdjęcie 1.jpg dla każdej stworzonej galerii, a po kliknięciu w pierwsze zdjęcie uruchamia się proces pobrania zdjęć z katalogu na serwerze dla danej galerii. Sądzę, że pobranie 25 zdjęć przez serwis będzie na pewno o milion razy szybciej niż pobranie ich 400-500 smile.gif

Z góry dzięki za pomoc i wszystkie sugestie !

Hmmm chyba w sobotę wszyscy wyjadacze balują tongue.gif
Niree
https://www.w3schools.com/php/php_ajax_database.asp
Przerób na swój kod.

użyj https://api.jquery.com/click/
MrMajkel
hehe dzięki, zobaczę na którym etapie stanę w miejscu biggrin.gif
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.