[최신글] 이미지 슬라이더 최신글 Wide로 적용하기
4,460
2015.04.25 12:07
첨부파일
-
9 2015-04-26 01:35:48
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=108 주소복사
본문
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 예제를 이용하는 경우에는 '가상의 게시판 아이디'를 입력해줍니다.
9
레벨 11
경험치 12,674
Progress Bar 77%
- 가입일 : 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의 존재감 없는 회원입니다~^^
Total 51건 2 페이지
공유자료실 이용안내
공유자료실 게시판에서 다양한 자료를 공유하실 수 있습니다. 레이아웃, 게시판, 최신글, 플러그인 등 다양한 자료를 공유 해 주세요.
- 포인트 배포가 가능합니다. 포인트를 걸고 자료를 배포하시면 다운로드 발생 시 배포한 회원님께 80%의 포인트가 적립됩니다.
- 적립된 포인트는 이윰몰에서 상품결제 시 사용가능합니다.
- 저작권이 있는 자료는 무단으로 배포를 하실 수 없으니 주의하여 주시길 바랍니다.
- 배포된 해당 자료에 대한 문의는 해당 내용페이지에서만 질문하여 주세요.
배포되는 자료는 이윰넷에서 일일이 필터링 할 수 없으며 문제발생 시 책임을 지지 않습니다. 회원님들간 자발적인 정화와 참여를 부탁드립니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 31 |
shadow
|
2015.09.03 | 4,176 | |
| 30 |
shadow
|
2015.09.02 | 4,981 | |
| 29 |
shadow
|
2015.08.14 | 2,777 | |
| 28 |
갓구운빵
|
2015.07.15 | 2,365 | |
| 27 |
fm25
|
2015.06.12 | 2,208 | |
| 26 |
fm25
|
2015.06.08 | 4,186 | |
| 25 |
fm25
|
2015.05.29 | 4,626 | |
| 24 |
fm25
|
2015.05.29 | 4,098 | |
| 23 |
fm25
|
2015.05.29 | 3,963 | |
| 22 |
이윰넷
|
2015.05.24 | 2,592 | |
| 21 |
fm25
|
2015.05.24 | 3,133 | |
| 20 |
이윰넷
|
2015.05.18 | 3,367 | |
| 19 |
fm25
|
2015.05.17 | 5,489 | |
| 18 |
fm25
|
2015.05.04 | 3,851 | |
| 17 |
비즈팔
|
2015.04.30 | 3,236 | |
| 16 |
fm25
|
2015.04.29 | 2,894 | |
| 15 |
비즈팔
|
2015.04.27 | 4,754 | |
| 14 |
fm25
|
2015.04.26 | 3,483 | |
| 열람 |
fm25
|
2015.04.25 | 4,461 | |
| 12 |
shadow
|
2015.03.31 | 3,293 |
댓글목록
joosam님의 댓글
첫번째 다운로드입니다~~ 잘 사용해 보겠습니다 언제나 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
joosam님의 댓글
오 최신글 제목중 Song 링크 방법도 가르쳐 주시면 고맙겠습니다요~~
fm25님의 댓글
http://eyoom.net/bbs/board.php?bo_table=tip&wr_id=446
후니아빠님의 댓글
캬/..,. 멋지십니다.
guide님의 댓글
위 처럼 했더니 페이지 헤더마다 다 따라 나옵니다..
인덱스 메인에만 슬라이드를 넣을순 없을까요?
fm25님의 댓글
<!--=== End Header ===--> <!--{? defined('_INDEX_')}--> <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_')}-->guide님의 댓글
해결됐네요~ 친절한 답변 감사합니다~~ㅎ 속도 조절은 어떻게 하면 되나요?
fm25님의 댓글
eyoom/theme/basic/js/app.js
/*Bootstrap Carousel*/ jQuery('.carousel').carousel({ interval: 15000, pause: 'hover' });15초로 설정되어 있네요.joosam님의 댓글
fm25님 최신글 갤러리도 와이드 최신글로 적용할수 있나요? 무리일까요... ㅎㅎ 너무 무례한 질문 드렸다면 죄송합니다~~
joosam님의 댓글
1.메인 페이지와 서브 페이지 모두 적용시 메인 페이지 이미지 높이와 서브 페이지 이미지 높이가 다르게 적용되는데요.. 저만 그런건가요? 혹시 적용해 보신분 없으신가요?
2. 적용 같은 페이지에 원래의 이윰 image_slider와 함께 적용시 이윰 image_slider 이미지 넘기기 버튼을 누르면 상단의 image_slider_w의 이미지만 넘어가는데... 이것도 저만 그런건지..
fm25님 예제 페이지는 두개를 한꺼번에 적용하지 않으신 듯 싶어서...
fm25님의 댓글
본문 내용과 첨부파일을 수정했습니다.
하나만 적용해서 미처 살펴보지 못했네요...;;;
joosam님의 댓글
헉 fm25님 이 늦은 시간에 답변을... 천천히 하셔도 되는데.. 이거 민폐를...
답변 감사드립니다.
joosam님의 댓글
방금 적용해 보았습니다.. eyoom/theme/basic/css/common.css 에 carousel-e1 아래 400번줄 정도에 적용했는데요...image_slider_w의 페이지 넘김 버튼 위치가 상단으로 쏠려 버리고 아래 제목이 이미지 중간쪽으로 이동해 버립니다. 저만 그런 건지는 모르겠습니다...
fm25님의 댓글
'carousel-e2'는 'carousel-e1'을 복사한 것입니다. 그러므로 'carousel-e1' 전체 소스 아래에 넣으면 되구요.
지금 나타나는 오류는 스킨 때문이네요.
수정해서 올린 스킨을 내려받아 해당 위치에 덮어씌우세요.
반영 결과가 나타나지 않으면 Ctrl + F5
joosam님의 댓글
이윰빌더 새로깔고 올렸는데요... 이미지가 왼쪽으로 쏠려서 작게 노출이 됩니다... img_width=1920 이게 안먹는듯 합니다. 그누보드부터 재설치 후 테스트 해보겠습니다.
축하합니다. 행운의 포인트 20포인트를 획득하였습니다.
joosam님의 댓글
fm25님 그누부터 다시 설치하고 적용해봤습니다... image_slider_w의 이미지 크기가 왼쪽으로 치우쳐 작게 출력되는데 어떤걸 건드려야 할런지요?
fm25님의 댓글
원본 이미지 자체가 작아서 그렇네요.
강제로 늘리는 방법은...
eyoom/theme/basic/skin_bs/latest/image_slider_w/latest.skin.html
<a href="{.href}"><img class="img-responsive" src="{.image}" alt=""></a>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님의 댓글
fm25님 언제나 성실한 답변 고맙습니다. 오늘도 행복한 하루되세요~~~