자바스크립트를 사용하여 이미지를 랜덤하게 표시하는 방법
이미지를 랜덤하게 표시하는 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>(소스: https://stackoverflow.com/questions/2777479/display-random-image-when-page-loads-without-utilizing-onload-in-the-body-tag)
이 코드가 잘 작동하지 않으면 다음 글을 참고해볼 수 있습니다.
이러한 코드를 응용하여 워드프레스에 적용할 수도 있습니다.
워드프레스에서는 WordPress Random Image라는 플러그인이 있지만 1년 넘게 업데이트가 안 되고 있네요.
js 파일을 워드프레스에 적용하는 방법은 How To Display Random Image When Page Loads In WordPress를 참고해보세요.
참고로 콘텐츠를 랜덤하게 표시하는 Random Content라는 유용한 워드프레스 플러그인도 있습니다. 하지만 이 플러그인도 1년 넘게 업데이트가 안 되고 있네요.
참고
워드프레스 갤러리 플러그인 FooGallery Image Gallery - 워드프레스 정보꾸러미
워드프레스 갤러리 플러그인으로 NextGEN Gallery가 유명합니다. 또 다른 갤러리 플러그인으로 FooGallery Image Gallery가 있습니다. 배너를 랜덤하게 표시하는 기능을 찾다가 이 플러그인을 알게 되었는
www.thewordcracker.com
