포트폴리오에 사용하기 좋은 스크롤되는 갤러리 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

포트폴리오에 사용하기 좋은 스크롤되는 갤러리 정보

갤러리 포트폴리오에 사용하기 좋은 스크롤되는 갤러리

첨부파일

portpolio_edit.zip (42.7K) 881회 다운로드 2013-08-29 02:18:39

본문

4s는 베타기도 하고 해서 최대한 원본 건드리지 않는 선에서 작업되어진 갤러리입니다.

http://sir.co.kr/bbs/board.php?bo_table=g4s_skin&wr_id=155&sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC

JMoon 님께서 올려주신 다중 필드 입력용 포트폴리오를 기초로 작업되었고,
Jquery, Jquery-ui, 가 사용됩니다.


1. 다운받은 파일을 /skin/board/ 아래로 업로드후 게시판 설정에서 선택해줍니다. (모바일용은 존재하지않습니다.)
2. 썸네일 부분(모바일은 아닙니다)에서 세로 200px, 가로 마음데로! 설정해줍니다.
3. jquery-ui 를 로드하지 않으신분은

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

  이 스크립트를 /head.sub.php 혹은  /skin/board/list.skin.php 둘중 하나에 입력해 주시면 정상 작동하실꺼예요~



* 현재 local로 작업중이라 나중에 직접 볼 수 있는 화면 링크 추가하도록 하겠습니다.

* 이 겔러리는 또한 페이징 기능이 없습니다.
  게시물이 몇백개씩 올라오는 갤러리와는 좀 어울리지 않습니다.
  초반에 모든 게시물을 불러오기때문에 적당히 올리시는게 정신건강에 좋습니다.ㅋ
  이런 ui에선 페이징 기능을 어떻게 넣어야 할지 감이 안오더라구요 ㅠㅠ;;;;;

* 관리자 로그인시 제목을 클릭하면 내용보기 화면으로 이동합니다.

* 수정화면은 가로 1000px로 스타일 고정되어있습니다.
  수정하실땐 스킨/css/style.css 파일의 357라인 #bo_v 부분을 직접 수정해주셔야 합니다.
  가로가 100%가 아니라 고정으로 사용하실경우는 357라인의 width부분을 그냥 삭제해주세요.


2013-08-16 수정된 부분
자잘한 버그 몇가지 잡고, 전체적인 컬러가 화이트풍으로 바뀌었습니다.
(사이트 컨셉이 변경되서 다시 죄다...ㅠㅠ;)
다시 다운받으시면 되고, 기존의 컬러풍의 자료는~ 폭파했습니다~ ㅋ


2013-08-16일 저녁~

기존 원래의 jquery가 몇가지 수정되었습니다.
스크립트 자체가 윈도우의 넓이를 가져와 나누기 2를 하는 부분이 있어
넓이가 고정일경우 제대로 계산하지 못하는 문제점이 해결되었습니다.


2013-08-17일

Jquery 몇가지와 카테고리 사용, 미사용을 리스트에서 모두 인식하게끔 조정해 놓았습니다.
ie 7, 8, 9, chrome, ff에서 확인됬으며,
이상이 있으신분은 꼬리말로 부탁드립니다.

2013-08-20
elios 님께서 샘플로 볼 수 있는 페이지 링크를 허용해주셨습니다.
http://www.amsale.co.kr/bbs/board.php?bo_table=02_ams
제 사이트는 말그대로 제 사이트라 시간들이기도 아깝고... 다시금 정체모드입니다. ㅠㅠ;
링크 제공 감사드립니다~

2013-08-29
jquery-ui 버전을 위에 안내한 버전으로 fix합니다. 타 버전에선 스크롤등에 문제가 생길 수 있습니다.
ie10에서 유독 문제가 생기는 경우가 있습니다.
1, 2pixel 정도의 계산문제로 레이어가 하단으로 떨어지는 문제입니다.
이럴 경우는 jquery.slide.js 파일의 84라인을

var div_width = $div.width();

var div_width = $div.width() + 1;

와 같이 +1을 주어 해결할 수 있습니다.
그림이 많이 넓어져서 +1에서 해결이 안될경우 +2등 수치를 올려보세요~

+1값과 jquery 의 버전이 맞는파일로 재업로드 되었습니다.
추천
8

댓글 전체

