[펄스나인] 반응형 갤러리 + 유튜브(썸네일) > 그누보드5 스킨

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

[펄스나인] 반응형 갤러리 + 유튜브(썸네일) 정보

갤러리 [펄스나인] 반응형 갤러리 + 유튜브(썸네일)

첨부파일

gallery_responsive.zip (207.7K) 86회 다운로드 2021-06-21 08:46:43 포인트 차감10
테스트한 버전5.4.5.5
호환 가능 버전5.4

본문

2021.06.21 / write.skin.php : 체크박스 겹쳐보이던 문제 수정

 

반응형 갤러리 입니다.

 

유튜브 기능 추가하여 유튜브동영상 ID 입력시 썸네일은 자동으로 가져오며

본문에서 영상 자동출력 됩니다.

유튜브 필요없으시면 입력항목 지우고 갤러리로 쓰시면 됩니다!

 

원활한 반응구간 처리를 위해 swiper-5.4.3 플러그인을 채용 했습니다.

 

목록 가로이미지 갯수 :  관리자모드 > 게시판설정의 갤러리 이미지수 의 설정 값에 따름

목록 세로 라인수  :  관리자모드 > 게시판설정의 페이지당 목록 수 의 설정 값에 따름

목록 이미지 영역 높이  :  관리자모드 > 게시판설정의 갤러리이미지 높이 의 설정 값에 따름
사용 여분필드 :  wr_10

썸네일 이미지가 뭉개지시는 분들은
게시판관리 > 게시판 설정에서 갤러리이미지 폭 항목을 600이상으로 설정해주세요.

정독하지 않으시고 이미지가 흐리게나와요~ 하시는 분들은 답 안드릴겁니다 ㅋㅋ

 

그누보드 순정상태 에서 작업 되었고

크롬, 익스11, 엣지, 웨일 에서 크로스브라우징 테스트 하였습니다.

 

목록이미지 반응 구간은 1024px 이상, 768px 이상, 10px 이상 일때 변경 되며

