Как отфильтровать или найти в AJAX результаты обратного вызова из PHP списка файлов из каталога

Question

Попытка отобразить все фотографии из каталога в div. Нужно сначала показать все портреты, затем квадраты, а затем и пейзажи. Выравнивание и стиль позже, но сначала мне просто нужно указать правильное направление для сортировки результатов обратного вызова.

do1. php

if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['showphotos'])) {
    $af = glob("main/photos/*.*");
    for ($i=0; $i<16; $i++) {
        $iname = $af[$i];
        $supported_format = array('gif','jpg','jpeg','png','mp4');
        $ext = strtolower(pathinfo($iname, PATHINFO_EXTENSION));
        if (in_array($ext, $supported_format)) {
            list($width, $height) = getimagesize($iname);
            if( $height / $width > 1.15) {
                $ori = "p";
            } elseif( $width / $height > 1.15) {
                $ori = "l";
            } elseif( $height / $width < 1.15) {
                $ori = "s";
            } elseif( $width / $height < 1.15) {
                $ori = "s";
            }
            echo "<img class='".$ori.":' title='".$ori.$iname."' src='".$iname."' alt='".$iname."' height='300px' />";
        } else {
            die("something went terribly wrong you ditz!");
        } 
    } 
    exit;
}

все файлы, определяет, будет ли портрет / пейзаж / квадрат, и задает имя класса s, l или c.

Сценарий по индексу. php

$(document).ready(function(){
  $("#galphoto").click(function(){
    $("#chme").children().hide(2000, function() {
        $("#supics").delay(2000).slideDown(2000);
        var id1 = 1;
        $.ajax({
                url:'do1.php',
                type:'POST',
                data:{showphotos: id1},
                success: function(pics){
                    $('#supics').html(pics);
                }
            }); 
        }); 
    }); 
});

Конечно, это помещает все изображения в div. Я думал, что мог бы как-то отфильтровать их, назначив каждому изображению имя класса, основываясь на его ориентации, но после многих проб и ошибок мне это не удалось. Я знаю, что должна быть какая-то простая вещь вроде attr('.p') или что-то в этом роде. Если этот вопрос повторяется, пожалуйста, укажите мне правильную страницу. Спасибо за любую помощь.

Answer 1

Вместо непосредственного вывода результата поместите результаты проверки ориентации в один из 3 массивов.

Затем l oop поверх этих массивов, выводящих то, что вы хотите, вы также сможете изменить атрибуты, чтобы соответствовать ориентации таким образом.

$port = [];
$land = [];
$sqar = [];
$supported_format = array('gif','jpg','jpeg','png','mp4');

$files = glob("main/photos/*.*");

foreach ($files as $file) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    if (in_array($ext, $supported_format)) {
        list($width, $height) = getimagesize($iname);

        if( $height / $width > 1.15) {
            $port[] = $file;
        } elseif( $width / $height > 1.15) {
            $land = $file;
        } elseif( $height / $width < 1.15) {
            $sqar[] = $file;
        } elseif( $width / $height < 1.15) {
            $sqar[] = $file;
        }
    }
}

$htm = '';
foreach ($port as $file) {
    $htm .= "<img class='port' title='p$file' src='$file' alt='$file' height='300px' />";
}
foreach ($sqar as $file) {
    $htm .= "<img class='sqar' title='s$file' src='$file' alt='$file' height='300px' />";
}
foreach ($land as $file) {
    $htm .= "<img class='land' title='l$file' src='$file' alt='$file' height='300px' />";
}

echo $htm;

Answer 2

И это jQuery Решение!

var classes = $('img').map(function() {
    return $(this).attr('class');
});

