페이지 입방시 랜덤되는 이미지 링크버튼 (중복방지)

예전에도 이와 유사한 팁을 배포한 적이 있는데

질문게시판에 랜덤에 관한 질문이 올라와서 업뎃합니다.

https://sir.kr/qa/454381

아래 코드에서 randomMode 를 1로 주면 페이지 입방 때마다 이미지링크가 랜덤으로 변합니다.

0을 주면 순차배치가 되구요.

주의 사항은 이미지의 가로 세로 크기는 모든 이미지가 동일해야 합니다.

예를 들어 가로 500px 세로 300px 로 주었다면 모든 이미지를 그와 같이 맞추어야 합니다.

totalWidth 는 픽셀값을 적어주어도 되지만 100 퍼센트로 주어야 반응형으로 됩니다.

xCut 는 가로의 이미지숫자입니다.

이미지주소와 링크경로는 갯수에 상관없이 동일한 패턴으로 번호를 먹이면서 입력하면 됩니다.

나머지 옵션은 보면 아실 듯...

옵션을 줄 때는 따옴표를 넣은 것은 넣은 그대로 아닌 것은 아닌 그대로 사용해야 합니다.

[code]

<div id=imgDiv></div>
<script>
totalWidth = "100%"; // 전체 가로사이즈(px 이나 %)
xAlign = "center"; // "left" / "center" / "right" 
xCut = 5; // 한줄에 위치하는 이미지숫자
gapPixel = 7; // 이미지간격 픽셀
imgRadius = "20px"; // 테두리라운드(px 이나 %)
linkTarget = "_blank" // "_self" / "_blank"
randomMode = 1; // 1은 랜덤, 0은 순번
imgLink_1 = ["https://blog.kakaocdn.net/dn/cMVe4H/btq5RuQIRfF/DkSPyZQhLMVpy26P86Sp40/img.jpg", "https://sir.kr/"];
imgLink_2 = ["https://blog.kakaocdn.net/dn/nU4Lk/btq5TtDAlDl/cGLKyjuxsDOHGJ1WxujAFk/img.jpg", "https://naver.com/"];
imgLink_3 = ["https://blog.kakaocdn.net/dn/b7j6gV/btq5Syd5zbE/keJ3abDzXi32bHzKduJCA1/img.jpg", "https://daum.net/"];
imgLink_4 = ["https://blog.kakaocdn.net/dn/bQy7RZ/btq5Y9jj9J7/BgHmKBQmpphNpYkfS0qO0k/img.jpg", "https://www.google.co.kr/"];
imgLink_5 = ["https://blog.kakaocdn.net/dn/y9wL8/btq5Yqr6Mfk/QkHrJyuJtTC41fBfWnMsZk/img.jpg", "https://www.youtube.com/"];
imgLink_6 = ["https://blog.kakaocdn.net/dn/PilbO/btq5TsScxQb/GVfvaGZqc4PLN25sgEKBLk/img.jpg", "https://sir.kr/"];
imgLink_7 = ["https://blog.kakaocdn.net/dn/cKhXce/btq5Ttp4eBk/ZADYMqqTmFkkuwX9Tt55AK/img.jpg", "https://naver.com/"];
imgLink_8 = ["https://blog.kakaocdn.net/dn/d5MZRr/btq5TrZ5wRz/uIGtc7icn0wmhVpBsa2KsK/img.jpg", "https://daum.net/"];
imgLink_9 = ["https://blog.kakaocdn.net/dn/bMaFXG/btq5TsScxSU/D6C1UMQ6e2fJezv0rlvmN1/img.jpg", "https://www.google.co.kr/"];
imgLink_10 = ["https://blog.kakaocdn.net/dn/9u24l/btq5TtwUlyZ/ao3o9xmnYWJ977KtV0irAk/img.jpg", "https://sir.kr/"];
imgLink_11 = ["https://blog.kakaocdn.net/dn/bLBwe9/btq5RvIYCwg/GJuD0y78AHG9qa4sEFornk/img.jpg", "https://sir.kr/"];
imgLink_12 = ["https://blog.kakaocdn.net/dn/bmoAru/btq5Y7lvPVC/7nkHZyrt3h8eDBvWjCcCT0/img.jpg", "https://naver.com/"];
imgLink_13 = ["https://blog.kakaocdn.net/dn/cohhuV/btq5SykVnIL/EXwGM77ss40KLTxvt3m6q1/img.jpg", "https://daum.net/"];
imgLink_14 = ["https://blog.kakaocdn.net/dn/cHsRIh/btq5Y8kpUBx/2DLWaYAtM1ldFckdP6ODP1/img.jpg", "https://www.google.co.kr/"];
imgLink_15 = ["https://blog.kakaocdn.net/dn/cXP9Wn/btq5Ruwrvsf/FXtbmllQUGsRZdVTO0BCu1/img.jpg", "https://www.youtube.com/"];
for (imgTotal = 0; this['imgLink_' + (imgTotal + 1)]; imgTotal++);
//*** 랜덤 시작 ***//
if (randomMode) {
    for (imgArray = [], baseN = 1 ; baseN <= imgTotal ; baseN ++) imgArray.push(baseN);
    for (randomN = imgTotal; randomN > 0 ; randomN--) imgArray.push(imgArray.splice(Math.floor(Math.random() * randomN), 1)[0]);
    for (img = 1; img <= imgTotal; img++) this["imgLinkRandom_" + img] = this["imgLink_" + imgArray[img - 1]];
    for (img = 1; img <= imgTotal; img++) this["imgLink_" + img] = this["imgLinkRandom_" + img];
}
//*** 랜덤 종료 ***//
for (imgLoop = "", img = 1; img <= imgTotal; img++) {
    linkLocation = linkTarget == "_blank" ? " onclick=window.open('" + this['imgLink_' + img][1] + "')" : " onclick=location.href='" + this['imgLink_' + img][1] + "'";
    if (img % xCut == 0) {
        if (imgTotal <= xCut || img == imgTotal) imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td>";
        else imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td></tr><tr><td style=height:" + gapPixel + "px></td></tr><tr>";
    }
    else imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td><td style=width:" + gapPixel + "px></td>";
}
imgDiv.innerHTML = "<table style=width:" + totalWidth + ";table-layout:fixed cellpadding=0 cellspacing=0 align=" + xAlign + "><tr>" + imgLoop + "</tr></table>";   
</script>

