페이지 입방시 랜덤되는 이미지 링크버튼 (중복방지) > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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

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

https://sir.kr/qa/454381

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

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

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

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

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

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

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

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

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

 


<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>

 

----------

 

[ 사족 ]

 

제가 사용한 중복을 피하는 랜덤함수는 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년전에는 지금보다 머리가 더 잘 돌아갈 때였는데 덜렁거리는 건 예나 지금이나 똑같네요.ㅋㅋㅋㅋㅋ

추천
2
  • 복사

댓글 12개


좋은 팁 감사합니다.(마우스오버 시 알트값, 링크 팝업으로 할 수 있으면 좋겠습니다)

근데 요즘 알트값이 먹긴 하나요? 난 안 먹던데... 그래서 타이틀 값으로 바꿨습니다.

["이미지주소", "링크주소"]; 를 ["이미지주소", "링크주소", "타이틀값"]; 으로 전환해 주시고
<td><img style=width:100% 이 부분이 3군데가 있는데 모두 아래로 바꿔주세요.
<td><img title='" + this['imgLink_' + img][2] + "' style=width:100%

팝업의 경우는 함수를 하나 만드는 것이 편합니다.
//*** 랜덤 종료 ***// 아래 구문에 팝업함수를 하나 만드시구요.

function popUp() {
	window.open(arguments[0], "_blank", "top=10, left=10, width=600, height=400, status=no, menubar=no, toolbar=no, resizable=no");
}

onclick=window.open('" + this['imgLink_' + img][1] + "')"
위 구문을 찾아 아래처럼 바꿔줍니다.
onclick=popUp('" + this['imgLink_' + img][1] + "')"

linkTarget = "_blank"; 옵션은 그냥 "_blank" 로 쓰시면 됩니다.
고수님 정말 감사 드립니다. 아주 잘 됩니다. 그리고 title이 맞습니다.
맘에 드신다니 다행입니다.
고수라는 말씀은 립서비스로 들을게요
제가 생각하는 진짜 고수는 2차원 평면에서의 내용물을 3차원 입체물처럼 보이게끔 하는 함수를 라이브러리 없이 스스로 만들 수 있는 능력을 가진 사람들입니다.
그건 행렬 즉 매트릭스 연산이 필요하거든요.

모든 논리적 수학적 대상은 두 부류입니다.
1.2.3.4.5 또는 마이너스1.2.3.4.5 로 무한대 또는 마이너스 무한대로 가는 대상이 첫번째인데 이걸 이산적 대상이라고 합니다.
반면 무한을 다루긴 다루되 그것과는 다른 무한을 다루는 분야가 있습니다. 바로 0과 1사이의 대상만을 다루지요. 그 사이에의 값 역시 무한하거든요. 이걸 우리는 연속적 대상이라고 불러요.
수학에서 연속을 다루는 첫걸음이 삼각함수에요.
특히 사인이나 코사인은 0부터 1사이의 값만을 가집니다.
연속을 다루게 되면 비로소 수학재능이 있나 없나가 판별이 됩니다. 연속의 꽃은 미적분이고 연속의 심화가 행렬입니다.
제가 배포한 코드 중에 슬라이드 갤러리와 원형 트랙바가 연속을 대상으로 하는 함수입니다.
하나는 극한값 계산을 가져와서 썼고 하나는 삼각함수를 가져다 썼거든요.
근데 저도 매트릭스를 계산하는 함수를 만들 때는 끙끙 앓습니다. 플래셔 시절 동영상을 책장처럼 넘기는 함수나 이미지를 육각퍼즐처럼 변형시켜 회전시키는 함수를 만들 때 얼마나 애를 먹었는지 야 나는 한계가 여기까지구나 라는 걸 절감했죠.
그 와중에 만나 본 세명 정도는 진짜 연속의 대상을 장난감처럼 다루더라구요.
프론트 언어나 백 언어 어느 걸 만지느냐가 고수의 척도가 아니라 연속의 대상을 지맘대로 라이브러리나 프레임워크를 쓰지 않고 함수화 할 수 있는 사람을 저는 고수라고 불러요.
라이브러리를 잘 활용하는 사람은 유능한 사람이고 라이브러리 자체를 만드는 사람이 진짜 고수입니다.
그런 면에서는 저도 하수입니다.ㅋ
고맙습니다. 잘 쓰고있습니다.
저는 함수가 들어간 코드를 만들 능력은 없습니다. 단지 비타주리님처럼 고수님들이 만든 코드를 이해하고 붙여넣기해서 이용하는 것에 만족하고 있습니다. ^^
안녕하세요 감사합니다. 잘쓰고 있는데 혹시 모바일이나 화면이 축소되었을때 세로의 배열을 2,3,1 자동으로 줄어들게 할수는 없을까요?
© SIRSOFT
현재 페이지 제일 처음으로