글보기 화면과 내용수정 화면때문에 손을 조금 봐서 다시 업합니다.
해당 스킨의 css/style.css 의 357라인 bo_v값만 수정하면 두 화면의 폭을 조정하실 수 있습니다.
감사합니다 수고 하셨습니다..
바로 적용 해보니..
리스트 화면에 카테고리, 메뉴는 나오고 이미지가 안보입니다 ??
어떤 부분을 수정 해야 할까요?
카테고리 적용 필수이며 내용등록을 한 뒤에 슬라이드식으로 나타날꺼예요
아무것도 등록이 안되있으면 안나오겠죠 ㅠㅠ
등록은 관리자만 버튼보이게해놨습니다
http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101&wr_id=3
에 등록 했습니다 ㅜㅜ
그런데 ??? 리스트에는 안보 입니다 ㅜㅜ
http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101

제가 모질라서 이런 우문을 드립니다.. 제가 뭘 잘못 셋팅 한것 같은데요 ㅜㅜ
죄송 합니다 ㅜㅜ
아참 에디터로 올린사진은 안불러옵니다 ㅠㅠ
이건 개선해보겠습니다
계정이나 관리자접속을 못하니 유추할수있는건
파일로 올리는거랑 jquery ui가 로드되었는지
두가지 체크해보세요 ^^

이제 에디터로 사진 올려도 잘 나옵니당
파일로 올렸습니다....
jquery ui가 로드 된건 어찌 확인 합니까?
링크된것 이야기 하시는 것 맞습니까? 
<link type="text/css" href="<?=$board_skin_url?>/css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="<?=$board_skin_url?>/css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="<?=$board_skin_url?>/css/jquery.ui.slider.css" rel="stylesheet" />
<link rel="stylesheet" href="<?=$board_skin_url?>/css/style.css" type="text/css" media="screen"/>
ㅜㅜ  나만 안되는 것인가요???
사용 해보고 싶은데요 ^^

화면에서 소스 보기를 하면

<h2>이미지 목록</h2>
<div id="fp_gallery" class="fp_gallery">

<ul id="fp_galleryList" class="fp_galleryList">
<li>Total</li><li id="first_open">EVENING DRESS</li><li></li>
</ul>

<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<a href="#" class="img-slide"><img src="http://www.amsale.co.kr/data/file/aaa04_0101/thumb-1270715683_FVxcBKaS_1270715683_mU4oaENF_Celine_280x420.jpg" alt="http://www.amsale.co.kr/data/file/aaa04_0101/1270715683_FVxcBKaS_1270715683_mU4oaENF_Celine.jpg" width="auto" height="420"></a>
<p><a href="http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101&wr_id=3" class="bold">gdfgfgdfh</a> <input type="checkbox" name="chk_wr_id[]" value="3" title="gdfgfgdfh 선택"><br />fhfg~fdhfg<br />dfhdfhfghgf</p>
</div>
</div></div><div class="container">
<div class="content">
<div>
<a href="#" class="img-slide"><img src="http://www.amsale.co.kr/data/file/aaa04_0101/thumb-1270715683_FVxcBKaS_1270715683_mU4oaENF_Celine_280x420.jpg" alt="http://www.amsale.co.kr/data/file/aaa04_0101/1270715683_FVxcBKaS_1270715683_mU4oaENF_Celine.jpg" width="auto" height="420"></a>
<p><a href="http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101&wr_id=3" class="bold">gdfgfgdfh</a> <input type="checkbox" name="chk_wr_id[]" value="3" title="gdfgfgdfh 선택"><br />fhfg~fdhfg<br />dfhdfhfghgf</p>
</div>
</div></div>
</div>
</div>

<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>

<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
</div>

요렇게 있는데요  그림이 안나오네요???? 
이게 왜 이럴까요?
ㅜㅜ
list.skin.php 파일에 jquery-ui 로드 부분이 삭제된 파일이 업로드되어있었습니다.
다시한번 다운받으셔서 list.skin.php 파일만 덮으셔도 될듯싶네요.
다른 html코드는 제대로 불러와지고 있습니다. 허접한 스킨때문에 고생하시는듯해서
죄송하네요 ㅠㅠ;;;;
애고 감사합니다...
잘 만들어 주셔서 잘사용 하겠습니다 ㅎ~
^^ 더운 여름 건강 하세요...

애고애고....
지금 올라와 있는 것도 로드 부분이 없는것 같습니다 ㅜㅜ