[/code]

----------

[ 사족 ]

제가 사용한 중복을 피하는 랜덤함수는 2011년에 배포했던 것을 사용하였습니다.

https://sir.kr/g4_tiptech/26748

그런데 지금보니 디테일이 좀 부족한게 보이네요.

splice() 메소드는 문자열이나 숫자형 데이터를 리턴하지 않고 배열을 리턴합니다.

예를 들어서 [1,2,3,4,5] 를 splice() 를 이용하여 랜덤을 빼면...

[2,4,5,1,3] 이 아니라 [[2],[4],[5],[1],[3]] 을 리턴합니다.

아래와 같이 typeof 를 써서 확인해 보면...

<script>
myArray=[1,2,3,4,5,6,7];
for(i=myArray.length;i>0;i--)myArray.push(myArray.splice(Math.floor(Math.random()*i),1));
document.write(typeof myArray[0]); // 결과 object (즉 배열)
</script>

그래서 요소 하나짜리 배열의 0번요소를 취한다는 로직을 첨가해야 완벽합니다.

<script>
myArray=[1,2,3,4,5,6,7];
for(i=myArray.length;i>0;i--)myArray.push(myArray.splice(Math.floor(Math.random()*i),1)[0]);
document.write(typeof myArray[0]); // 결과 number(즉 숫자형)
</script>

물론 연산에는 아무 것이나 써도 하등 상관이 없습니다.

10년전에는 지금보다 머리가 더 잘 돌아갈 때였는데 덜렁거리는 건 예나 지금이나 똑같네요.ㅋㅋㅋㅋㅋ