아래의 소스를 참고하셔서 응용시켜보세요
*데모를 확인하시고 사용하세요!
<html>
<head>
<title>해피CGI</title>
<style type='text/css'>
#gallery {
height:320px;
display:none;
}
#slideshow {
display:none;
}
.gcap {
font-size:12px;font-family:verdana;
margin:3px; padding:0;
}
.scap {
font-size:12px;font-family:verdana;
margin:3px; padding:0;
}
.gcon { /* gallery image/caption container */
width:114px;
height:120px;
margin:10px;
background:#CFD4E6;
border:1px solid #BF8660;
float:left;
}
.scon { /* slideshow image/caption container */
width:480px;
margin:10px;
}
#gallery img {
margin:6px 6px 3px 6px;
}
#slideshow img {
margin:6px 6px 3px 6px;
}
#navigation {
/* text-align:center; */
}
#prev, #next, #back, #auto, #time {
color:#BF8660;
cursor:pointer;
font-weight:bold;
margin-right:20px;
}
.clearAll {
clear:both;
margin:0; padding:0;
}
</style>
<script type='text/javascript'>
var imgsPerPg = 6; // 썸네일 목록 갯수
var imgsMax = 11; // 이미지 총 갯수
var slideTimeout = 3; // 슬라이드 넘어가는 시간 설정
var gPath = 'http://www.blueb.co.kr/SRC/javascript/image/photo/gallery/'; // 썸네일 이미지 경로 마지막에 / 들어감
var gPrefix = 'photo'; //파일명 접두사
var gSuffix = '_th'; //파일명 접미사
var gExt = '.jpg'; //파일 확장자
var gZeros = true; // filename uses leading zeros?
var gDigits = 3 // 파일명 카운트(예 : photo001.jpg)=3
var sPath = 'http://www.blueb.co.kr/SRC/javascript/image/photo/gallery/'; //큰이미지 경로
var sPrefix = 'photo'; // 파일명 접두사
var sSuffix = ''; //파일명 접미사
var sExt = '.jpg'; //파일 확장자
var sZeros = true; // filename uses leading zeros?
var sDigits = 3 // 파일명 카운트(예 : photo001.jpg)=3
var captions = new Array();
captions[0] = "사진 설명 1";
captions[1] = "사진 설명 2";
captions[2] = "사진 설명 3";
captions[3] = "사진 설명 4";
captions[4] = "사진 설명 5";
captions[5] = "사진 설명 6";
captions[6] = "사진 설명 7";
captions[7] = "사진 설명 8";
captions[8] = "사진 설명 9";
captions[9] = "사진 설명 10";
captions[10] = "사진 설명 11";
// End User Configurable Variables
window.onload = function()
{
xImgGallery();
}
var galMode = true;
var autoSlide = false;
var slideTimer = null;
var slideCounter = 0;
var currentSlide = 1;
function xImgGallery()
{
if (document.getElementById && document.getElementById('navigation').style) {
var n = 1, a = xGetURLArguments();
if (a.length) {
var arg = a['g'] || a['s'];
if (arg) {
n = parseInt(arg, 10);
if (n <= 0 || n > imgsMax) { n = 1; }
if (a['s']) { galMode = false; }
}
}
gal_paint(n);
document.getElementById('time').style.display = 'none';
}
}
function gal_paint(n)
{
gal_setImgs(n);
gal_setNav(n);
}
function gal_setImgs(n)
{
var ssEle = document.getElementById('slideshow');
var galEle = document.getElementById('gallery');
var i, imgTitle, pth, img, id, src, ipp, idPrefix, imgSuffix, imgPrefix;
var zeros, digits, capEle, capPar;
if (galMode) {
ipp = imgsPerPg;
idPrefix = 'g';
imgPrefix = gPrefix;
imgSuffix = gSuffix + gExt;
imgTitle = 'Click to view large image';
ssEle.style.display = 'none';
galEle.style.display = 'block';
pth = gPath;
zeros = gZeros;
digits = gDigits;
}
else {
currentSlide = n;
ipp = 1;
idPrefix = 's';
imgPrefix = sPrefix;
imgSuffix = sSuffix + sExt;
imgTitle = '';
ssEle.style.display = 'block';
galEle.style.display = 'none';
pth = sPath;
zeros = sZeros;
digits = sDigits;
}
for (i = 0; i < ipp; ++i) {
id = idPrefix + (i + 1);
img = document.getElementById(id);
capEle = document.getElementById((galMode ? 'gc':'sc') + (i + 1));
if (capEle) capPar = capEle.parentNode;
if ((n + i) <= imgsMax) {
if (zeros) src = xPad(n + i, digits, '0', true);
else src = (n + i) + "";
img.title = imgTitle;
img.alt = src;
img.src = pth + imgPrefix + src + imgSuffix; // img to load now
img.onerror = imgOnError;
if (galMode) {
img.style.cursor = 'pointer';
img.slideNum = n + i; // slide img to load onclick
img.onclick = imgOnClick;
}
if (capEle) {
capEle.innerHTML = captions[i + n];
if (capPar) capPar.style.display = 'block';
}
img.style.display = 'inline';
}
else {
img.style.display = 'none';
if (capEle) {
if (capPar) capPar.style.display = 'none';
}
}
}
}
function imgOnClick()
{
galMode = false;
gal_paint(this.slideNum);
}
function imgOnError()
{
var p = this.parentNode;
if (p) p.style.display = 'none';
}
function gal_setNav(n)
{
var ipp = galMode ? imgsPerPg : 1;
// Next
var e = document.getElementById('next');
if (n + ipp <= imgsMax) {
e.nextNum = n + ipp;
e.onclick = next_onClick;
e.style.display = 'inline';
}
else {
e.nextNum = 1;
}
// Previous
e = document.getElementById('prev');
e.style.display = 'inline';
e.onclick = prev_onClick;
if (n > ipp) {
e.prevNum = n - ipp;
}
else {
e.prevNum = galMode ? normalize(imgsMax) : imgsMax;
}
// Back
e = document.getElementById('back');
if (!galMode) {
e.onclick = back_onClick;
e.style.display = 'inline';
e.backNum = normalize(n);
}
else {
e.style.display = 'none';
}
// Auto Slide
e = document.getElementById('auto');
if (!galMode) {
e.onclick = auto_onClick;
e.style.display = 'inline';
}
else {
e.style.display = 'none';
}
}
function normalize(n)
{
return 1 + imgsPerPg * (Math.ceil(n / imgsPerPg) - 1);
}
function next_onClick(e)
{
gal_paint(this.nextNum);
}
function prev_onClick(e)
{
gal_paint(this.prevNum);
}
function back_onClick(e)
{
galMode = true;
if (slideTimer) {
clearTimeout(slideTimer);
}
autoSlide = false;
gal_paint(this.backNum);
document.getElementById('time').style.display = 'none';
}
function auto_onClick(e)
{
var ele = document.getElementById('time');
autoSlide = !autoSlide;
if (autoSlide) {
slideCounter = 0;
slideTimer = setTimeout("slide_OnTimeout()", slideTimeout);
ele.style.display = 'inline';
}
else if (slideTimer) {
clearTimeout(slideTimer);
ele.style.display = 'none';
}
}
function slide_OnTimeout()
{
slideTimer = setTimeout("slide_OnTimeout()", 1000);
++slideCounter;
document.getElementById('time').innerHTML = slideCounter + '/' + slideTimeout;
if (slideCounter == slideTimeout) {
if (++currentSlide > imgsMax) currentSlide = 1;
gal_paint(currentSlide);
slideCounter = 0;
}
}
/* xGetURLArguments and xPad are part of the X library,
distributed under the terms of the GNU LGPL,
and maintained at Cross-Browser.com.
*/
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function xPad(str, finalLen, padChar, left)
{
if (typeof str != 'string') str = str + '';
if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; }
else { for (var i=str.length; i<finalLen; ++i) str += padChar; }
return str;
}
</script>
</head>
<body>
<div id='gallery'>
<div>
<div class='gcon'><img id='g1'><div class='gcap' id='gc1'> </div></div>
<div class='gcon'><img id='g2'><div class='gcap' id='gc2'> </div></div>
<div class='gcon'><img id='g3'><div class='gcap' id='gc3'> </div></div>
<div class='clearAll'> </div>
</div>
<div>
<div class='gcon'><img id='g4'><div class='gcap' id='gc4'> </div></div>
<div class='gcon'><img id='g5'><div class='gcap' id='gc5'> </div></div>
<div class='gcon'><img id='g6'><div class='gcap' id='gc6'> </div></div>
<div class='clearAll'> </div>
</div>
</div>
<div id='slideshow'>
<div class='scon'><img id='s1'><div class='scap' id='sc1'> </div></div>
</div>
<div id='navigation'>
<span id='prev'>« Previous</span>
<span id='next'>Next »</span>
<p><span id='back'>Back to the Gallery</span></p>
<p><span id='auto' title='Toggle Auto-Slide'>Auto-Slide</span> <span id='time'> </span></p>
</div>
</body>
</html>
|
