클래스로 호출하는 사이드 슬라이드를 개별적으로 ...
본문
https://sir.kr/g5_skin/37382?sca=%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83&page=2
위 링크, 펄스나인님의 사이드 슬라이드를 설치해서 아주 잘 사용하고 있습니다. 활용도도 높고 반응형이라 너무 좋아요.
이렇게 생겼답니다.
전 이걸 여러 링크에 적용시켜서 각각 다른 내용(상품 설명입니다)이 나오도록 하려고 했습니다. 여기서 문제가 생겼는데 폴더 이름을 바꿔서 여러개를 올리면 이 작업이 쉬울줄 알았던 겁니다. 근데 생각지도 않게 슬라이드를 호출하는 부분이 CSS 클래스로 호출을 하더라구요.
<a href="javascript:void(0);" class="sh-side-options-item-trigger-demos">열기</a>
이런 방식으로 호출이 됩니다.
CSS 클래스로 호출을 하는건 처음이라 전혀 예상하지 못했습니다. 실례가 안된다면 메인 php 문서 전체를 올리겠습니다.
<style>
.sh-side-options {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 12345678902;
transition: 0.3s all ease;
transition: 0.2s all;
padding: 0 0;
width: 420px;
transform: translateX(420px);
}
.sh-side-options.open {
transform: translateX(0px);
box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);
}
.sh-side-options-container {
position: absolute;
bottom: 50px;
left: -125px;
width: 60px;
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
margin-right: 15px;
box-shadow: -10px 0px 20px 2px rgba(0, 0, 0, .06);
}
.sh-side-options-item {
display: block;
text-align: center;
margin: 0px;
transition: 0.3s all ease-in-out;
position: relative;
padding: 7px;
cursor: pointer;
}
.sh-side-options-item:not(:last-child) {
border-bottom: 1px solid #f1f3fc;
}
.sh-side-options-item-container {
border-radius: 4px;
padding: 8px 0;
}
.sh-side-options-item:hover .sh-side-options-item-container,
.sh-side-options-item:focus .sh-side-options-item-container,
.sh-side-options.open .sh-side-options-item-trigger-demos .sh-side-options-item-container {
background-color: #f3f5fd;
}
.sh-side-options-item i {
font-size: 22px;
}
.sh-side-options-item:not(:hover):not(:focus) {
color: #9396a5 !important;
}
.sh-side-options-item:hover .sh-side-options-hover {
opacity: 1;
transform: translateX(-97%);
}
.sh-side-options-hover {
position: absolute;
background-color: #ffffff;
color: #32343d;
padding: 20px 26px;
transform: translateX(-70%);
left: 0px;
top: 0;
bottom: 0;
opacity: 0;
transition: 0.2s all ease-in-out;
z-index: -100;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 13px;
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.08);
}
.sh-side-options-hover span {
padding: 0px 3px;
}
.sh-side-options-item i {
color: #9396a5 !important;
}
.sh-side-options.open .sh-side-options-item-trigger-demos i,
.sh-side-options-item:hover i,
.sh-side-options-item:focus i {
color: #294cff !important;
}
.sh-side-demos-container {
top: 0;
left: 0;
right: -17px;
bottom: 0;
position: absolute;
overflow-y: scroll;
background-color: #fff;
background-repeat: no-repeat;
background-position: right top;
padding: 22px;
}
.sh-side-demos-container-close {
position: absolute;
top: 30px;
right: 50px;
cursor: pointer;
}
.sh-side-demos-container-close i {
color: #c5c5c5;
font-size: 18px;
transition: 0.3s all ease;
}
.sh-side-demos-container-close:hover i,
.sh-side-demos-container-close:focus i {
color: #7f7f7f;
}
/* Demo Items */
.sh-side-demos-loop-container {
position: relative;
margin: 0 -10px;
margin-top: 28px;
}
.sh-side-demos-item {
display: inline-block;
position: relative;
margin-right: -4px;
margin-bottom: 25px;
width: 50%;
padding: 0 10px;
text-align: center;
transition: .3s all ease;
top: 0;
}
.sh-side-demos-item:hover {
top: -4px;
}
.sh-side-demos-item .sh-image-lazy-loading {
border-radius: 3px;
box-shadow: 0 2px 20px 1px rgba(0, 0, 0, .1);
}
.sh-side-demos-item img {
border-radius: 3px;
}
.sh-side-demos-item-name {
font-size: 12px;
color: #32343d;
font-weight: 600;
padding-top: 10px;
}
.sh-side-demos-item-tag {
position: absolute !important;
width: auto !important;
height: auto !important;
top: 4px;
left: 6px;
background-color: #ff5944;
color: #fff;
font-size: 9px;
font-weight: 600;
display: block;
padding: 1px 9px;
text-transform: capitalize;
border-radius: 100px;
}
@media (max-width: 1000px) {
.sh-side-options {
/*display: none;*/
}
.sh-side-options {
width: 350px;
transform: translateX(350px);
}
.sh-side-options-container {
bottom: 30px;
left: -95px;
margin-right: 15px;
}
}
</style>
<style>
/* 폼예제 css */
.re_input {
width: 100%;
height: 40px;
border: 0px;
border-radius: 4px;
background-color: #f3f3f3;
padding-left: 10px;
line-height: 40px;
color: #666 !important;
font-size: 12px;
}
.re_input::placeholder {
color: #999 !important;
font-size: 12px;
}
.re_input2 {
width: 97%;
height: 150px;
border: 0px;
border-radius: 4px;
background-color: #f3f3f3;
padding: 10px;
color: #666 !important;
font-size: 12px;
}
.re_input2::placeholder {
color: #999 !important;
font-size: 12px;
}
.re_div {
margin-top: 20px
}
.re_div2 {
margin-top: 10px
}
.re_div3 {
margin-top: 40px;
color: #999;
text-align: left;
}
.re_input3 {
display: block;
border: 0px;
border-radius: 4px;
background-color: #FFCC00;
line-height: 40px;
color: #000 !important;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.re_div3 h1 {
font-size: 22px;
letter-spacing: -1px;
color: #333;
}
.re_div3 span {
color: #333
}
/* 폼예제 css */
</style>
<div class="sh-side-options sh-side-options-pages">
<div class="sh-side-options-container" style="margin-top:100px">
<!-- 열기버튼 / 이미지경로 수정필요 -->
<a class="sh-side-options-item sh-side-options-item-trigger-demos sh-accent-color">
<div class="sh-side-options-item-container"><img src="./right_slide/image/open_btn.png"></div>
<div class="sh-side-options-hover" style="padding-top:15px">Request</div>
</a>
<!-- //열기버튼 -->
</div>
<div class="sh-side-demos-container">
<!-- 닫기버튼 / 이미지경로 수정필요 -->
<div class="sh-side-demos-container-close">
<img src="./right_slide/image/close_btn.png">
</div>
<!-- //닫기버튼 -->
<div class="sh-side-demos-loop">
<div class="sh-side-demos-loop-container" style="padding:0px 30px 0px 20px">
<!-- 컨텐츠 시작 -->
<div class="re_div3">
<h1><strong>온라인 고객지원</strong></h1><br>
</div>
간단한 저예산 제작부터 대형 프로젝트<br>
합리적인 비용을 제안 드립니다.
<div class="re_div">
<input type="text" class="re_input font-r" required id="" name="" placeholder="성함(직책) *" style="width:70%;">
</div>
<div class="re_div2">
<input type="tel" class="re_input font-r" required id="" name="" placeholder="휴대전화 번호 *" style="width:60%;">
</div>
<div class="re_div2">
<input type="email" class="re_input font-r" required id="" name="" placeholder="회신받으실 이메일 *" style="width:90%;">
</div>
<div class="re_div2">
<input type="text" id="" name="" class="re_input font-r" placeholder="제작예산 예) 500만원" style="width:80%;">
</div>
<div class="re_div2">
<textarea id="" name="" class="re_input2 font-r" required placeholder="문의내용 *"></textarea>
</div>
<div class="re_div">
<input type="submit" value="접수하기" id="contact_submit" class="re_input3 font-b" style="width:200px;" />
</div>
<div class="re_div3">
<h1><strong>Contact Us</strong></h1><br>
<span>본사</span> 서울시 강남구 테헤란로 145 우신빌딩 / 16F<br>
<span>부설연구소</span> 대구광역시 중구 동성로 25 / 9F<br>
<br>
<span>Tel.</span> *** 개인정보보호를 위한 전화번호 노출방지 ***<br>
<span>Email.</span> *** 개인정보보호를 위한 이메일주소 노출방지 ***<br>
<span>Fax.</span> 0303-1234-5678<br>
</div>
<!-- //컨텐츠 끝 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.sh-side-options-item-trigger-demos').on('click', function() {
$('.sh-side-options').css('transition', '0.3s all ease-in-out');
if ($('.sh-side-options').hasClass('open')) {
$('.sh-side-options').removeClass('open');
} else {
$('.sh-side-options .sh-side-demos-image').each(function() {
$(this).attr('src', $(this).attr('data-src'));
});
$('.sh-side-options').addClass('open');
}
});
$('.sh-side-demos-container-close').on('click', function() {
$('.sh-side-options').css('transition', '0.3s all ease-in-out');
$('.sh-side-options').removeClass('open');
});
});
</script>
제가 원하는 것은 여러개의 슬라이드를 각각의 링크에 할당해서 링크를 누를 때마다 다른 내용이 보여지게끔 하는 겁니다. 여기에 대해 질문을 드렸는데 펄스나인님은
"스타일 관련한 클래스는 그대로쓰고 열리고 닫히는 부분만
id 로 변경하고 스크립트만 추가해도 될거같긴 합니다~ "
이렇게 댓글을 달아주시기는 했는데 요즘 바쁘셔서 그 이상은 힘드실 것 같다고 하셨구요. (물론 지금 이 상태로도 정말 멋진 슬라이드입니다.)
위에서 말한 기능이 구현되지 않으면 지금까지 만들어 놓은게 전부 쓸모없게 되어서 저로선 좀 급한 상황입니다. 코딩도 거의 하지 못하는 초보라고 보셔도 되구요.
너무 어려운 문제가 아니라면 도와주셨으면 하구요 혹시 도와주실분은 쪽지 보내주시면 소정의 기프티콘을 보내드리겠습니다. 부탁드립니다~
답변 2
같은 페이지내에서
링크를 이용해서 슬라이드 이미지를 변경하신다는 말씀이신가요?
쪽지받으시려면 개인정보 공개해주셔야합니다~!
네 맞아요.
쪽지받으시려면 sir 정보공개 해주셔야합니다
수정하신후 쪽지 보내주세요
휴대폰 인증 했는데 된건가요?
답변을 작성하시기 전에 로그인 해주세요.