내겐 너무 어려운 jquery ㅜㅜ
질문점 드려도 될까요?
jquery-ui 요건 오디 있는걸 불러야 하나요?
궁금해서 열심히 찾아 봤더니 jquery-ui-1.10.3  이 있던데요 다운 받아서 이리저리 봐도 몰겠고 ㅜㅜ
역쉬 너무 어려워서 포기..
으음 파일을 받아서 확인하고 추가한뒤에 다시 업로드해서 올린것인데 희안하네요 ㅠㅠ
저녁시간 조금 지나서 ui 에 대한 추가방법 알려드리겠습니다
지금은 핸펀이라... ㅠㅠ
head.sub.php 파일의 jquery 로드부분 다음줄에
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
이부분을 추가해보세요 ^^
혹 중복되서 그럴우려도 있으니 조금 해보시고 정 안되심 쪽지나 비밀글로 계정알려주시믄 봐드릴게요 ㅠㅠ 적용되셨으면 좋겠습니다
우와 너무 감사드립니다....
잘됩니다.. 제 실력이 모잘라서 귀찬게 해드려서 죄송 합니다 ...
정말 필요로 하는 자료 였습니다 ^^

큰이미지보기 창이 무지 예쁩니다.....

개인적인 생각은 카테고리 분류 안고도 된다면 좋을것 같다는 조그마한 의견을 냅니다

다른 브라우저에서는 예쁘게 옆으로 정열됩니다.
익스10 에서 아래로 1개가 떨어지고 옆으로 정열됩니다...  잡아보려고 노력 중입니다... ㅜㅜ

http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101

실력이 딸려서 만세 부럴지도 ㅋㅋ~
잡으실 수 없으셨을꺼예요 ㅠㅠ 저도 비슷한 문제를
최초 가로폭을 계산하는 스크립트를 수정하고 처음 가로사이즈를 계산할때 딜레이를 살짝 줘서 해결했습니다.
다시 올려진 파일은 해결이 된 버전들입니다.
감사합니다..
바로 적용해 보겠습니다 ^^

무척 예쁘졌습니다 ㅜㅜ
익스 10 아직 ㅜㅜ

딜레이를 살짝 주는 방법좀 부탁 드리겠습니다...
우와~~~
눈물이 앞을 가린다는 ...  찾았습니당 ^^
불량 익스 10  이 나쁜넘이 에러 낸 부분..

예쁘네요 ㅎ~

익스 10에서도 이미지 밀리지 않고 사용 합니다 ㅎ~

하도 많이 이거 만지고 저거 만지고 았다 갔다 해서 어느 것인지 불명확합니다 ㅜㅜ
찾는대로 올려 드리겠습니다...

썸의 DIV width 선언이 안되어서 그런것 같습니다 <-- 추정 입니다.

샘플 입니당 ^^
http://www.amsale.co.kr/bbs/board.php?bo_table=aaa04_0101

좋은 스킨 공개해 주셔서 감사합니다 ㅎ~

썸 사이즈는 오디에 잡아 놓으신것 같은데요 위치점 알려 주세요...............
찾으셨다니 다행입니다.
썸네일...을 둘러싼 레이어(.content)는 float:left 가 적용되어 안쪽의 모든 컨텐츠를 포함한 여분이 없는 div가 되고 그 갯수를 읽어 .container 의 가로를 스크립트가 계산하게 됩니다.
그 과정에서 10버전외에도 가끔 하나 둘 아래로 떨어지는 경우들이 생기는데, 딜레이를 줘서 계산을 잘 하고 넘기게끔 조치는 했으나, elios님처럼 강제적으로 가로를 지정해줘서 해결할 수도 있겠지요.

썸네일 사이즈는 css/style.css 의 70번째 라인에 보시면
height:200px 이고 가로는 auto로 되어있습니다.
그부분을 고정시키셔도 좋을듯합니다.

예쁘게 잘 적용되어있네요. 축하드립니다. ^^
http://shinedesign.co.kr/bbs/board.php?bo_table=online

적용해보았는데요!
크롬에서는 정상작동 하는데
익스플로러10에서는 이미지가 밑으로 내려가네요 ㅠㅠㅠ
방법없을까요?
가로폭이 변경되어 그런것같습니다. 이런경우는  jquery 나 css에서 잡아줘야될부분이 몇군데 되긴하는데 정확히 알려드리기는 지금 좀 곤란하네요.
pc로 가서 다시한번 답변드리겠습니다.
jquery-ui 버전을 위에 안내한 버전으로 fix합니다. 타 버전에선 스크롤등에 문제가 생길 수 있습니다.
ie10에서 유독 문제가 생기는 경우가 있습니다.
1, 2pixel 정도의 계산문제로 레이어가 하단으로 떨어지는 문제입니다.
이럴 경우는 jquery.slide.js 파일의 84라인을