var sortedArray = classes.sort();
var uniqueClasses = $.unique(sortedArray);
$(uniqueClasses).each(function(i, v)
{
    $('.'+v).wrapAll('<div class ="orientation-'+v+'"></div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="l" title="$ori.$iname" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Stanis%C5%82aw_Mas%C5%82owski_%281853-1926%29%2C_Autumn_landscape_in_Rybiniszki%2C_1902.jpeg/220px-Stanis%C5%82aw_Mas%C5%82owski_%281853-1926%29%2C_Autumn_landscape_in_Rybiniszki%2C_1902.jpeg" alt="$iname" height='300px' />
<img class="p" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Reproduction-of-the-1805-Rembrandt-Peale-painting-of-Thomas-Jefferson-New-York-Historical-Society_1.jpg/170px-Reproduction-of-the-1805-Rembrandt-Peale-painting-of-Thomas-Jefferson-New-York-Historical-Society_1.jpg"  alt="$iname" height='300px' />
<img class="l" src="https://upload.wikimedia.org/wikipedia/commons/5/50/1172_ruwenzori.jpg"  alt="$iname" height='300px' />
<img class="c"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Regular_polygon_4_annotated.svg/1200px-Regular_polygon_4_annotated.svg.png" alt="$iname" height='300px' />
<img class="l" title="$ori.$iname" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Stourhead_garden.jpg/220px-Stourhead_garden.jpg" alt="$iname" height='300px' />

Answer 3

Для достижения результатов мне нужно было использовать .load вместо ajax вызова.

Сначала я отредактировал do1. php, убрав if($_SERVER["REQUEST_METHOD"]... и затем изменил оператор ehco, добавив уникальный идентификатор.

do1. php

  $af = glob("main/photos/*.*");
  for ($i=0; $i<24; $i++)
      {
      $iname = $af[$i];
      $supported_format = array('gif','jpg','jpeg','png','mp4');
      $ext = strtolower(pathinfo($iname, PATHINFO_EXTENSION));
      if (in_array($ext, $supported_format))
        {
              list($width, $height) = getimagesize($iname);
                if( $height / $width > 1.33) {$ori = "p";}
                elseif( $width / $height > 1.33) {$ori = "l";}
                elseif( $height / $width < 1.33) {$ori = "s";}
                elseif( $width / $height < 1.33) {$ori = "s";}
        }
echo "<img id='i".$i."' class='".$ori."' src='".$iname."' alt='".$iname."' height='280px' />";
      }

Так что теперь страница не должна быть AJAX, только что загружен. Также; Каждому изображению присваивается уникальный идентификатор id='i0', id='i1', id='i2'..., а каждому элементу назначается класс в зависимости от его ориентации (портрет = p, ландшафт = l, квадрат = s).

Далее я добавил три элемента span (# c1, # c2, # c3) в div, где я хотел, чтобы содержимое показывалось (#supics).

Затем я отредактировал свой скрипт на LOAD с do1. php insted of использование сценария AJAX POST.

для индекса. php

$(document).ready(function(){
  $("#galphoto").click(function(){
    $("#chme").children().hide(2000, function() {
            $("#supics").delay(2000).slideDown(3000);
            $("#supics").css({"max-height": "700px", "overflow": "auto"});
var $page = $('<div><div>').load('do1.php .p, .s, .l', //loads elements with classes of p, s, & l from do1.php
    function() {
var $p = $page.find('.p'); //finds all class='p' elements & assigns $p as variable to them
var $s = $page.find('.s'); //finds all class='s' elements & assigns $s as variable to them
var $l = $page.find('.l'); //finds all class='l' elements & assigns $l as variable to them

    var ipics = [$p, $s, $l]; //putting variables in an array
    $('#c1').html(ipics[0]); //puts $p (all class.p elements) into element with id='c1'
    $('#c2').html(ipics[1]); //puts $s (all class.s elements) into element with id='c2'
    $('#c3').html(ipics[2]); //puts $l (all class.l elements) into element with id='c3'

       $(ipics[0]).addClass("fad"); //adds another class to all class.p elements for extra styling
       $(ipics[1]).addClass("fid"); //adds another class to all class.s elements for extra styling
       $(ipics[2]).addClass("fod"); //adds another class to all class.l elements for extra styling
      });
    });
  });
});

Это может быть грязным (хотя я не могу судить об этом) , но это позволяет мне загружать все, что мне нужно, а затем сортировать содержимое и стилизовать все, что мне нужно. Я надеюсь, что это поможет кому-то. Спасибо всем за помощь.