2009-07-30 6 views
1

자산의 업로드 날짜별로 그룹화 된 미리보기 이미지를위한 시각적 jQuery 기반 브라우저를 구축하려고합니다. 백엔드 부분은 괜찮지 만 수십에서 수천 개의 자산을 (잠재적으로) 처리 할 수있는 실행 가능한 시각적 솔루션을 찾기가 힘듭니다. 라이트 박스에서 처리되기 때문에 내용을 표시하는 데 문제가 없으므로 실제로 미리보기 이미지를 표시하는 방법을 찾아야합니다.jQuery 미디어 브라우저

나는이 plugin과 인터페이스를 시도했지만 100 개 이상의 레코드를 얻으면 많은 문제가 발생했습니다. 모든 것이 무섭게 응답하지 않게됩니다. 이상적으로, 대량로드보다는 페이지로드에 필요한 미디어를로드하기 위해 에이잭스를 빌드 할 수 있기를 원합니다. 누구든지이 효과를 얻기 위해 레버리지를 사용하거나 적어도 많은 양의 컨텐츠를 검색하기위한 좋은 사용자 인터페이스를 제공 할 수있는 좋은 플러그인을 알고 있습니까?

분명히하기 : 저작물을 업로드 할 때 생성되는 미리보기 이미지를 적절하게 생성했습니다.이 이미지는 페이지에 표시되고 미리보기 이미지를 클릭하면 라이트 박스에로드됩니다. 난 그냥 업로드 날짜별로 정렬 된 엄지 손톱의 큰 수량을 검색하는 좋은 방법을 결정하는 중이 야.

답변

0

실제로이 상황을 위해 사전 빌드 플러그인을 구현하는 좋은 방법이 아니 었습니다. 나를 위해 그것을 수행하는 가장 좋은 방법은 jQuery UI 슬라이더를 구현하는 것이 었습니다. 그런 다음 그 정지 이벤트에서 아약스를 수행했습니다. 세로 스크롤을 사용하여 div에 적절한 데이터를로드하십시오.

아마도 가장 우아하거나 가장 좋은 해결책은 아니지만 상황에 맞는 것으로 충분히 멋지게 보일 수 있습니다.

1

전체 크기 이미지를 축소하여 성능을 저하시키는 것처럼 들립니다. 이미지에 미리보기 이미지에 사용할 수있는 작은 버전이 있습니까?

+0

그래, 나는 CSS를 통해 더 작게 보이게하려고 시도하지 않고 실제 크기가 축소 된 이미지를 생성하고 있습니다. 라이트 박스는 전체 크기 이미지를 표시하지만 썸네일은 최대 75x75 픽셀입니다. – Chelsea

+0

한 번에 모든 이미지를 가져 오기 위해 단일 아약스 호출을하는 경우 반환하는 레코드에 따라 성능이 저하 될 수 있습니다. 많은 브라우저는 역동적 인 HTML을 신속하게 렌더링하지 않습니다. 한 번에 50 개의 이미지를로드하고 라이트 박스의 특정 지점을 지나치는 등의 트리거 이벤트에 더 많은로드를하는 디자인을 고려해보십시오. 한 번의 호출보다 훨씬 나은 성능을보아야합니다. 브라우저가 모든 페이지 자산을 동일한 도메인에서 가져 오려고하는 경우 동시성 문제가 발생할 수도 있습니다. (예 : mysite.com vs images.mysite.com) –

+0

그게 내가하려는 일입니다. 방금 서버에서 모든 이미지의 배열을 반환하지만 처음 20 개 정도를 반환하고 사용자가 스크롤 할 때 더 많이로드 할 수 있기를 원하지만 시각적으로 찾는 데 어려움을 겪고 있습니다. 그 기능을 지원하는 매력있는 플러그인. – Chelsea

관련 문제