자바스크립트 화면 축소시 자동으로 세로로 배열 관련 채택완료

출처 : https://sir.kr/g5_tip/18168#c_18224

 

기존에 도움주신 비타주리님 감사합니다.

 

해당 방식을 사용했습니다.

그러나 pc버전일 경우 설정한 숫자만큼 가로로 배열 됩니다.

다만 모바일이나 화면이 축소시 이미지가 그대로 가로로 배열되어서 크기가 매우 작게 변합니다.

이것을 자동으로 세로로 사이즈에 맞게 배열 되게 할수 있는 방법이 있을까요.

 

이미지는 가로 300 x 세로 100 사용 합니다.

 

출처 : https://sir.kr/g5_tip/18168#c_18224

 

 

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

 

답변 1개

채택된 답변
+20 포인트

 

한마디로 제 코드를

반응형으로 사용하고 싶으신 거네요.

충분히 가능이야 하겠지만

오픈소스로 공유할 생각은 없습니다.^^

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

그러면 어떻게 하면될까요? 비용은 지불하겠습니다.
쪽지나 카톡으로 연락주세요
카톡아이디는 제 프로필에 있습니다.
ksm582 입니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고