내 웹 사이트에 제한된 너비의 사진 갤러리를 추가하고 싶습니다 (높이는 중요하지 않음). 나는 많은 종류의 갤러리를 시도했지만, 모두 사진의 너비 나 높이에 달려있었습니다. 그때 나는 "왜 페이스 북과 같은 patern을 사용하지 않을까?"라고 생각했지만, 내 문제는 어떻게 해야할지 모르겠다는 것입니다. 나는 페이스 북과 같은 복잡한 갤러리가 필요하지 않지만 자동 크기 조정이 가능한 사진 (앨범에 사진을 표시하는 작은 축소판)과 왼쪽 및 오른쪽 화살표가있는 일반 크기로 확장하려면 클릭하면됩니다. 내 목표를 달성하도록 도와 주시겠습니까? 뭔가 명확하지 않은 경우 코멘트 섹션에서 나에게 물어보십시오. 나는 영어를 잘 말하지 않습니다.css와 jquery로 페이스 북을 닮은 갤러리를 만드는 방법은 무엇입니까?
추신 : 내 모든 사이트는 html, jquery 및 css를 기반으로합니다.
아래 CSS 속성을 사용하여 이미지의 크기를 다시 조절할 수 있지만 위에서 언급 한대로 로딩 시간에 별다른 이점이 없으며 서버 측 스크립트가 더 좋은 옵션 일 것입니다. PHP로. 그렇지 않은 경우 아래 속성 및 배경 이미지와 함께 너비와 높이가 설정된 div를 만들면 효과가 있습니다. 단점은 onClick/JavaScript를 사용하지 않고 div를 연결할 수 없다는 것입니다.
background-size: 100%;
가장 좋은 해결책은 미리 정의 된 제약 조건 (예 : 미리보기 이미지, 미리보기 및 전체 크기)으로 이미지 크기를 조정하는 서버 측 크기 조정 스크립트를 사용하는 것입니다. 이를 수행하는 방법은 여러 가지가 있습니다 (예 : http://www.reconn.us/image_thumbnail.html, PHP 용).
간단한 방법은 CSS 스타일 속성을 사용하여 브라우저의 이미지 크기를 조정하는 것입니다. 이것은 사용자가 풀 사이즈로보기를 원한다면 서버가 항상 큰 이미지를 보내는 단점이 있지만 img 태그에서 너비와 높이를 설정하기 만하면됩니다.
자바 스크립트로 이미지의 크기를 쉽게 조정할 수 없습니다. 먼저 전체 이미지를 다운로드하면 대형 갤러리의 경우 매우 느립니다. 익숙한 기술 (예 : PHP/ASP.Net/Python/Ruby)을 사용하여 서버에서 축소판을 생성해야합니다. – Basic