반복되는 div 내부에 이미지를 각각 넣을 수 있을까요? 채택완료
굼떠
2년 전
조회 1,226
관리자에서 등록된 이미지 갯수에 따라 div(class명 sliderkit-panel)가 반복되는 구조입니다.
해당 영역에 이미지를 넣고 싶은데 (css로 따지면 첫번째div에는 1번이미지, 두번째 div에는 2번이미지) 가능할까요? 방법을 찾아보고 싶어도 키워드를 뭐라 쳐야할지 모르겠어서요..</p>
<p><div class="sliderkit photoslider-bullets">
<div class="sliderkit-panels">
<?
$sql = " select * from ".$site_prefix."banner where bstatus='Y' and bloc = 'M' order by border asc ";
$result = sql_query($sql);
for($i=0;$row = sql_fetch_array($result);$i++){
$blist[$i] = $row;
$blist[$i]["files"] = get_file($site_prefix."banner",$row["idx"]);
if($blist[$i]["files"][0][file_source]){
$blist[$i]["img"] = $blist[$i]["files"][0]["path"]."/".$blist[$i]["files"][0]["file_source"];
}</p>
<p> $list_href = "";</p>
<p> if($blist[$i]["blink"]){
if(!preg_match("/http\:\/\//i",$blist[$i]["blink"])) $blist[$i]["blink"] = "<a href="http://".$blist[$i]["blink"];" target="_blank" rel="noopener noreferrer">http://".$blist[$i]["blink"];</a>
$list_href = "<a href='".$blist[$i]["blink"]."' target='".$blist[$i]["btarget"]."' >";
}
?>
<div class="sliderkit-panel <?=$list_href?"mblink":""?>" style="background-image:url('<?=$blist[$i]["img"]?>');background-position:50% 0;background-repeat:no-repeat;" <?=$list_href?"href='".$blist[$i]["blink"]."'":""?>><div class="visual_title"></div>//타이틀이미지삽입영역</div>
<?
}
?>
</div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next line"><span>Next</span></a></div>
</div></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
어차피 for 내부에서 $i 로 카운팅 가능하니
" style="background-image:url('');background-position:50% 0;background-repeat:no-repeat;" >
.png">
이렇게 하시면 이미지파일명??순번.png 이미지가 됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
</p>
<p><style>
.sliderkit .sliderkit-panels .visual_title {
border: 1px solid silver;
height: 5em;
}
.sliderkit .sliderkit-panels:nth-child(1) .visual_title {
background-image: url(<a href="https://live.staticflickr.com/6107/6286940172_0665e0a2d7_z.jpg);" target="_blank" rel="noopener noreferrer">https://live.staticflickr.com/6107/6286940172_0665e0a2d7_z.jpg);</a>
}
.sliderkit .sliderkit-panels:nth-child(2) .visual_title {
background-image: url(<a href="https://live.staticflickr.com/7346/9462297735_c08794a754_w.jpg);" target="_blank" rel="noopener noreferrer">https://live.staticflickr.com/7346/9462297735_c08794a754_w.jpg);</a>
}
.sliderkit .sliderkit-panels:nth-child(4n + 3) .visual_title {
background-image: url(<a href="https://live.staticflickr.com/5501/10984012403_a02605d2c4_b.jpg);" target="_blank" rel="noopener noreferrer">https://live.staticflickr.com/5501/10984012403_a02605d2c4_b.jpg);</a>
}
.sliderkit .sliderkit-panels:nth-child(n + 8) .visual_title {
background-image: url(<a href="https://live.staticflickr.com/8333/8134318852_b8b1a12433_b.jpg);" target="_blank" rel="noopener noreferrer">https://live.staticflickr.com/8333/8134318852_b8b1a12433_b.jpg);</a>
}
</style></p>
<p><div class="sliderkit photoslider-bullets">
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
<div class="sliderkit-panels">
<div class="visual_title"></div>
</div>
</div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
s
sinbi
2년 전
결과보기: https://codepen.io/sinbi/pen/dyqozZd
댓글을 작성하려면 로그인이 필요합니다.
2년 전
div:nth-child(1) { }
div:nth-child(2) { }
div:nth-child(3) { }
...
이렇게 설정 해서 하면 될것입니다. 아래 링크를 참고로 보세요.
https://lalacode.tistory.com/6
자바스크립트로 jquery 로는
$( ".classs div:nth-child(1)" ).append( "" );
$( ".classs div:nth-child(2)" ).append( "" );
또는
$( ".classs div:nth-child(2)" ).html( "" );
이런식으로 하면 될 것입니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인