var div_width = $div.width();

var div_width = $div.width() + 1;

와 같이 +1을 주어 해결할 수 있습니다.
그림이 많이 넓어져서 +1에서 해결이 안될경우 +2등 수치를 올려보세요~

혹은 재업로드 되어있으니 다운받아 다시 해보세요~
별다른 수정없이 잘 되나요?
직접 db를 불러오고 별도로 제작된거긴 하지만....
아직 수정작업을 거치지 않아서요.

잘된다니 다행입니다. ^^
그누보드 5 베타에 적용시키니 Warning: include_once(G4_LIB_PATH/thumbnail.lib.php) [function.include-once]: failed to open stream: No such file or directory in /www/en-wuri_com/gnu/skin/board/portpolio_edit/view.skin.php on line 3

Warning: include_once() [function.include]: Failed opening 'G4_LIB_PATH/thumbnail.lib.php' for inclusion (include_path='.:/usr/local/php/lib/php') in /www/en-wuri_com/gnu/skin/board/portpolio_edit/view.skin.php on line 3

리스트에는 이런 에러가 뜨고 최근게시물에서 글을 누르면

Fatal error: Call to undefined function get_view_thumbnail() in /www/en-wuri_com/gnu/skin/board/portpolio_edit/view.skin.php on line 130 이런 메시지가 뜨는데 뭐가 문제일까요 ㅠㅠ
G4_LIB_PATH <-- g4s 시절 만들어진 스킨입니다.
G4 부분을 G5로 바꿔주세요.

그리고 최근게시물에서 누르면 <-- 이란것은 포트폴리오 목록이 아닌 본문을 보여줄텐데요.
링크를 보시면 view.skin.php 파일이죠. 이 view은 관리자만 볼수있게 되어있어서, 다른 view화면 그대로 사용하셔도 됩니다.
감사합니다. 이쁜스킨인데 사용을 못하고 있네요 ;;

select * from 31 where wr_is_comment = 0 order by wr_num DESC
1064 : You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '31 where wr_is_comment = 0 order by wr_num DESC' at line 1
error file : /bbs/board.php

스킨 적용하고 제이쿼리 ui 링크시켰는데 이렇게 떠요 ㅠㅠ
이 에러는 jquery와는 상관이 없습니다. '31 where' 라고 된걸보니 g5에 g4s를 사용중이신듯 합니다.
이 스킨은 g4s용으로 개발된것이라, g5에서사용하시려면 함수를 일괄변경 하셔야 합니다.
G4를 G5로 변경했습니다.
리스트 스킨에 43번째줄
$sql_pt = " select * from {$tmp_write_table} where wr_is_comment = 0 {$category_sql} order by wr_num DESC ";
이부분을 수정하면 될거 같은데 방법을 모르겠네요
select * from bbs01 where wr_is_comment = 0 order by wr_num DESC

1146 : Table 'h3studio.bbs01' doesn't exist

error file : /bbs/board.php


이렇게 나오는데 뭔가요? ㅜㅜ
감사합니다.
적용해보았습니다.
테스트 페이지 입니다. http://www.starbug.co.kr/bbs/board.php?bo_table=test
잘 나오긴 하는데 이미지가 흐려보입니다. 그리고 처음 보여지는 화면에서 이미지가 2개 보이는데 3개 보이게 설정을 하려면 어떻게 해야 하나요...3개가 더 좋을거 같은데요...
고수님들의 답변 기다리겠습니다.
행복한 하루 되세요.
이미지가 흐려보이는건 썸네일 사이즈 때문입니다.
실제 사이즈와 동일하게 맞추시거나 200%정도 크게 잡으시면 됩니다.

2번째것부터 보이게 하려면
/js/jquery.slide.js
이 스크립트에서
//opens a gallery after cliking on a city / gallery
function openGallery($gallery){
이부분을 살펴보세요.
아마 current 리셋부분에 0대신 1이나 2넣어주면 되지 않을까 싶은데요 ^^;;;

썸네일 조정은 여기 문서가 많습니다~
전체 2,451 |RSS
그누보드5 스킨 내용 검색

회원로그인

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