슬라이드 쇼를 만들 때 http://fotorama.io/을 사용하고 있으며, # of imgs 때문에 페이지 로딩 시간이 늘어납니다.Fotorama - CSS Sprite를 사용할 때 축소판을 생성하는 방법은 무엇입니까?
Fotorama는 이미지에서 미리보기 이미지를 자동으로 생성 할 수 있습니다. 로드 속도를 높이기 위해 이미지를 CSS 스프라이트에 결합했습니다. 미리보기 이미지를 생성하려면 "img"태그가 필요합니다.
"img"태그를 사용하지 않을 때 엄지 손가락을 표시하는 방법에 대한 아이디어가 있습니까?
어쩌면 약간 오래된 질문이지만 here은 <div style='background: url()'>을 엄지 손가락으로 사용하는 바이올린입니다. 스프라이트을 사용하지 않지만 스프라이트를 만드는 방법을 알고 있다면 쉬운 단계입니다. CSS에 .thumbs a div { background: url(myimage.jpg);}을 추가하고 모든 div에 background-position:-30px -150px; 등등을 추가하면됩니다.
코드는 custom-thumbs 예제에서 복사되며 img 대신 div 스타일로 CSS가 변경됩니다.
BTW : 나를 fotorama에 소개해 주셔서 감사합니다. 기본적으로 내가 코딩 한 갤러리입니다. css-sprites를 제외하고.
스프라이트에 대한 도움이 필요하면 작은 js 라이브러리 및 셸 스크립트를 사용하여 스프라이트를 자동 생성하고 이미지 폴더를 코딩하십시오.
저는 150 페이지 정도의 이미지가있는 것처럼 보이는 스프라이트를 사용해야합니다. 그것 때문에 나는 끔찍한 페이지 로딩 시간을 갖게되었다. 이 문제를 해결할 수있는 방법에 대해 올바른 방향으로 가르쳐 주시겠습니까? 모든 이미지를 표시해야합니다. –
이미지가 미리보기 이미지가 더 크거나 큽니까? 엄지 손톱은 모든 이미지를 담고있는 하나의 큰 이미지로 결합 된 다음 CSS'background-position'으로 처리 할 수 있습니다. 이렇게하면 요청 오버 헤드가 크게 줄어 듭니다. 풀 사이즈 이미지 인 경우 i 프레임 전용 비디오에 이미지를 넣고 비디오 플레이어로 이미지를 표시 할 수 있습니다. Fotorama를 사용하고 있습니까? 아마도 새로운 질문을 열어야 할 것입니다. – Mathias