이미지 슬라이더 최신글 Wide로 적용하기 > 시즌3 공유자료실

본문 바로가기

시즌3 공유자료실

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

배포파일 : 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
로그인 후 추천 또는 비추천하실 수 있습니다.

댓글목록19

joosam님의 댓글

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

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

joosam님의 댓글

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

fm25님의 댓글의 댓글

jyoung님의 댓글

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

guide님의 댓글

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

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

fm25님의 댓글의 댓글

profile_image

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

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

fm25님의 댓글의 댓글

profile_image
eyoom/theme/basic/js/app.js


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

joosam님의 댓글

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

joosam님의 댓글

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

fm25님의 댓글의 댓글

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

joosam님의 댓글

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

joosam님의 댓글

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

fm25님의 댓글의 댓글

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

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

joosam님의 댓글

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

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

joosam님의 댓글

profile_image
- 첨부파일 : 0123654789.jpg (251.5K) - 다운로드
fm25님 그누부터 다시 설치하고 적용해봤습니다... image_slider_w의 이미지 크기가 왼쪽으로 치우쳐 작게 출력되는데 어떤걸 건드려야 할런지요?

fm25님의 댓글의 댓글

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

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

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

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

95f70955님의 댓글

profile_image
그누보드에서 이윰으로 이사온 신찬 입니다 앞으로 열심히 배워보겠습니다
전체 12 건 - 1 페이지
사이트 내 전체검색