이미지가 PHP 클래스에 의해 동적으로 크기가 조정될 때 Zurb Foundation의 Interchange.js에 문제가 발생했습니다.

Question

저는 Zurb Foundation을 사용하여 반응 형 사이트를 구축하고 있습니다.

URL에 새로운 차원의 쿼리 문자열을 추가하면 gdlib를 사용하여 이미지 크기를 조정하고 캐시하는 PHP 스크립트가 있습니다. 예를 들어 폭 300 픽셀로 이미지 크기를 조정하려면 : 나는 또한 꽤이 URL을 만들고 쿼리 문자열을 피하기 위해 일부 htaccess로 재 작성 규칙을 사용하고

http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300

.

http://www.mydomain.com/img/300w/path/to/picture1.jpg

PHP의 파일 크기가 조절 된 버전이 캐시에 이미있는 경우이므로 출력하는 경우, 폭 또는 높이, 수표가 아니라면 제한하는 간단한 연산을 수행 그래서이 URL은 전술 한 것과 동일한 결과를 얻을 이미지 크기를 조정하고 imagejpeg를 사용하여 저장 한 다음 헤더 ("Content-type : image/jpeg")로 출력합니다.

는 또한 Zurb 재단을 사용하여 자바 스크립트과 같이 교환을 사용하려는 오전 :

<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg" 
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)], 
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]"> 

그러나이 작동하지 않습니다. 두 중단 점 모두에 대해 300px 만 표시됩니다. 많은 테스트를 한 후에 src 속성에있는 것만을 사용하고 있음이 분명합니다. 크기 조정 스크립트를 통과 한 이미지가 작동하지 않습니다. 전체 크기 이미지의 직접 경로 인 중간 이미지를 사용해야하는 경우에도 마찬가지입니다.

나는 교환 자바 스크립트를 디버깅하려고했지만 Javascript에는 익숙하지 않다.

도움이나 조언을 보내 주시면 감사하겠습니다. 누군가는 반응 형 사이트에서 interchange.js를 사용하여 PHP로 동적으로 크기가 조정 된 이미지를 사용하려고 노력해야합니다.

Answer 1

인터체인지를 디버깅 할 필요가 없습니다. 꽤 잘 작동합니다.

먼저 interchange.js (의존성) 전에 foudation.js 파일을 포함 시켰습니까?

디버깅을위한 팁 : 기본/중간/소형으로 시도하고 다른 이미지 (예 : 다른 색상의 사각형)를 사용하여 변경 사항을 신속하게 확인합니다.

또한이 예에서는 하나의 경로 (아래 참조)가 있으며 "기본"명명 된 쿼리가 있습니다. 동일한 이미지를 두 번로드하는 시점은 무엇입니까? 기본 크기를 src = ""로 지정하고 이후 크기를 (일반적으로) 더 크게 설정할 수 있습니다.

src ("예 : small.jpg")를 평소와 같이로드하므로 (js를 사용하지 않고 표시됩니다) 상호 교환을 수행하면 이름이 지정된 쿼리/미디어 쿼리에 따라 THEN이 더 큰 이미지를로드합니다. 따라서 업로드시 모든 이미지 크기를 생성 할 수 있습니다 (필요한 크기가 있는지 확인하지 않아도 됨). 적어도, 그것은 내가 워드 프레스로하는 방식입니다.

<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg" 
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)], 
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]"> 

Answer 2

나는 URL을 포함하는 매개 변수 문제와 자신의 정규 표현식이있을 수있는 Zurb Foundation Github repo Issues에서 볼 수 있듯이