다양한 이미지 크기에 따라 Flexslider 반응하기

Question

나는 100 개가 넘는 이미지를 표시하기 위해 jQuery Flexslider 플러그인을 사용하고 있습니다.

<?php foreach (glob('images/glob/*') as $filename): ?> 
    <li> <img src="<?= $filename ?>"/> </li> 
<?php endforeach; ?> 

내 이미지를 모두 600PX에 같은 높이를 가지고 있지만, 그 폭은 변화되어 아래와 같이 나는 PHP의 foreach 루프를 사용하여 표시하기 위해 그들 모두를 입수했습니다. 일부는 인물 사진이지만 다른 일부는 풍경입니다. php에 클래스를 추가하여 스타일을 조정할 수있는 방법이 있는지 궁금합니다. 예를 들어

:

이

if 
    ($img width > $img height).addClass (landscape) 
else 
    ($img height > $img width).addClass (portrait) 

은 분명히 그 문은 위의 작동하지 않습니다하지만 사람이 어떻게 내 foreach 문에 그 그래서 변화하는 이미지에 클래스를 추가 할 수 있습니다 추가하는 나에게 보여 주실 래요?

Answer 1

사용 getimagesize : http://www.php.net/manual/en/function.getimagesize.php

foreach (glob('images/*') as $filename) { 
    $size = getimagesize($filename); 
    if ($size[0] > $size[1]) { 
     $class="landscape"; 
    } 
    else { 
     $class="portrait"; 
    } 

    print '<li> <img src="'. $filename.'" '.$size[3].' class="'.$class.'" /> </li>'; 
} 

$ 크기 [3] = 적당한 폭과 높이를 추가 거기 = 요소 IMG 속성.