반복되는 div 내부에 이미지를 각각 넣을 수 있을까요?
본문
관리자에서 등록된 이미지 갯수에 따라 div(class명 sliderkit-panel)가 반복되는 구조입니다.
<div class="visual_title"></div> 해당 영역에 이미지를 넣고 싶은데 (css로 따지면 첫번째div에는 1번이미지, 두번째 div에는 2번이미지) 가능할까요? 방법을 찾아보고 싶어도 키워드를 뭐라 쳐야할지 모르겠어서요..
<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"];
}
$list_href = "";
if($blist[$i]["blink"]){
if(!preg_match("/http\:\/\//i",$blist[$i]["blink"])) $blist[$i]["blink"] = "http://".$blist[$i]["blink"];
$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>
답변 3
어차피 for 내부에서 $i 로 카운팅 가능하니
<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>
<img src="도메인.com/폴더/이미지파일명<?php echo $i; ?>.png">
</div>
이렇게 하시면 이미지파일명??순번.png 이미지가 됩니다.
<style>
.sliderkit .sliderkit-panels .visual_title {
border: 1px solid silver;
height: 5em;
}
.sliderkit .sliderkit-panels:nth-child(1) .visual_title {
background-image: url(https://live.staticflickr.com/6107/6286940172_0665e0a2d7_z.jpg);
}
.sliderkit .sliderkit-panels:nth-child(2) .visual_title {
background-image: url(https://live.staticflickr.com/7346/9462297735_c08794a754_w.jpg);
}
.sliderkit .sliderkit-panels:nth-child(4n + 3) .visual_title {
background-image: url(https://live.staticflickr.com/5501/10984012403_a02605d2c4_b.jpg);
}
.sliderkit .sliderkit-panels:nth-child(n + 8) .visual_title {
background-image: url(https://live.staticflickr.com/8333/8134318852_b8b1a12433_b.jpg);
}
</style>
<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>
div:nth-child(1) { }
div:nth-child(2) { }
div:nth-child(3) { }
...
이렇게 설정 해서 하면 될것입니다.
아래 링크를 참고로 보세요.
https://lalacode.tistory.com/6
자바스크립트로 jquery 로는
$( ".classs div:nth-child(1)" ).append( "<img >" );
$( ".classs div:nth-child(2)" ).append( "<img >" );
또는
$( ".classs div:nth-child(2)" ).html( "<img >" );
이런식으로 하면 될 것입니다.