list.skin.php 188라인 breakpoints: { 에서 숫자 입력만으로 쉽게 변경 가능합니다.

 

웹진으로 사용하실 수 있도록

본문(wr_content) 출력 부분은 주석 해두었으니 풀어서 쓰세요~

 

감사합니다.

 

미약하게나마 도움이 되기를 바래봅니다.

추천
26

댓글 전체

좋습니다.
깔끔하고 세련된 스킨을 공개해주시다니, 감사드립니다.
파일첨부와 링크버튼을 오른쪽에 배치한 것이 새롭습니다.
우와~ 너무 깔끔하고 좋습니다. 잘 활용해볼게요^^ 근데 갤러리도 사진을 무한 업로드 할수는 없나요? 두장만 올릴수 있으니.. 갤러리는 수십장을 올릴수도 있고 해서요. 방법이 있는지요?
일반 게시판 스킨중에는 무한업로드가 갤러리도 가능할까 해서 한번 여쭈어봅니다!
그누보드 초짜입니다.
파일첨부는 이미지가 아닌 다른 파일(압축파일 등의 첨부파일)을
올리는 용도로 쓰시면 되고
이미지파일은 에디터안에 [사진] 버튼으로 무제한 업로드가 가능합니다.



파일첨부 input 으로만 이미지를 업로드해야되는 상황이시면
관리자모드 > 게시판관리 > [수정] 에서
업로드 가능한 파일갯수를 늘리시면 됩니다~

첨부파일 없이 에디터의 [사진] 버튼으로 이미지를 업로드 하셔도
목록에서 썸네일은 자동 출력 됩니다.
멋진 스킨을 만들어주셔서 감사합니다.
그런데 우 상단과 좌측 끝으로,
이미지에 박스샤도우를  명확하게 줘서 리스트 썸네일을 강조하고 싶은데
이것을 어디에 적용시켜야 할지 모르겠습니다.
list.skin.php 에서 이미지콘텐트가 출력되는 곳에 넣으면 될 것 같은데
계속 에러가 발생되네요.

리스트 썸네일 이미지를
입체적으로 강조하여 보이게 만들려는데
혹, 알려주시면 감사하겠습니다.

주려는 박스샤도우 값은 아래와 같습니다.

box-shadow: 25px 25px 70px 0px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: 25px 25px 70px 0px rgba(0,0,0,0.75) inset;
-moz-box-shadow: 25px 25px 70px 0px rgba(0,0,0,0.75) inset;
box-shadow는 class="img_link" 쪽에 추가하시고
감싸고 있는 영역을 padding 이나 기타방법으로 좀 넓혀주셔야 되실거에요.

swiper 로 반응형 처리를 해둔거라
이미지를 감싸고 있는 영역이 딱 맞아떨어져서
우측이나 좌측 그림자는 잘릴 수 있습니다~
빠른 답변주셔서 감사합니다.

그런데 제가 다음 url같이 썸네일에 액자를 씌운 상태인데

https://yoriyo.com/bbs/board.php?bo_table=banner

말씀 주신 것 같이 img_link에 박스샤도우를 주면 이미지가 아니라
액자 밖으로 샤도우박스 값이 나옵니다.

제가 생각하는 것은 액자안의 썸네일 이미지 좌측과 상단이 입체적으로
보이게끔 박스샤도우를 하려는데 이게 안되네요.
img_link에 박스샤도우는 이미 값을 줘 받는데  image_content에
영향을 주지 않더라고요.

제가 수정한 img_link 입니다.
근데 이미지 썸네일에는 작동이 안됩니다.
구글 크롬 개발자 도구로 봐도 모르겠네요.
이것저것 짜 맞추기식으로 해서 어디가 틀렸는지도 모르겠습니다.


.img_link {

    margin:50px auto;
    border:6px double rgb(206, 154, 11);
    height:auto;
    width: 100%;
    padding: 55px;
    background-color: #918b89;
    background-clip: content-box;
    background-position: center center; background-repeat: no-repeat; background-size: cover;
    -webkit-box-shadow:  1px 2px 3px 1px rgba(0, 0, 0, .5);
    box-shadow:  0px 3px 10px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
  }
이미지는 <div class="img_link"> 에
background-image:url() 로 백그라운드로 불러오고 있습니다.


<img 로 불러오는게 아니라서 이미지(썸네일)에
효과를 줄 수 없는 상태입니다.

말씀하신 효과를 이미지에 주려면
background-image:url() 이 아닌 <img 로 썸네일을 불러오도록 변경을 하시고
.img_link img {box-shadow: } 를 추가하시면 될것 같습니다.

----------------------

list.skin.php 95라인 아래 부분을

<ul class="img_link" style="height:<?php echo $board['bo_gallery_height']; ?>px; background-image:url('<?php echo $img_content ?>');" onclick="location.href='<?php echo $list[$i]['href'] ?>';">

아래와 같이 변경하시면 <img 로 썸네일을 불러올수는 있으나,
padding 이나 이미지 크기, new 아이콘 위치, 반응형 처리 등 코딩을 새로 잡아주셔야 될것 같습니다.


<ul class="img_link">
<a href="<?php echo $list[$i]['href'] ?>">
<img src="<?php echo $img_content ?>">
</a>


하자에 의한 수정이 아닌 편의에 따른 임의 수정에 대한 질문은
제가 사용자의 모든 상황을 고려할 수 없는 관계로
명쾌한 해결을 해드리기 어려운점 양해 부탁드립니다.

감사합니다.
너무 친절하게 알려주셔서 감사합니다.

말씀주신 것 같이 list.skin.php과 style.css 도 수정하고
약간의 수정도 하였습니다.
음. 그런데 크롬 개발자도구로 봐도 샤도우박스는 먹히지 않네요.
어디서 충돌이 있는 것인지.... 모르겠네요.

이건 말씀주신대로 작업한 테스트 갤러리입니다.
https://yoriyo.com/bbs/board.php?bo_table=photo

스킨 수정에 따른 편의를 위한 수정작업임에도 많은 도움주셔서 감사합니다.
멋진 금요일 되세요.

전체 1,980 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:김민섭(minsup@sir.kr)

© SIRSOFT