½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > À̹ÌÁö°ü·Ã > °¶·¯¸® À̹ÌÁö ¸ñ·ÏÀ¸·Î º¸¿©Áֱ⠻ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
°¶·¯¸® À̹ÌÁö ¸ñ·ÏÀ¸·Î º¸¿©ÁÖ±â
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù À̹ÌÁö°ü·Ã
´Ù¿î·Îµå Ƚ¼ö 1340 ȸ
°£´Ü¼³¸í À̹ÌÁöµéÀÇ À§Ä¡ ¹× È®Àå¸íÀ» ÁöÁ¤ÇØÁÖ°í ÁöÁ¤Æú´õ¾È¿¡ »çÁøÀ» ¾÷·Îµå½ÃÅ°¸é ¸ÚÁø À̹ÌÁö °¶·¯¸®°¡ µÇ¸ç À̸¦ ¸ñ·ÏÀ¸·Î º¸¿©ÁÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

¾Æ·¡ÀÇ ¼Ò½º¸¦ Âü°íÇϼż­ ÀÀ¿ë½ÃÄѺ¸¼¼¿ä

*µ¥¸ð¸¦ È®ÀÎÇÏ½Ã°í »ç¿ëÇϼ¼¿ä!

<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'>&nbsp;</div></div>
    <div class='gcon'><img id='g2'><div class='gcap' id='gc2'>&nbsp;</div></div>
    <div class='gcon'><img id='g3'><div class='gcap' id='gc3'>&nbsp;</div></div>
    <div class='clearAll'>&nbsp;</div>
  </div>
  <div>
    <div class='gcon'><img id='g4'><div class='gcap' id='gc4'>&nbsp;</div></div>
    <div class='gcon'><img id='g5'><div class='gcap' id='gc5'>&nbsp;</div></div>
    <div class='gcon'><img id='g6'><div class='gcap' id='gc6'>&nbsp;</div></div>
    <div class='clearAll'>&nbsp;</div>
  </div>
</div>
<div id='slideshow'>
  <div class='scon'><img id='s1'><div class='scap' id='sc1'>&nbsp;</div></div>
</div>
<div id='navigation'>
  <span id='prev'>&#171; Previous</span>
  <span id='next'>Next &#187;</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'>&nbsp;</span></p>
</div>


</body>
</html>


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 55652910 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.