PHP를 이용한 파일명 랜덤 출력 질문
본문
아래 소스에서 붉은색으로 된 부분 (main01.png , main02.png , main03.png , ...... )
뒷부분 숫자를 변수로 부여해서 원하는 갯수만큼 출력되게 하되 순서를 랜덤으로
부여되게 하려면 어떻게 하면 될까요?
즉, 예를들어 아래 소스에서 이미지를 5개로 하고, 5개의 이미지가 랜덤으로 뿌려지게
하는 경우라면 어떻게 적용할 수 있는지 알고 싶습니다.
<div style="background-image:url(assets/img/slider/main01.png);">
<p>이미지 슬라이드 입니다.</p>
</div>
<div style="background-image:url(assets/img/slider/main02.png);">
<p>이미지 슬라이드 입니다.</p>
</div>
<div style="background-image:url(assets/img/slider/main03.png);">
<p>이미지 슬라이드 입니다.</p>
</div>
......
답변 6
$arr=array();
$num=10; // 등록되어 있는 이미지 수
$view_count=3; // 출력할 슬라이드 수
for($i=1; $i<=$num; $i++) $arr[]=$i;
shuffle($arr);
$i=0;
foreach($arr as $num)
{
if($i==$view_count) break;
echo "<div style='background-image:url(assets/img/slider/main".sprintf("%02d", $num).".png);'><p>이미지 슬라이드 입니다.</p></div>";
$i++;
}
대충 이렇게 사용하시면 될것 같네요.
자바스크립트는 셔플이 없어서 중복 없는 랜덤코드를 하나 만들어야 하네요.
php 없이 순수 자바스크립트로는... 아래처럼 사용하되 total 의 숫자만 원하는 숫자로요.
<script>
total = 12;
for (nA = [], i = 1; i <= total; i++) nA.push(("0" + i).slice(-2));
for (i in nA) {
rN = Math.floor(Math.random() * nA.length);
changeN = nA[rN];
nA[rN] = nA[i];
nA[i] = changeN;
}
for (i in nA) document.write("<div style=background-image:url(assets/img/slider/main" + nA[i] + ".png)><p>이미지 슬라이드 입니다.</p></div>");
</script>
참고로
for (nA = [], i = 1; i <= total; i++) nA.push(("0" + i).slice(-2)); 는 1을 01로 만들기 위한 코드입니다.
그게 필요없으면 for (nA = [], i = 1; i <= total; i++) nA.push(i); 로 충분합니다.
https://dev.to/gavinsykes/randomising-flex-order-of-items-2afh
https://codepen.io/01/details/BNbpLN
http://thenewcode.com/926/Random-Images-With-Flexbox-amp-JavaScript
이런 것도 있네요.
<div style="background-image:url(assets/img/slider/main<?php echo sprintf('%02d', rand(1, 3))?>.png);">
썽피리님처럼 파일명에 변수명을 부여해서 하는것도 좋은 방법이고
저라면 이미지 밑에 하단 설명이 동일해서 별로 매리트가 없어 보여요 결국 핵심은 내용이 배열형태로 담겨져있다고 생각한다면 mysql에서는 order by rand() limit 0,뿌려질 개수 이렇게 정렬해서 데이터를 랜덤으로 뿌려오거나 mysql도 쓰기 싫다하시면 배열을 수동으로 선언하여
$data[0]["이미지경로"] = "";
$data[0]["이미지설명"] = "";
$data[1]["이미지경로"] = "";
$data[1]["이미지설명"] = "";
$data[2]["이미지경로"] = "";
$data[2]["이미지설명"] = "";
$data[3]["이미지경로"] = "";
$data[3]["이미지설명"] = "";
$data[4]["이미지경로"] = "";
$data[4]["이미지설명"] = "";
$data[5]["이미지경로"] = "";
$data[5]["이미지설명"] = "";
이렇게 선언해서 data를 shuffle 로 해서 출력하는 방법을 사용한다면 이미지외에 (이미지 뒤에 변수 안둬도됨) 내용도 맞게끔해서 불러오지 않을까 싶네요
<?php
// 출력할 이미지 파일명을 배열에 저장합니다.
$images = array(
'main01.png',
'main02.png',
'main03.png',
// 추가 이미지 파일명을 여기에 추가합니다.
);
// 배열의 요소를 랜덤으로 섞습니다.
shuffle($images);
// 출력할 이미지 개수를 정합니다.
$num_images = 5;
// 랜덤으로 출력할 이미지와 해당 이미지의 순서를 출력합니다.
for ($i = 0; $i < $num_images; $i++) {
$image_index = $i % count($images);
$image_url = 'assets/img/slider/' . $images[$image_index];
$order = $i + 1;
echo '<div style="background-image:url(' . $image_url . ');">';
echo '<p>이미지 슬라이드 ' . $order . ' 입니다.</p>';
echo '</div>';
}
?>
