본문 바로가기

이미지를 랜덤하게 표시하는 방법 (javascript)

2018. 1. 6. 댓글 0

이미지를 랜덤하게 표시하는 javascript 코드는 구글에서 쉽게 검색이 가능합니다. 예를 들어, stackoverflow에 페이지를 로드할 때 이미지를 무작위(랜덤)로 표시하는 방법에 대해 다음과 같은 코드가 제시되어 있습니다.

<html>
<head>
<title>Test</title>
<script type="text/javascript">
  var imageURLs = [
       "http://www.myserver.com/images/image1.png"
     , "http://www.myserver.com/images/image2.png"
     , "http://www.myserver.com/images/image3.png"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
  }
</script>
</head>
<body>
<script type="text/javascript">
  document.write(getImageTag());
</script>
</body>
</html>

이 코드가 잘 작동하지 않으면 다음 글을 참고해볼 수 있습니다.

이러한 코드를 응용하여 워드프레스에 적용할 수도 있습니다.

워드프레스에서는 WordPress Random Image라는 플러그인이 있지만 1년 넘게 업데이트가 안 되고 있네요.

js 파일을 워드프레스에 적용하는 방법은 How To Display Random Image When Page Loads In WordPress를 참고해보세요.

참고로 콘텐츠를 랜덤하게 표시하는 Random Content라는 유용한 워드프레스 플러그인도 있습니다. 하지만 이 플러그인도 1년 넘게 업데이트가 안 되고 있네요.

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0