이미지 슬라이더 최신글 Wide로 적용하기
fm25
112.♡.179.192
2015-04-25 12:07
15,449
19
2
배포파일 : 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님의 댓글
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
joosam님의 댓글
fm25님의 댓글의 댓글
jyoung님의 댓글
guide님의 댓글
인덱스 메인에만 슬라이드를 넣을순 없을까요?
fm25님의 댓글의 댓글
guide님의 댓글
fm25님의 댓글의 댓글
15초로 설정되어 있네요.
joosam님의 댓글
joosam님의 댓글
2. 적용 같은 페이지에 원래의 이윰 image_slider와 함께 적용시 이윰 image_slider 이미지 넘기기 버튼을 누르면 상단의 image_slider_w의 이미지만 넘어가는데... 이것도 저만 그런건지..
fm25님 예제 페이지는 두개를 한꺼번에 적용하지 않으신 듯 싶어서...
fm25님의 댓글의 댓글
하나만 적용해서 미처 살펴보지 못했네요...;;;
joosam님의 댓글
joosam님의 댓글
fm25님의 댓글의 댓글
지금 나타나는 오류는 스킨 때문이네요.
수정해서 올린 스킨을 내려받아 해당 위치에 덮어씌우세요.
반영 결과가 나타나지 않으면 Ctrl + F5
joosam님의 댓글
축하합니다. 행운의 포인트 20포인트를 획득하였습니다.
joosam님의 댓글
fm25님의 댓글의 댓글
강제로 늘리는 방법은...
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님의 댓글
95f70955님의 댓글