[AJAX][PHP][HTML] - ładowanie zdjęć po kliknięciu w miniaturę?!, Problem z pobieraniem zdjęć na stronę... Opcje

[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

[PHP] pobierz, plaintext 
<?php
 
            $galerie = array();
            $galeria = array();
            $galeria['nazwa']     =     "nazwa drugiej";
            $galeria['miasto']    =     "miasto drugiej";
            $galeria['title']     =     $galeria['nazwa']."<br>".$galeria['miasto']; 
            $galeria['titleIn']   =     $galeria['nazwa']." ".$galeria['miasto']; 
            $rodzaj['rodzaj']     =     "rodzaj";
            $galeria['num']       =     "21"; 
            $galerie[]            =     $galeria;
 
            foreach($galerie as $galeria){
          ?>
 
            <div class=gallery">
              <div class="">
                <div class=" ol-sm-6 col-md-4 col-lg-3">
                  <a href="img/projects/<?echo $galeria['num'];?>/1.jpg" title="<?echo $galeria['titleIn'];?>">
                    <figure>
                      <img alt="" src="img/projects/<?echo $galeria['num'];?>/1.jpg">
                      <figcaption>
                        <h3 class="project-title">
                          <?echo $galeria['title']?>
                        </h3>
                        <h4 class="project-category">
                          <?echo $rodzaj['rodzaj'];?>
                        </h4>
                        <div class="project-zoom"></div>
                      </figcaption>
                    </figure>
                  </a>
                </div>
 
                <?php
                  $directory     ="./img/projects/".$galeria['num']."/";
                  $dir            =opendir($directory);
 
                  while($file_name=readdir($dir))
                      {
                         if(($file_name!=".")&&($file_name!=".."))
                          {
                    $img = './img/projects/'.$galeria['num'].'/'.$file_name;
 
                    echo  '<div class="fffg col-sm-6 col-md-4 col-lg-3">';
                    echo  '<a href="'.$img.'" title="'.$galeria['titleIn'].'">';
                    echo  '<figure>';
                    echo  '<img alt="" src="'.$img.'">';
                    echo  '<figcaption>';
                    echo  '</figcaption>';
                    echo  '</figure>';
                    echo  '</a>';
                    echo  '</div>';
                    echo ' ';
                          }
                      }
 
                  closedir($dir);
 
                ?>
[PHP] pobierz, plaintext 

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

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

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

Hmmm chyba w sobotę wszyscy wyjadacze balują

Ten post edytował MrMajkel 27.05.2017, 17:35:57

[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