jQuery를 이용한 자동 슬라이드 갤러리 비슷한 것?
현재 작업 중인 사이트에 들어가는 시공갤러리 부분을 개발하고 있다. 위 이미지처럼 전체 시공갤러리에서 관리자가
지정한 특정 갤러리만 보이는 부분인데 좌우의 버튼을 클릭해서 다른 갤러리를 볼 수 있어야 하고 또 자동으로 다른
갤러리를 볼 수 있어야 한다. 가능하면 플래시로 만든 것 같은 효과까지 주려고 fadeIn, fadeOut을 활용하기로 했다.
보여줄 갤러리 전체를 div 레이어를 이용해 미리 만들어 놓고 보여주는 것은 트래픽이나 접속 속도에 영향을 많이
미칠 것이라 생각했기 때문에 AJAX 방식을 이용해서 개발을 했다. jQuery가 없었다면 엄두도 못냈을 일이다. ㅋㅋ
두 개의 파일로 구성되어 있고 gallery.php는 전체 레이아웃을 이루는 페이지이며 gallery_best.php 파일은 위의
컨텐츠를 만드는 파일이이다. AJAX에서 gallery_best.php 파일을 호출해 결과를 만들게 된다. 아래는 소스코드이다.
그전에 미리 말해두고 싶은 것은 jQuery는 이번에 처음 책을 한번 보고 만든 것이기 때문에 코드는 완전 허접이다.
gallery.php
<tr>
<td colspan=”2″><img src=”<?=$g4[gallery_img_path]?>/gallery_title.gif” /></td>
</tr>
<tr>
<td width=”800″ valign=”top”>
<table width=”800″ cellpadding=”0″ cellspacing=”0″ border=”0″><!– 베스트 시공갤러리 –>
<tr>
<td height=”358″ class=”gl_grborder”>
<div id=”BestGalleryContent”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”44″ height=”346″ align=”right”><img src=”<?=$g4[gallery_img_path]?>/gallery_btn_prev.gif” id=”BestPrev” /></td>
<td width=”700″ valign=”top”><div id=”BestGallery”></div></td>
</td>
<td width=”44″><img src=”<?=$g4[gallery_img_path]?>/gallery_btn_next.gif” id=”BestNext” /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><img src=”<?=$g4[gallery_img_path]?>/gallery_search_shadow.jpg” /></td>
</tr>
<tr>
<td valign=”top”>
</td>
</tr>
<tr>
<td height=”15″></td>
</tr>
</table>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”800″><img src=”<?=$g4[gallery_img_path]?>/gallery_list.gif” /></td>
</tr>
<tr>
<td><img src=”<?=$g4[gallery_img_path]?>/gallery_list_photo.gif” /><img src=”<?=$g4[gallery_img_path]?>/gallery_list_category.gif” /><img src=”<?=$g4[gallery_img_path]?>/gallery_list_memo.gif” /><img src=”<?=$g4[gallery_img_path]?>/gallery_list_company.gif” /></td>
</tr>
<tr>
<td><? include_once(“$g4[gallery_path]/gallery_list.php”); ?></td>
</tr>
</table>
</td>
<td width=”200″ valign=”top”><? include_once(“$g4[path]/subbanner.php”); ?></td>
</tr>
</table>
<script type=”text/javascript”>
$(function() {
$(‘#BestGalleryContent’).mouseover(function() {
StopChange();
});
$(‘#BestGalleryContent’).mouseout(function() {
reStartChange();
});
$(‘#BestPrev’).click(function() {
var totalPage = parseInt($(‘input:hidden[name=totalPage]’).val());
var bpage = parseInt($(‘input:hidden[name=bpage]’).val()) + 1;
if(totalPage < bpage) {
bpage = 1;
}
LoadBest(bpage);
});
$(‘#BestNext’).click(function() {
var totalPage = parseInt($(‘input:hidden[name=totalPage]’).val());
var bpage = parseInt($(‘input:hidden[name=bpage]’).val()) – 1;
if(bpage < 1) {
bpage = totalPage;
}
LoadBest(bpage);
});
});
function LoadBest(bpage)
{
$(‘#BestGallery’).fadeOut(50);
$(‘#BestGallery’).load(
‘gallery_best.php’,
{ bpage: bpage }
);
$(‘#BestGallery’).ready(function() {
$(‘#BestGallery’).fadeIn(1200);
});
}
$(document).ready(function() {
StartChange();
BestDisplay = setInterval(“StartChange()”, 5000);
});
function StartChange()
{
var totalPage = parseInt($(‘input:hidden[name=totalPage]’).val());
var bpage = parseInt($(‘input:hidden[name=bpage]’).val()) + 1;
if(totalPage < bpage) {
bpage = 1;
}
LoadBest(bpage);
}
function StopChange()
{
clearInterval(BestDisplay);
}
function reStartChange()
{
BestDisplay = setInterval(“StartChange()”, 5000);
}
</script>
gallery_best.php
<tr>
<td colspan=”2″ height=”45″><img src=”<?=$g4[gallery_img_path]?>/icon_goldstar.gif” align=”absmiddle” /> <span class=”gb_subj”><?=cut_str(get_text($best[gl_subject]), 111, “..”)?></span></td>
</tr>
<tr>
<td width=”388″ valign=”top”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td colspan=”3″><img src=”<?=$g4[gallery_img_path]?>/gallery_best_border_top.jpg” /></td>
</tr>
<tr>
<td width=”9″ height=”262″><img src=”<?=$g4[gallery_img_path]?>/gallery_best_border_left.jpg” /></td>
<td width=”354″><?=$mimg[0]?></td>
<td width=”9″><img src=”<?=$g4[gallery_img_path]?>/gallery_best_border_right.jpg” /></td>
</tr>
<tr>
<td colspan=”3″><img src=”<?=$g4[gallery_img_path]?>/gallery_best_border_bottom.jpg” /></td>
</tr>
<tr>
<td colspan=”3″><img src=”<?=$g4[gallery_img_path]?>/gallery_best_shadow.jpg” /></td>
</tr>
</table>
</td>
<td width=”277″ valign=”top”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”72″ height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_category.gif” alt=”시공구분” /></td>
<td width=”195″ class=”gb_detail”><?=$gb_cate?></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_addr.gif” alt=”시공지역” /></td>
<td class=”gb_detail”><?=$best[gl_addr]?></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_area.gif” alt=”시공면적” /></td>
<td class=”gb_detail”><?=number_format($best[gl_area])?>㎡ (<?=number_format(round((int)$best[gl_area] / 3.3058))?>평형)</td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_money.gif” alt=”시공비용” /></td>
<td class=”gb_detail”><span class=”gb_money”><?=number_format($best[gl_money])?> 원</span></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_company.gif” alt=”시공업체” /></td>
<td class=”gb_detail”><span class=”bold”><?=$best[biz_name]?></span></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_q.gif” alt=”상담문의” /></td>
<td class=”gb_detail”><?=$best[biz_contact]?></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr>
<td height=”25″><img src=”<?=$g4[gallery_img_path]?>/gallery_subj_homepage.gif” alt=”홈페이지” /></td>
<td class=”gb_detail”><a href=”<?=set_http($best[mb_homepage])?>” target=”_blank”><?=str_replace(“http://”, “”, $best[mb_homepage])?></a></td>
</tr>
<tr><td colspan=”2″ class=”gb_line”></td></tr>
<tr><td colspan=”2″ height=”25″></td></tr>
<tr>
<td colspan=”2″><?=$simg[0]?> <?=$simg[1]?> <?=$simg[2]?></td>
</tr>
</table>
</td>
</tr>
</table>
<script type=”text/javascript”>
$(function() {
$(‘#s_img0’).mouseover(function() {
var m_img = $(‘#s_img0’).attr(“src”);
m_img = m_img.replace(“thumb/s_”, “thumb/m_”);
org_img = $(‘#m_img’).attr(“src”);
if(org_img != m_img) {
$(‘#m_img’).fadeOut(50);
$(‘#m_img’).attr(“src”, m_img).fadeIn(500);
}
});
$(‘#s_img1’).mouseover(function() {
var m_img = $(‘#s_img1’).attr(“src”);
m_img = m_img.replace(“thumb/s_”, “thumb/m_”);
org_img = $(‘#m_img’).attr(“src”);
if(org_img != m_img) {
$(‘#m_img’).fadeOut(50);
$(‘#m_img’).attr(“src”, m_img).fadeIn(500);
}
});
$(‘#s_img2’).mouseover(function() {
var m_img = $(‘#s_img2’).attr(“src”);
m_img = m_img.replace(“thumb/s_”, “thumb/m_”);
org_img = $(‘#m_img’).attr(“src”);
if(org_img != m_img) {
$(‘#m_img’).fadeOut(50);
$(‘#m_img’).attr(“src”, m_img).fadeIn(500);
}
});
});
</script>
<form name=”gallerybest”>
<input type=”hidden” name=”bpage” value=”<?=$bpage?>”>
<input type=”hidden” name=”totalPage” value=”<?=$btotal_count?>”>
</form>
작업 중인 사이트가 그누보드 기반으로 만들어지고 있기 때문에 그누보드의 함수와 변수를 사용했다. 위 이미지에서
3개의 작은 썸네일 이미지에 마우수를 오버하면 왼쪽의 큰 이미지가 변경되며 갤러리가 보이는 부분에 마우스를 오버
하게 되면 자동으로 바뀌는 부분이 정지하고 마우스가 벗어나게 되면 다시 작동하도록 작업을 했다. DB에서 자료를
불러오는 부분은 빠져있다. 다음 번에 이런 기능을 다시 만들게 된다면 좀 더 나은 코드를 작성해보고 싶다. ^____^