페이지내에 랜덤으로 이미지 보이게 하기 방법 2가지


제 블로그의 왼쪽 상단에 보면 이미지가 있는데, 페이지 접속할 때 마다 바뀌게 해 놓았습니다.

언젠가 외국의 어떤 사람 블로그에서 갤러리가 페이지 접속할 때 마다 랜덤으로 보이는 것을 보고, 블로그 설치하면 해봐야 겠다고 생각을 했었습니다.

제가 원하는 것은 갤러리라는 카테고리를 만들어서 사진을 거기게 올리셔 썸네일로 볼 수 있고, 동시에 모든 페이지의 메뉴 상단에 갤러리에 있는 이미지가 랜덤으로 선택되어서 보이게 하는 것이었습니다.

테터툴즈에서 썸네일로 보는 갤러리 기능이 없어서 만들어져 있는 것을 적용했습니다.

그런데,블로그가 시간순으로 관리가 되어지는 것이 중요한지 테터툴즈는 카테고리마다 첨부 파일을 저정하는 것이 아니라, 날짜별로 폴더를 만들고 첨부파일을 저장하고 있었습니다.

그래서 어쩔 수 없이 갤러리라는 폴더를 만들고, 사진을 넣은 다음에 그 폴더에 있는 사진을 보이게 하기로 했습니다.

어떻게 랜덤으로 보이게 할것이냐인데

1. HTML 상에서 바꾸는 방법
처음 했던 방법은 아주 자바스크립트의 랜덤함수를 이용해서 간단하게 구현할 수 있었습니다. 이미지 파일의 이름을 자바스크립트로 소스를 바꾸는 방법입니다.

이미지 파일을 0.jpg, 1.jpg, 11.jpg, 12.jpg 로 이름을 만듭니다.

skin.html 에 아래와 같이 추가합니다.

<img src="/blog/gallery/0.jpg" name="randomimage" width=200 border="0" >
<script>>
var maximgno = 20; // 총 20개 파일
var imgno;

do imgno = Math.random().toString().charAt(2);
while (imgno > maximgno || imgno < 1);
var imgfile="/blog/gallery/"+imgno+".jpg";

document.randomimage.src=imgfile;
</script>

아래와 같이 해도 됩니다.

<script language="JavaScript">
var maxnumber=20;
var randomnumber=Math.floor(Math.random()*maxnumber)+1;
document.write ("<a href=’/’><img height=’100′ width=’780′ border=’0′ alt=’image’ src=’/blog/gallery/" + randomnumber + ".jpg’></a>")
</script>

이 방법은 간단하기는 하지만, 폴더에 파일이름은 #.jpg 이런식으로 저장하고 있어야 하는 문제가 있습니다. ##.jpg 로 하려면 자브스크립트에서 더 꽁수를 써야 합니다.

2. 랜덤 이미지 php 이용
원래 하고 싶었던 특정 폴더의 사진을 보여주는 php 소스를 발견했습니다.

The Random Image Rotator 입니다.

사용법은 다운로드 해서 서버에 올립니다.

그런 다음에 소스 안에 있는 $folder = ‘.’; 에 사진이 있는 폴더를 지정합니다.

만약, 사진이 있는 디렉토리와 rotator.php 가 있는 디렉토리가 같다면 소스안을 손대지 않아도 됩니다.

그리고, 랜덤으로 보여주고자 하는 페이지의 HTML에

<img src="rotator.php">

만 하면 됩니다. 보여지는 이미지 크기를 지정해 주는 것이 좋을 것 같습니다.

< img src="/blog/gallery/rotator.php" size=200>

마지막으로 하고 싶은 것은 사진이 작아서 클릭해서 좀더 큰 크기의 사진을 볼 수 있게 하고 싶었습니다. 그런데, 이 PHP 소스는 GD라이어브리를 이용해서 이미지를 브라우저에 보내는 방식이었습니다. 그래서 원래 파일의 위치를 알 수가 없었습니다.

결국, 이 소스를 보고 내가 다시 만들자 로 결론을 내렸습니다.

프로그래머가 직업은 아니지만, 수학 문제 푸는 대신에 프로그래밍 하면서 문제 해결 연습하고, 장난감 만드는 기분으로 만들어 봅니다.

현재 제 블로그에 적용된 소스는 다음 글에서 정리를 하겠습니다.


0 글이 마음에 드시면 하트를 눌러주세요~ 블로거에게 힘이 됩니다 (SNS/로그인/광고 관련 없습니다)






2 Comments

Add a Comment

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다













이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받고 있습니다.
이 포스팅은 제휴마케팅이 포함된 광고로 일정 커미션을 지급 받을 수 있습니다.