멀티갤러리
1. 2021년 12월 16일 오후 6시에 새로 업데이트 하였습니다.
2. 공지에는 배경 색상이 차별화되어 들어갑니다.
3. 이미지 부분 하단에 "상세목록 열기/닫기" 토글버튼을 달았습니다.
4. 제목에 입력되는 글자는 한계치를 넘어가면 꼬랑지에 ... 가 붙으면서 자동으로 절단되게 하였습니다.
구글링해 보니 div에
style=width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis
을 주면 텍스트가 자동으로 잘리면서 ... 이 붙네요. 저도 처음 사용해 봅니다.
근데 width 는 %가 아니라 꼭 px 을 줘야 하네요.
5 옵션 부분입니다. list.skin.php 에서 아래의 부분을 살펴봅니다.
1) $cut_zone = 1; // 가로분할
2) $cut_percent = 97; // 간격을 제외
3) $image_height_percent = 80; // 가로에 대한 세로의 퍼센트
1) 의 경우는 이미지의 가로숫자입니다.
저는 기본값을 pc에서는 3, 모바일에서는 1로 주었습니다.
원하는 숫자를 pc 와 mobile 에서 각각 수정해서 사용하세요.
2) 는 가로 전체에서 이미지영역이 차지하는 퍼센트입니다.
예를 들어 97로 주었으면 이미지가 차지하는 부분이 가로 전체의 97% 이고...
나머지 3% 는 각자에게 균등하게 분할되어 이미지영역 사이의 간격마진으로 처리됩니다.
이 간격은 코드로 계산되어 세로간격에도 동일하게 적용됩니다.
따라서 100을 주면 가로 세로 간격이 딱 달라붙어 버리게 됩니다.
그래서 가로에 이미지 하나씩만을 배치해도
세로 간격 문제로 97 이쪽저쪽으로 주는 것이 보기가 좋습니다.
3) 은 이미지 가로를 100% 로 보았을 때를 기준으로 한 세로의 퍼센트입니다.
그래서 100을 주면 정사각형이 되고
100이하를 주면 가로가 긴 직사각형, 100이상을 주면 세로가 긴 직사각형이 되며
비율 이외의 나머지 부분은 알아서 잘려 나갑니다.
버전 정보
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 38개
여튼 감사드립니다
안되지요 그래서 망서리다 나왔읍니다 좋아요 추천하고 갑니다.
오늘은 원래 컴을 만질 계획이 없었는데...
호텔천사님
https://klick.co.kr/bbs/board.php?bo_table=wedding
이 게시글에서 행사시간이 종료되고 나면 쓸모가 덜해진 그 게시판은 리스트에서 자동으로 목록의 가장 하단으로 내려가 버리는 로직을 짜고 났더니 어디 써먹을 데 없나 싶어서 비슷한 유형의 시간통제 이벤트 컨텐츠를 만드는 와중에 그 중간과정에서 나온 게시판이에요.
css 다듬는데는 옹손이다 보니 생각외로 이쁘게 안 나와서 사용해 주실 분이 있나 고민입니다.
만들면서 중간에도 이런 물건을 만드시다니 ㅋㅋ 대단합니다.
저처럼 생각이 많으신 분이시군요.
질문)
단 갤러리 노출 개수는 조절 가능 한가요? 예를 들어 한줄만 나오게 한다거나?
오늘도 좋은 하루 되세요.
저는 12개로 했는데... 그 외 옵션은 list.skin.php 에 있습니다.
물론 pc와 모바일 모두 따로 적용시켜야 해요.
----------
$cut_zone = 3; // 가로분할
$cut_percent = 97; // 간격을 제외
$image_height_percent = 80; // 가로에 대한 세로의 퍼센트
----------
$cut_zone 을 1로 주면 가로 1개씩 배치됩니다.
$cut_percent 는 가로 전체에서 이미지 부분이 차지하는 퍼센트입니다.
이걸 100 으로 주면 각 영역이 간격 없이 붙어 버립니다.
97로 주면 이미지영역이 97퍼센트, 나머지 3퍼센트는 영역간의 간격마진으로 분할이 되죠. 저는 97로 주었습니다.
주의할 점은 이렇게 가로간의 간격마진은 코드로 계산되어 세로의 간격도 그만큼이 됩니다. 그래서 1개씩 배치를 생각해서 100으로 주면 세로도 바짝 붙어버려서 97정도가 가장 적당하더라구요.
$image_height_percent 는 이미지의 가로를 100퍼센트로 놓고 보았을 때의 세로 퍼센트입니다. 이걸 100 으로 주면 정사각형이 되고 100미만이면 가로가 더 큰 직사각형, 100이상을 주면 세로가 더 큰 직사각형이 됩니다.
주의할 점은 텍스트가 너무 길어 두 줄이 되면 전체 형태가 뒤틀립니다.
그래서 제목길이를 한 줄이 되게 적당히 주어야 해요.
이건 사실 제목의 문자열을 잘라 20글자만 표시되고 나머지는 ... 으로 나타나는 문자열 절단코드를 넣어야 하는데 귀찮아서 생략...
이벤트 게시판을 만들 때 이 게시글의 코드가 필요합니다. 그래서 중간과정으로 만들어 본 거에요.
이벤트 게시판 기대 되네요. ^^
감사합니다.
[https://sir.kr/data/editor/2112/60ae1002d1a167d4fb7ca8e53e6ffed5_1639610081_9434.gif]
[http://sir.kr/data/editor/2112/7f12c3ebaf5176c358b25088283e7453_1639627346_5508.gif]
[http://sir.kr/data/editor/2112/de81d14de73200a6a8d918b301ed9b87_1639647346_0182.gif]
[https://sir.kr/data/editor/2112/7f12c3ebaf5176c358b25088283e7453_1639627346_5508.gif]
비타주리님 감사합니다. 많은 도움이 되었습니다.
하단 리스트에 썸네일도 달고 등등...
현재 이 스킨에는 리스트 썸네일이 없습니다.
나중 업뎃하면서 붙일게요
잘 사용하겠습니다.
반응형으로 만들려면 코드를 다 엎어야 합니다.^^