[최신글] 이미지 슬라이더 최신글 Wide로 적용하기
2015.04.25 12:07
4,904
18
-
- 배포파일 : image_slider_w.7z (902byte) 후원포인트 : 500포인트• 다운로드수 : 9
• 최종수정일 : 2015-04-26 01:35:48
본문
eyoom/theme/basic/skin_bs/latest/image_slider
를 복사해서 아주 약간 수정했습니다.
사소한 내용이어서 수정한 사항만 알려드려도 될 터이지만
'image_slider'와 병행하려면 별도의 스킨이 있어야 하기에 따로 올립니다.
eyoom/theme/basic/css/common.css
carousel-e1
아래에...
/*carousel-e2*/
.carousel-e2 .carousel-caption {
left: 0;
right: 0;
bottom: 0;
padding: 7px 15px;
background: rgba(0, 0, 0, 0.5);
}
.carousel-e2 .carousel-caption p {
color: #fff;
margin-bottom: 0;
}
.carousel-e2 .carousel-arrow a.carousel-control {
opacity: 1;
font-size:16px;
height:inherit;
width: inherit;
background: none;
text-shadow: none;
position: inherit;
}
.carousel-e2 .carousel-arrow a i {
top: 50%;
opacity: 0.6;
background: #000;
margin-top: -15px;
position: absolute;
color: #fff;
padding: 7px 12px;
text-align: center;
margin-left: 3px;
margin-right: 3px;
}
.carousel-e2 .carousel-arrow a i:hover {
opacity: 0.8;
color: #e33334;
}
.carousel-e2 .carousel-arrow a.left i {
left: 0;
}
.carousel-e2 .carousel-arrow a.right i {
right: 0;
}
를 추가합니다.
eyoom/theme/basic/skin_bs/latest/image_slider_w/latest.skin.html
이미지와 제목에는 해당글 주소의 링크가 걸립니다.
<a href="{.href}"><img class="img-responsive" src="{.image}" alt=""></a>
다른 곳으로 링크하려면...직접 위 소스에 주소를 입력해주면 됩니다.
이미지마다 각기 다른 링크를 원하는 경우는...
게시판을 따로 만들지 말고
(latest.skin.html) 아래의 sample 예제를 이용합니다.
eyoom/theme/basic/skin_bs/latest/image_slider_w/style.css
max-height: 300px;
원하는 높이로 수정합니다.
eyoom/theme/basic/layout/head_bs.html
<!--=== End Header ===-->
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
사이에...
<!--=== End Header ===-->
<div>
<!--------------- EBL Image Slider Wide 최신글 영역 시작 --------------->
<!--{latest->latest_eyoom('image_slider_w','title=게시판 제목||bo_table=게시판 아이디||count=5||cut_subject=50||img_view=y||bo_direct=n||img_width=1920')}-->
<!--------------- EBL Image Slider Wide 최신글 영역 끝 --------------->
</div>
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
이렇게 입력해줍니다.
위에서 말씀드린 sample 예제를 이용하는 경우에는 '가상의 게시판 아이디'를 입력해줍니다.
2
로그인 후 평가 가능합니다.
-
fm25
- 회원등급 : 지상계 / Level 11
포인트 108,975
경험치 12,652
[레벨 11] - 진행률
76%
- 가입일 : 2015-02-07 19:40:40
- 서명 : 영원한 초보!!!
Home Page : internationale.kr
Eyoom Builder Test : liberta.kr - 자기소개 : SIR의 존재감 없는 회원입니다~^^
Home Page : internationale.kr
Eyoom Builder Test : liberta.kr - 자기소개 : SIR의 존재감 없는 회원입니다~^^
댓글목록 18
joosam님의 댓글
- 아이디로 검색
2015.04.25 15:11첫번째 다운로드입니다~~ 잘 사용해 보겠습니다 언제나 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
joosam님의 댓글
- 아이디로 검색
2015.04.25 15:25오 최신글 제목중 Song 링크 방법도 가르쳐 주시면 고맙겠습니다요~~
fm25님의 댓글
- 아이디로 검색
2015.04.25 18:59http://eyoom.net/bbs/board.php?bo_table=tip&wr_id=446
후니아빠님의 댓글
- 아이디로 검색
2015.04.25 18:04캬/..,. 멋지십니다.
guide님의 댓글
- 아이디로 검색
2015.04.25 18:09위 처럼 했더니 페이지 헤더마다 다 따라 나옵니다..
인덱스 메인에만 슬라이드를 넣을순 없을까요?
fm25님의 댓글
- 아이디로 검색
2015.04.25 18:26guide님의 댓글
- 아이디로 검색
2015.04.25 18:54해결됐네요~ 친절한 답변 감사합니다~~ㅎ 속도 조절은 어떻게 하면 되나요?
fm25님의 댓글
- 아이디로 검색
2015.04.25 21:56eyoom/theme/basic/js/app.js
15초로 설정되어 있네요.joosam님의 댓글
- 아이디로 검색
2015.04.26 00:02fm25님 최신글 갤러리도 와이드 최신글로 적용할수 있나요? 무리일까요... ㅎㅎ 너무 무례한 질문 드렸다면 죄송합니다~~
joosam님의 댓글
- 아이디로 검색
2015.04.26 00:171.메인 페이지와 서브 페이지 모두 적용시 메인 페이지 이미지 높이와 서브 페이지 이미지 높이가 다르게 적용되는데요.. 저만 그런건가요? 혹시 적용해 보신분 없으신가요?
2. 적용 같은 페이지에 원래의 이윰 image_slider와 함께 적용시 이윰 image_slider 이미지 넘기기 버튼을 누르면 상단의 image_slider_w의 이미지만 넘어가는데... 이것도 저만 그런건지..
fm25님 예제 페이지는 두개를 한꺼번에 적용하지 않으신 듯 싶어서...
fm25님의 댓글
- 아이디로 검색
2015.04.26 01:40본문 내용과 첨부파일을 수정했습니다.
하나만 적용해서 미처 살펴보지 못했네요...;;;
joosam님의 댓글
- 아이디로 검색
2015.04.26 01:41헉 fm25님 이 늦은 시간에 답변을... 천천히 하셔도 되는데.. 이거 민폐를...
답변 감사드립니다.
joosam님의 댓글
- 아이디로 검색
2015.04.26 01:51fm25님의 댓글
- 아이디로 검색
2015.04.26 08:03'carousel-e2'는 'carousel-e1'을 복사한 것입니다. 그러므로 'carousel-e1' 전체 소스 아래에 넣으면 되구요.
지금 나타나는 오류는 스킨 때문이네요.
수정해서 올린 스킨을 내려받아 해당 위치에 덮어씌우세요.
반영 결과가 나타나지 않으면 Ctrl + F5
joosam님의 댓글
- 아이디로 검색
2015.04.28 17:27이윰빌더 새로깔고 올렸는데요... 이미지가 왼쪽으로 쏠려서 작게 노출이 됩니다... img_width=1920 이게 안먹는듯 합니다. 그누보드부터 재설치 후 테스트 해보겠습니다.
축하합니다. 행운의 포인트 20포인트를 획득하였습니다.
joosam님의 댓글
- 아이디로 검색
2015.04.28 22:57fm25님의 댓글
- 아이디로 검색
2015.04.29 08:41원본 이미지 자체가 작아서 그렇네요.
강제로 늘리는 방법은...
eyoom/theme/basic/skin_bs/latest/image_slider_w/latest.skin.html
class="img-responsive"
대신에
style="width:100%"
를 입력하면
이미지가 늘어나고, 상단 부분만 보입니다.
style="width:100%;max-height:300px"
를 입력하면
이미지가 늘어나고, 전체가 보이나 비율이 맞지않으면 찌그러져 보입니다.
max-height:300px
는
eyoom/theme/basic/skin_bs/latest/image_slider_w/style.css
에 규정한 높이와 맞춘 것입니다.
'img-responsive' 규정은...
eyoom/theme/basic/plugins/bootstrap/css/bootstrap.css
에 있습니다.
joosam님의 댓글
- 아이디로 검색
2015.04.29 11:26fm25님 언제나 성실한 답변 고맙습니다. 오늘도 행복한 하루되세요~~~