jQuery 또는 PHP 연속 이미지 갤러리

Question

다양한 너비 및 높이의 이미지 갤러리를 표시하여 그 사이에 공백이 없도록하는 방법을 찾고 있습니다.

이 솔루션처럼 뭔가하지만, IE와 호환 및 수평 행이 아닌 수직 열 선호하는 것 : 플러그인 또는 이와 유사한 실패 http://css-tricks.com/seamless-responsive-photo-grid/

는 사람이 acheive하는 방법에 대한 정보를 가지고 있습니까? 나는 약간의 PHP로 bash를 가졌고 주어진 최대 행 높이에 비례 적으로 이미지의 크기를 조정하고 얼마나 많은 공간이 남았는지 추적하는 방법을 알아 냈습니다. 그러나 이미지를 얻을 때 도움이되지 않습니다. max (여전히 약간의 공백을 얻는다).

하나의 아이디어는 이미지를 표시 한 다음 jQuery를 사용하여 너비/높이 특성을 사용하여 크기를 조정하면 y 이미지를 가져 와서 행에 맞출 수있는 방법을 찾아 볼 수 있습니다. x 픽셀 너비.

팔꿈치 - 기름에 짧은 것이 아니라 올바른 방향으로 조금 움직여주십시오. 어떤 도움을 주신 지

Answer 1

에 따라 올바른 위치에 이미지를 배치합니다. 나는 Chris Coyier의 완벽한 사진 격자를 보았고 필터링을 도입했을 때 몇 가지 문제가 발생했습니다.

css-column 원활한 사진 눈금 here 및 here과 관련하여 stackoverflow에서 내 질문/답변을 볼 수 있습니다.

그런 다음 유체 환경에서 jQuery Masnory을 사용하여 자바 스크립트 접근 방식을 시도했습니다. 게시물은 this stackoverflow 게시물에서 확인할 수 있습니다.

그래도 작동하지만 여전히 이미지 사이에 수직 간격이있는 이유를 알아 내려고하고 있습니다.

그래서 내 대답은 당신이 자바 스크립트 접근 방식을 원하는 경우 벽돌을 사용하지만, 또한 내가 그것의 완벽하고 반응 포토 구현을 본 적이 알고 있어야하는 것입니다. 나는 아직도 찾고있다.

Answer 2

좋아요, 우선 정신적으로 그 공간을 격자로 표시해야합니다. 따라서 '캔버스'는 너비가 x 단위이고 높이가 y 단위입니다. 이제 x, y 시작점과 너비가 크고 높이가있는 단위 수를 보유하는 구조에 이미지를 지정합니다.

이제 재미있는 부분은 - 으로 PHP를 실행하는 방법 나는 당신에게 당신이 화면에 인쇄하기 위해 알아야하는 사진에 대한 모든 것을 알려드립니다

$images = array(array(x1_1, y1_1, length_1, width_1, src_1) 
        array(x1_2, y1_2, length_2, width_2, src_2)) 

같은 배열을 만들 것입니다.

echo "<div id=\"myDiv\">; 
foreach($images as $i){ 
    echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">"; 
echo "</div>"; 

이 시점에서 jQuery를 사용하여 특성을 배율로 곱하여 높이 및 너비 요소를 수정합니다.

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.attr("height", this.attr("height")*scale); 
     this.attr("width", this.attr("width")*scale); 
    }); 

}) 

지금 당신이 잠시 동안 지금 원하는 것을 얻을려고 된 X1 및 Y1 속성

$(document).ready(function(){ 
    var scale = 30; //30 pixels maybe? 
    //I'm not a jquery ninja, so please assume my syntax is wrong 
    $("#myDiv").children().each(function(){ 
     this.css('property', value); 
    }); 

})