의 봉사 이미지는 나는 이것에 대해 자주 묻는 질문 영역 (알 수없는 크기의 이미지를 제공) 읽고 있었다,하지만 난 문제가 있어요 이미지를 파일 이름에 직접 저장하고 PhotoSwipe 초기화 (API 섹션의 gettingData 이벤트) 중에 프론트 엔드에서 파싱합니다.PhotoSwipe 울부 짖는 소리에 따라 같은 솔루션을 구현하기 위해 크기를 알 수없는
내 이미지를 저장하기 위해 cloudinary를 사용하고 있습니다. 어떤 아이디어?
PhotoSwipe는 이미지의 너비 및 높이 치수를 지정해야합니다.
Cloudinary를 사용하여 이미지를 업로드하는 경우 다음이 적용됩니다.
Cloudinary의 업로드 API를 성공적으로 호출하면 업로드 된 이미지의 너비와 높이 크기가 포함됩니다.
이러한 치수는 웹 응용 프로그램 데이터베이스 내에 저장 될 수 있으며 요청에 따라 나중에 가져올 수 있습니다 (예 : PhotoSwipe가 사용되는 페이지를 렌더링 할 때 이미지 경로와 함께 치수를 연결).
기존 이미지와 관련된이 정보가 누락 된 경우 Cloudinary의 Admin API를 사용하여 이미 업로드 된 이미지의 세부 정보를 나열하고 이에 따라 DB를 채울 수 있습니다. 루비의 예를 들면 다음과 같습니다에
Cloudinary::Api.resource('sample')
더 많은 정보를 찾을 수 있습니다 이 http://cloudinary.com/documentation/admin_api#details_of_a_single_resource
예 PhotoSwipe의 창조자 "를 취하거나 그것을두고 중"간단한 일을 유지 그는 말한다. 하지만 여전히 모바일 및 데스크톱 용으로 가장 적합한 라이트 박스입니다.
업데이트는 당신이 이미지 크기는 기존 fancybox/라이트 박스의 HTML 구조를저기서없이 PhotoSwipe init을하게됩니다 작은 jQuery 플러그인을 썼다.
https://ergec.github.io/jQuery-for-PhotoSwipe/
당신은 일을 더 잘 할 수있는 몇 가지 옵션이 있습니다.
더러운 해결책. 이것은 두 장의 이미지에 대해서는 충분할 수 있지만 이미지가 10 장 정도있는 경우 init을 기다리는 데 너무 많은 시간이 걸릴 것입니다.
페이지에 원본 크기로 이미지를 삽입하십시오. 이렇게하면 window load의 이미지 크기에 액세스 할 수 있으므로 실제 크기로 이미지 배열을 구성 할 수 있습니다. init PhotoSwipe.
2 당신은 이미지가로드되거나되지 않은 경우 감지 http://imagesloaded.desandro.com/ 같은 jQuery를 플러그인을 사용할 수 있습니다. 100x100과 같은 크기의 작은 이미지 자리 표시자를 사용하여 문서에서 PhotoSwipe를 초기화 할 수 있습니다. 그런 다음 플러그인 프로세스에 따라 PhotoSwipe API를 사용하여로드 된 이미지를 업데이트하십시오.
가장 진보 된 솔루션. 위에서 언급 한 imagesLoaded 플러그인은 jquery의 지연 객체를 사용합니다. http://api.jquery.com/category/deferred-object/ 언제든지 자신 만의 플러그인을 작성할 수 있습니다.