상품상세페이지에서 섬네일 이미지를 가로로 나열하려면
본문
아래 이미지와같이 상품상세페이지에서 섬네일 이미지를 가로로 나열하고 싶습니다. 기본테마를 사용중인데 어떤부분을 수정해야 할까요?
답변 2
- skin/shop/basic/item.info.skin.php
<div id="sit_pvi_thumb">
<ul style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;">
<?php for ($i=0; $i<count($thumb); $i++) { ?>
<li style="list-style: none;">
<img src="<?php echo $thumb[$i]['src']; ?>" alt="<?php echo $thumb[$i]['alt']; ?>" style="border:1px solid #dbdbdb; cursor: pointer;" onclick="document.querySelector('#sit_pvi_big img').src='<?php echo $thumb[$i]['src']; ?>';">
</li>
<?php } ?>
</ul>
</div>
- skin/shop/basic/style.css
#sit_pvi_thumb {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 10px 0;
}
#sit_pvi_thumb li {
flex-shrink: 0;
list-style: none;
}
#sit_pvi_thumb img {
border: 1px solid #dbdbdb;
cursor: pointer;
transition: transform 0.2s ease;
}
#sit_pvi_thumb img:hover {
transform: scale(1.1);
border-color: #010101;
}
관심 가져주셔서 감사합니다. 잘이해가 가지않아서그러는데
skin/shop/basic/item.info.skin.php이 이미지를 가로로 나열하는것과 관계가있나요?
이렇게는 않되나 보군요~
한 수 배워갑니다.
item.form.skin.php 입니다
이 정도 디자인을 못비꾼다면 수정하기가 어렵겠습니다
id="sit_pvi_big"
id="sit_pvi_thumb"
위 두가지 스타일 float로 되어있는 것 삭제 (shop/basic/style.css)
#sit_pvi_thumb li{ dispay:inline-block;} 추가
우선 위 처럼 먼저 해보세요
실력?(취미로 하는지라 실력이라고 말하기도 창피하지만......)이 미천하여 죄송합니다.........가끔 코드는 쳐다도 보기싫을때가 있어서.................그러 습니다..........ㅠ.ㅠ
답변을 작성하시기 전에 로그인 해주세요.