Essayer d'afficher toutes les photos d'un répertoire dans une div. Vous cherchez à montrer tous les portraits en premier, puis les carrés, puis les paysages en dernier. S'alignera et stylera plus tard, mais j'ai d'abord besoin d'un point dans la bonne direction sur la façon de trier les résultats d'un rappel.

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;
}

Ce qui précède obtient tous les fichiers, détermine si portrait / paysage / carré et définit un nom de classe de s, l ou c.

Script sur Index.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);
                }
            }); 
        }); 
    }); 
});

Bien sûr, cela met toutes les images dans le div. J'ai pensé que je pouvais les filtrer d'une manière ou d'une autre en attribuant à chaque image un nom de classe basé sur leur orientation, mais après de nombreux essais et erreurs, je n'ai pas réussi. Je sais qu'il doit y avoir quelque chose de simple comme attr('.p') ou quelque chose. Si cette question est en double, veuillez me diriger vers la bonne page. Merci pour toute aide.

0
Sheepherder 13 janv. 2020 à 23:46

3 réponses

Meilleure réponse

Pour obtenir les résultats, je devais utiliser .load au lieu d'un appel ajax.

J'ai d'abord modifié do1.php en supprimant le if($_SERVER["REQUEST_METHOD"]..., puis j'ai modifié l'instruction ehco pour ajouter un identifiant unique.

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' />";
      }

Alors maintenant, la page n'a pas besoin d'être AJAX, appelée juste chargée. Aussi; Chaque image se voit attribuer un identifiant unique id='i0', id='i1', id='i2'..., et chaque élément a une classe attribuée en fonction de son orientation (portrait = p, paysage = l, carré = s).

Ensuite, j'ai ajouté trois éléments span (# c1, # c2, # c3) dans la div où je voulais que le contenu soit affiché (#supics).

Ensuite, j'ai modifié mon script en LOAD à partir de do1.php au lieu d'utiliser le AJAX POST.

Script sur Index.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
      });
    });
  });
});

Cela peut être sale (même si je ne suis pas un juge pour le déterminer), mais cela me permet de charger tout ce dont j'ai besoin en même temps, puis de trier le contenu et de le styliser de toute façon dont j'ai besoin. J'espère que ça aide quelqu'un. Merci à tous pour l'aide.

0
Sheepherder 15 janv. 2020 à 16:46

Au lieu de produire le résultat directement, placez les résultats de votre contrôle d'orientation dans l'un des 3 tableaux.

Faites ensuite une boucle sur ces tableaux produisant ce que vous voulez, vous pourrez également modifier les attributs pour qu'ils correspondent à l'orientation de cette façon.

$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;
4
RiggsFolly 13 janv. 2020 à 21:29

Et voici la solution 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' />
1
Bilel 13 janv. 2020 à 21:57