랜덤 갤러리 소스


웹 페이지에 이미지를 랜덤하게 보이게 하는 간단한 PHP 소스를 정리한다.
 
1994년도에 하이텔에 클리퍼에 대한 강좌를 한 이후에 소스에 대한 글을 처음 써보는 것 같다. 워낙 글을 못 써서 글을 아예 안썼는데, 매번 비슷한 문제를 프로그래밍 언어만 바뀌면서 부닥치는 것 같아서 좀 적어 본다.
 
내가 원하는 주요 기능은 같은 페이지라서 페이지가 보일 때 마다 매번 바뀌는 이미지 갤러리이다.

  1. 갤러리 카테고리에 사진을 올리고 썸네일로 본다.
  2. 갤러리에 올린 사진들을 메뉴가 있는 페이지 안에 접속할 때 마다 랜덤으로 본다.
  3. 페이지안의 랜덤 갤러리는 크기가 작으므르 클릭하면 새창에 원본 크기의 이미지를 본다

갤러리 카테고리에 올린 사진을 페이지내 랜덤 갤러리에 보려고 하는 것은 사진을 다 보려고 했을 때에 카테고리에서 볼 수 있게 하기 위함이다.
 
블로그가 주로 날짜별로 기록하고 보기 때문에 그런지,  처음 설치한 테터툴즈는 첨부파일이 올린 날짜의 디렉토리 아래에 올라가고 있었다. 그래서 이미지를 올려도 한개의 디렉토리에 저장되는 것이 아니라 올린 날짜 아래에 올라가기 때문에 랜덤으로 볼 이미지를 여기저기서 찾아야 한다. 그래서 테터툴즈로 사진을 올리고 보는 방법은 포기했다.
 
간단하게 랜던 이미지 갤러리를 구현하기 위해 사진을 올리는 것은 수작업을 하는 것으로 결정했다. 서버에 갤러리 디렉토리를 만들고, 거기에 사진 파일을 업로드 해서 그 폴더에 있는 사진들을 보이게 하기로 한 것이다.
위의 스펙 1번을 다음과 같이 수정한다.
1. 특정 디렉토리에 임의의 파일이름을 가진 사진을 올려 놓고, 사진들이 페이지를 접속할 때 마다 랜덤으로 보이게 한다.
 
이와 같은 목적으로 수작업이 들어간 간단한 랜덤이미지 php 소스를 만들었다.
웹 사이트나 테터툴즈, WordPress등에서 아래와 같이 쉽게 랜덤 이미지 갤러리를 구현할 수 있다.
 
1. 서버에 디렉토리를 만들고 썸네일 사진과 원본사진을 업로드 합니다
/gallery/ : 썸네일 사진
/gallery/orgi/ : 썸네일을 클릭했을때 보여줄 파일을 저장한다. 이때 썸네일의 파일 이름과 같아야 한다.
 
2.  랜덤 이미지를 보여주는 소스를 다운로드 해서 gallery 폴더안에 업로드 한다.

  • randomgallery.php 는 디렉토리에 있는 파일들 중 랜덤하게 하나를 선택하고, 이미지 크기 등의 정보를 얻어 오는 역할을 한다.
  • image_pop.php 은 썸네일 이미지를 클릭했을 때 새창이 열리게 하는 프로그램이다. image_pop.php 는 아무 생각없이 만들었지만, 그냥 사진 파일만 넘기면 사진의 크기를 읽어서 브라우저의 창의 크기를 맞게 조정하도록 나중에 고처야 한다.

3. randomgallery.php 파일을 열어서 자기 웹 서버의 디렉토리를 지정한다. .
// 페이지내에 보여질 파일이 있는 디렉토리
$folder = ‘./gallery/’;
// 페이지내 이미지를 클릭해서 새창에 보여질 원본 파일이 있는 디렉토리
$orginal_file_folder = $folder . ‘orgi/’;
 
4. 보여줄 HTML에 랜덤 갤러리를 넣을 위치에 아래 소스를 추가한다.
테터툴즈는 skin.html , wordpress 는 테마에 있는 HTML 파일을 수정한다. 내 블로그처럼  사이드바에 나오게 하려면 sidebar.html  을 수정한다.

< ?php
$d1 = “<img style=’cursor:pointer’ src='[##_randomimage_##]’ width=$randomimage_width height=$randomimage_height onclick=\”[##_onclick_randomimage_##]\”>”;
$d1 = str_replace(“[##_randomimage_##]”, $randomimage_file, $d1);
$d1 = str_replace(“[##_onclick_randomimage_##]”, “window.open(‘/wp/gallery/image_pop.php?imagefile=$randomimage_orgi&amp;width=$randomimage_orgi_width&amp;height=$randomimage_orgi_height’,’s_im’,’width=$randomimage_orgi_width,height=$randomimage_orgi_height,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0′)”, $d1);
print $d1;
?>

페이지를 릴로드해서 사진이 잘 바뀌는지 확인한다.
 







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



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

커피 사주기
























당신이 좋아할 만한 글







연락처맵: 지도위의 고객관리
4.6
연락처를 지도에서 한눈에, 위치기반의 연락처관리, 내 근처의 연락처보기