공유자료실

최근본상품
TOP
DOWN

공유자료실

[최신글] 이미지 슬라이더 최신글 Wide로 적용하기

2015.04.25 12:07 4,625 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의 존재감 없는 회원입니다~^^

댓글목록 18

joosam님의 댓글

joosam 2015.04.25 15:11

첫번째 다운로드입니다~~ 잘 사용해 보겠습니다 언제나 고맙습니다~~

축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.

joosam님의 댓글

joosam 2015.04.25 15:25

오 최신글 제목중 Song 링크 방법도 가르쳐 주시면 고맙겠습니다요~~

fm25님의 댓글

fm25 2015.04.25 18:59

후니아빠님의 댓글

캬/..,. 멋지십니다.

guide님의 댓글

guide 2015.04.25 18:09

위 처럼 했더니 페이지 헤더마다 다 따라 나옵니다..

인덱스 메인에만 슬라이드를 넣을순 없을까요?

fm25님의 댓글

fm25 2015.04.25 18:26


<!--=== 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님의 댓글

guide 2015.04.25 18:54

해결됐네요~ 친절한 답변 감사합니다~~ㅎ 속도 조절은 어떻게 하면 되나요?

fm25님의 댓글

fm25 2015.04.25 21:56

eyoom/theme/basic/js/app.js


/*Bootstrap Carousel*/
jQuery('.carousel').carousel({
    interval: 15000,
    pause: 'hover'
});
15초로 설정되어 있네요.

joosam님의 댓글

joosam 2015.04.26 00:02

fm25님 최신글 갤러리도 와이드 최신글로 적용할수 있나요? 무리일까요... ㅎㅎ 너무 무례한 질문  드렸다면 죄송합니다~~

joosam님의 댓글

joosam 2015.04.26 00:17

1.메인 페이지와 서브 페이지 모두 적용시 메인 페이지 이미지 높이와 서브 페이지 이미지 높이가 다르게 적용되는데요.. 저만 그런건가요? 혹시 적용해 보신분 없으신가요?
2. 적용 같은 페이지에 원래의 이윰 image_slider와 함께 적용시 이윰 image_slider 이미지 넘기기 버튼을 누르면 상단의 image_slider_w의 이미지만 넘어가는데... 이것도 저만 그런건지..
fm25님 예제 페이지는 두개를 한꺼번에 적용하지 않으신 듯 싶어서...

fm25님의 댓글

fm25 2015.04.26 01:40

본문 내용과 첨부파일을 수정했습니다.
하나만 적용해서 미처 살펴보지 못했네요...;;;

joosam님의 댓글

joosam 2015.04.26 01:41

헉 fm25님 이 늦은 시간에 답변을... 천천히 하셔도 되는데.. 이거 민폐를... 답변 감사드립니다.

joosam님의 댓글

joosam 2015.04.26 01:51

방금 적용해 보았습니다.. eyoom/theme/basic/css/common.css 에 carousel-e1 아래 400번줄 정도에 적용했는데요...image_slider_w의 페이지 넘김 버튼 위치가 상단으로 쏠려 버리고 아래 제목이 이미지 중간쪽으로 이동해 버립니다. 저만 그런 건지는 모르겠습니다...

fm25님의 댓글

fm25 2015.04.26 08:03

'carousel-e2'는 'carousel-e1'을 복사한 것입니다. 그러므로 'carousel-e1' 전체 소스 아래에 넣으면 되구요.

지금 나타나는 오류는 스킨 때문이네요.
수정해서 올린 스킨을 내려받아 해당 위치에 덮어씌우세요.
반영 결과가 나타나지 않으면 Ctrl + F5

joosam님의 댓글

joosam 2015.04.28 17:27

이윰빌더 새로깔고 올렸는데요... 이미지가 왼쪽으로 쏠려서 작게 노출이 됩니다...  img_width=1920 이게 안먹는듯 합니다. 그누보드부터 재설치 후 테스트 해보겠습니다.

축하합니다. 행운의 포인트 20포인트를 획득하였습니다.

joosam님의 댓글

joosam 2015.04.28 22:57

fm25님 그누부터 다시 설치하고 적용해봤습니다... image_slider_w의 이미지 크기가 왼쪽으로 치우쳐 작게 출력되는데 어떤걸 건드려야 할런지요?

fm25님의 댓글

fm25 2015.04.29 08:41

원본 이미지 자체가 작아서 그렇네요.

강제로 늘리는 방법은...

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님의 댓글

joosam 2015.04.29 11:26

fm25님 언제나 성실한 답변 고맙습니다. 오늘도 행복한 하루되세요~~~

공유자료실 이용안내

공유자료실 게시판에서 다양한 자료를 공유하실 수 있습니다. 레이아웃, 게시판, 최신글, 플러그인 등 다양한 자료를 공유 해 주세요.


  1. 포인트 배포가 가능합니다. 포인트를 걸고 자료를 배포하시면 다운로드 발생 시 배포한 회원님께 80%의 포인트가 적립됩니다.
  2. 적립된 포인트는 상점에서 상품결제 시 사용가능하며 공유자료실 포인트 배포 자료등을 다운받을 때 사용할 수 있습니다.
  3. 저작권이 있는 자료는 무단으로 배포를 하실 수 없으니 주의하여 주시길 바랍니다.
  4. 배포된 해당 자료에 대한 문의는 해당 내용페이지에서만 질문하여 주세요.

배포되는 자료는 이윰넷에서 일일이 필터링 할 수 없으며 문제발생 시 책임을 지지 않습니다. 회원님들간 자발적인 정화와 참여를 부탁드립니다.

전체 18 건 - 1 페이지
제목
나시의전사 2016.01.17 2,459 2
shadow 2015.09.03 3,391 1
shadow 2015.09.02 4,368 3
fm25 2015.05.29 3,732 1
fm25 2015.05.29 3,424 1
fm25 2015.05.04 3,576 0
비즈팔 2015.04.30 3,312 2
fm25 2015.04.29 2,851 0
비즈팔 2015.04.27 4,994 3
fm25 2015.04.26 3,517 2
fm25 2015.04.25 4,626 2
shadow 2015.03.31 3,286 0
shadow 2015.03.30 3,765 1
이윰넷 2015.03.29 3,666 1
이윰넷 2015.03.28 3,489 2