페이지내에 랜덤으로 이미지 보이게 하기 방법 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라이어브리를 이용해서 이미지를 브라우저에 보내는 방식이었습니다. 그래서 원래 파일의 위치를 알 수가 없었습니다.

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

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

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







제휴 링크로 구매 시 제휴마케팅 활동의 일환으로 일정액의 수수료를 지급받아 콘텐츠를 제작하는데 큰 도움이 됩니다.



도움이 되셨다면, 댓글이나 소중한 커피 한 잔 부탁드려도 될까요?

커피 사주기
























당신이 좋아할 만한 글







푸쉬업스타: 팔굽혀펴기 카운터

팔굽혀펴기 자동측정 및 음성카운트, 다양한 방식의 푸쉬업측정 및 푸쉬업속도 분석, 경찰공무원,군체력검정, 사관학교, 학생건강체력평가(팝스) 등 각종 체력시험 준비시 측졍만 하면 점수나 등급이 자동으로 계산









One Comment

Add a Comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다